在前端开发中，数据安全往往容易被忽视。无论是用户隐私传输还是接口签名，选择合适的加密方式至关重要。本文将梳理几种常见的前端加密方案，从编码到哈希，再到对称与非对称加密，结合实战代码帮你快速上手。
Base64 编码
首先需要明确，Base64 并非加密算法，而是一种编码方式。它将二进制数据转换为 64 个可打印字符的文本字符串。这常用于 URL 传输、Cookie 存储或内嵌图片以减少请求次数。虽然性能影响小，但数据体积会增加约 1/3，且不具备保密性。
function toBase64(str) {
return btoa(unescape(encodeURIComponent(str)));
}
function fromBase64(str) {
return decodeURIComponent(escape(atob(str)));
}
// 使用示例
const originalText = "Hello, World!";
const encodedText = toBase64(originalText);
console.log(encodedText); // "SGVsbG8sIFdvcmxkIQ=="
const decodedText = fromBase64(encodedText);
console.log(decodedText); // "Hello, World!"
MD5 与 SHA-256 哈希
这两者属于哈希算法，产生固定长度的摘要。它们不可逆，因此不能用来'解密'，主要用于数据完整性校验或密码存储（配合盐值）。
MD5 计算快但存在碰撞风险，已不推荐用于高安全场景。SHA-256 则更安全，适用于分布式系统或区块链等场景。
import CryptoJS from 'crypto-js';
function md5Encrypt(str) {
return CryptoJS.MD5(str).toString();
}
function sha256Encrypt(str) {
return CryptoJS.SHA256(str).toString();
}
// 示例
const originalText = "Hello, World!";
console.log(md5Encrypt(originalText));
console.log(sha256Encrypt(originalText));
AES 对称加密
AES 是高级加密标准，加解密使用同一把密钥。它的速度很快，适合处理大量数据。不过，密钥管理是关键，一旦泄露，所有数据都将暴露。
在实际应用中，为了增强安全性，通常会结合随机向量（IV）使用 CBC 模式，而不是简单的 ECB 模式。下面是一个基于 CryptoJS 的基础实现示例：
import CryptoJS from 'crypto-js';
function aesEncrypt(data, key) {
const keyHex = CryptoJS.enc.Utf8.parse(key);
const encrypted = CryptoJS.AES.encrypt(data, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
function aesDecrypt(encryptedData, key) {
const keyHex = CryptoJS.enc.Utf8.parse(key);
const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
// 注意：生产环境建议使用 CBC 模式并传入 IV
const key = "1234567890123456"; // 必须为 16/24/32 位
const originalText = "Hello, World!";
const encryptedText = aesEncrypt(originalText, key);
const decryptedText = aesDecrypt(encryptedText, key);
RSA 非对称加密
RSA 使用一对密钥：公钥加密，私钥解密。公钥可以公开，私钥必须严格保密。它常用于密钥交换或身份认证，虽然比对称加密慢，但安全性更高。
在 TypeScript 项目中，我们可以封装一个工具类来简化操作。以下是基于 jsencrypt 库的实现思路：
import { JSEncrypt } from 'jsencrypt';
const publicKey = "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n" +
"nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ==";
const privateKey = "MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n" +
"7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n" +
"PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n" +
"kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n" +
"cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n" +
"DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n" +
"YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n" +
"UP8iWi1Qw0Y=";
export const encrypt = (txt: string) => {
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey);
return encryptor.encrypt(txt);
};
export const decrypt = (txt: string) => {
const encryptor = new JSEncrypt();
encryptor.setPrivateKey(privateKey);
return encryptor.decrypt(txt);
};
在 Vue 组件中调用时，只需引入上述方法即可。记得私钥不要硬编码在前端代码中，实际生产环境通常由后端生成密钥对，前端只保留公钥用于加密敏感信息。
核心概念补充
为了更清晰地选择方案，这里简单回顾一下几个关键概念：
对称 vs 非对称
对称加密（如 AES）速度快，适合大数据，但密钥分发困难。非对称加密（如 RSA）解决了密钥分发问题，但速度慢，适合小数据或密钥交换。
哈希算法
哈希是将任意长度输入映射为固定长度输出的过程。它具有确定性、定长、不可逆和雪崩效应。常见的用途包括文件指纹校验、密码存储（存摘要而非明文）、URL 签名防篡改等。记住，哈希不是加密，无法'解密'，只能通过暴力破解或查表尝试还原。
希望这些内容能帮你在前端安全建设中少走弯路。
