前端加密的几种方式
- 一、对称加密
- 原理
- 常用算法
- 代码示例（AES）
- 适用场景
- 二、非对称加密
- 原理
- 常用算法
- 代码示例（RSA)
- 适用场景
- 三、哈希函数
- 原理
- 常用算法
- 代码示例（SHA-256）
- 适用场景
- 四、Base64 编码
- 原理
- 特点
- 代码示例
- 五、Web Crypto API
- 原理
- 代码示例（AES GCM）
- 优势
- 选择建议
一、对称加密
原理
加密与解密使用同一密钥，速度快但需安全传输密钥。
常用算法
- AES（主流选择，支持128/192/256位密钥。推荐GCM模式，即消息认证的认证加密算法）
代码示例（AES）
// 使用 crypto-js 库
import CryptoJS from'crypto-js';
const encrypted = CryptoJS.AES.encrypt('敏感数据', '密钥').toString();
const decrypted = CryptoJS.AES.decrypt(encrypted, '密钥').toString(CryptoJS.enc.Utf8);
适用场景
- 本地存储加密（如 LocalStorage、Cookie）
- 实时数据传输（需配合安全信道传输密钥）
二、非对称加密
原理
公钥加密、私钥解密，安全性高但速度较慢。
常用算法
- RSA（广泛用于密钥交换和数字签名）
- ECC（椭圆曲线加密，资源消耗更低）
代码示例（RSA)
// 公钥加密
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey);
const encrypted = encryptor.encrypt('数据');
// 私钥解密（通常由后端处理）
const decryptor = new JSEncrypt();
decryptor.setPrivateKey(privateKey);
const decrypted = decryptor.decrypt(encrypted);
适用场景
- 密钥分发（如 HTTPS 握手阶段）
- 数字签名验证
三、哈希函数
原理
单向不可逆映射，生成固定长度摘要，用于验证数据完整性。
常用算法
- SHA-256（主流选择，抗碰撞性强）
代码示例（SHA-256）
// 使用 crypto-js 库
const hash = CryptoJS.SHA256('原始数据').toString();
适用场景
- 密码存储（需加盐处理，即随机生成字符串）
- 文件完整性校验
四、Base64 编码
原理
二进制转ASCII字符，非加密但常用于数据编码传输。
特点
可逆，需配合其他加密手段增强安全性。
代码示例
const encoded = btoa('原始字符串'); // 编码
const decoded = atob(encoded); // 解码
适用场景：
- 图片/文件二进制数据传输
- 简单数据混淆（需结合其他加密）
编码≠加密：Base64需配合其他加密技术使用
五、Web Crypto API
原理
浏览器原生API，支持AES、RSA等算法，安全性更高。
代码示例（AES GCM）
// 生成密钥
const key = await crypto.subtle.generateKey({ name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]);
// 加密
const iv = crypto.getRandomValues(new Uint8Array(12));
const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, data);
优势
- 硬件加速性能优化
- 支持更复杂的加密模式（如GCM）
选择建议
| 需求 | 推荐方案 | 安全性 | 性能 |
|---|---|---|---|
| 本地存储加密 | AES-256 + 哈希加盐 | 高 | 高 |
| 密钥交换 | RSA-2048/ECC | 极高 | 中 |
| 密码传输 | SHA-256 + HTTPS | 高 | 高 |
| 实时数据流加密 | AES-GCM + Web Crypto API | 高 | 高 |
