在前端开发中，数据安全早已不是'后端专属'——用户密码、手机号、支付信息等敏感数据的前端传输/存储，都需要加解密技术保驾护航。本文将从基础原理、企业级实战案例、性能优化、安全避坑到未来趋势，全面拆解 JavaScript 加解密体系，让你既能理解底层逻辑，又能落地生产级代码。
一、加解密核心认知：先理清'为什么'再学'怎么做'
1.1 前端加解密的核心场景
- 密码存储：绝不可明文存储，需通过哈希 + 盐值不可逆处理；
- 数据传输：前端→后端的敏感数据（如身份证、银行卡）需加密，防止中间人劫持；
- 本地存储：localStorage/sessionStorage 中的敏感信息（如 token）需加密，避免 XSS 攻击窃取；
- 数据校验：文件/接口返回数据的完整性验证（哈希摘要）。
1.2 加解密核心分类（对比表）
| 类型 | 代表算法 | 核心特点 | 适用场景 | 安全性 | 性能 |
|---|---|---|---|---|---|
| 哈希（不可逆） | SHA256/SHA512 | 固定长度、不可逆、抗碰撞 | 密码存储、数据完整性校验 | 高 | 极高 |
| 对称加密（可逆） | AES-128/AES-256 | 单密钥、速度快、可批量加密 | 大量敏感数据传输（如用户信息） | 高 | 高 |
| 非对称加密（可逆） | RSA-2048/ECDSA | 公钥 + 私钥、安全性极高 | 小数据加密（如 AES 密钥传输）、签名 | 极高 | 中 |
1.3 前端加解密的核心标准：Web Crypto API
传统前端加解密依赖 crypto-js、jsencrypt 等第三方库，但现代浏览器已原生支持Web Crypto API（W3C 标准），相比第三方库：
- 更安全：底层由浏览器实现，避免库本身的漏洞；
- 更高性能：底层用 C++ 实现，比 JS 模拟的算法快 10 倍以上；
- 更兼容：支持 Chrome/Firefox/Safari 11+/Edge，Node.js 15+ 也已兼容；
- 注意：仅在 HTTPS/localhost 环境可用（保障安全）。
二、企业级实战案例（可直接复用）
案例 1：哈希加密（不可逆）—— 密码存储的企业级实现
核心痛点
单纯的 SHA256 哈希易被'彩虹表'破解，必须结合随机盐值（Salt） + 密钥拉伸（Key Stretching） 提升安全性。
完整代码（带盐值+PBKDF2 拉伸）
/**
* 企业级密码哈希函数（SHA256 + 随机盐 + PBKDF2 拉伸）
* @param {string} password - 用户明文密码
* @returns {object} { hash: 最终哈希值，salt: 随机盐值 }
*/
async function securePasswordHash(password) {
// 1. 生成 16 位随机盐值（每次加密盐值不同，即使密码相同哈希也不同）
const salt = crypto.getRandomValues(new Uint8Array(16));
const saltHex = Array.from(salt).map(b => b.toString(16).padStart(2, '0')).join('');
// 2. 将密码 + 盐值转换为二进制
const encoder = new TextEncoder();
const passwordData = encoder.encode(password);
// 3. PBKDF2 密钥拉伸（迭代次数 10 万次，防暴力破解）
const keyMaterial = await crypto.subtle.importKey('raw', passwordData, { name: 'PBKDF2' }, false, ['deriveBits']);
const derivedBits = await crypto.subtle.deriveBits(
{ name: 'PBKDF2', salt: salt, iterations: 100000, hash: 'SHA-256' },
keyMaterial,
256
);
// 4. 生成最终哈希值
const hashArray = Array.from(new Uint8Array(derivedBits));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return { hash: hashHex, salt: saltHex };
}
/**
* 验证密码是否正确
* @param {string} inputPassword - 用户输入的密码
* @param {string} storedHash - 数据库存储的哈希值
* @param {string} storedSalt - 数据库存储的盐值
* @returns {boolean} 是否匹配
*/
async function verifyPassword(inputPassword, storedHash, storedSalt) {
// 将存储的盐值转回 Uint8Array
const salt = new Uint8Array(storedSalt.match(/.{1,2}/g).map(hex => parseInt(hex, 16)));
const encoder = new TextEncoder();
const passwordData = encoder.encode(inputPassword);
// 重复哈希过程
const keyMaterial = await crypto.subtle.importKey('raw', passwordData, { name: 'PBKDF2' }, false, ['deriveBits']);
const derivedBits = await crypto.subtle.deriveBits(
{ name: 'PBKDF2', salt, iterations: 100000, hash: 'SHA-256' },
keyMaterial,
256
);
const hashArray = Array.from(new Uint8Array(derivedBits));
const inputHash = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
// 对比哈希值（恒等比较，防计时攻击）
return crypto.timingSafeEqual(encoder.encode(inputHash), encoder.encode(storedHash));
}
// 测试案例
(async () => {
const password = 'User@123456';
// 存储密码（仅第一次注册时执行）
const { hash, salt } = await securePasswordHash(password);
console.log('存储的哈希值：', hash);
console.log('存储的盐值：', salt);
// 验证密码（登录时执行）
const isMatch = await verifyPassword(password, hash, salt);
console.log('密码验证结果：', isMatch); // true
const isWrongMatch = await verifyPassword('WrongPassword', hash, salt);
console.log('错误密码验证结果：', isWrongMatch); // false
})();
关键优化点（企业级特性）
- 随机盐值：每个用户的盐值不同，即使密码相同，哈希结果也不同，彻底破解彩虹表；
- PBKDF2 拉伸：10 万次迭代让暴力破解的时间成本呈指数级增加（可根据业务调整，如金融场景用 20 万次）；
- timingSafeEqual：防止'计时攻击'（攻击者通过对比验证时间差异破解密码）；
- 哈希算法选择：避免 MD5（已被破解），优先 SHA256/SHA512。
案例 2：对称加密（AES）—— 敏感数据传输的生产级实现
核心痛点
基础 AES 加密易因'密钥硬编码'
