在前端开发中，数据安全早已不是'后端专属'——用户密码、手机号、支付信息等敏感数据的前端传输/存储，都需要加解密技术保驾护航。本文将从基础原理、企业级实战案例、性能优化、安全避坑到未来趋势，全面拆解 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 () {
salt = crypto.( ());
saltHex = .(salt).( b.().(, )).();
encoder = ();
passwordData = encoder.(password);
keyMaterial = crypto..(, passwordData, { : }, , []);
derivedBits = crypto..(
{ : , : salt, : , : },
keyMaterial,
);
hashArray = .( (derivedBits));
hashHex = hashArray.( b.().(, )).();
{ : hashHex, : saltHex };
}
() {
salt = (storedSalt.().( (hex, )));
encoder = ();
passwordData = encoder.(inputPassword);
keyMaterial = crypto..(, passwordData, { : }, , []);
derivedBits = crypto..(
{ : , salt, : , : },
keyMaterial,
);
hashArray = .( (derivedBits));
inputHash = hashArray.( b.().(, )).();
crypto.(encoder.(inputHash), encoder.(storedHash));
}
( () => {
password = ;
{ hash, salt } = (password);
.(, hash);
.(, salt);
isMatch = (password, hash, salt);
.(, isMatch);
isWrongMatch = (, hash, salt);
.(, isWrongMatch);
})();
