前端安全必读：JavaScript 加密与解密完全指南

elirlove1

376人浏览 · 2026-06-05 15:54:58

elirlove1 · 2026-06-05 15:54:58 发布

在 Web 开发中，JavaScript 加密与解密是一个既敏感又关键的领域。很多人误以为前端加密能像后端一样保证数据绝对安全，但实际上，由于代码运行在客户端，任何加密逻辑都无法完全抵御逆向工程。然而，合理使用 JS 加密技术（例如混淆、对称/非对称加密、哈希校验）仍然可以在传输层防御、中间人攻击防范、客户端本地存储保护等场景中发挥重要作用。本文将系统梳理 JS 加密解密的原理、常见算法、主流工具库以及在实际项目中的最佳实践。

一、JS 加密的定位：能做什么，不能做什么？

在深入工具之前，必须先明确一个核心观点：前端加密不能替代 HTTPS，也不能防止用户伪造请求。因为攻击者可以通过调试工具（如 Chrome DevTools）直接看到加密函数、密钥和原始数据。那为什么还要学习 JS 加密？它的实际价值在于：

防止意外泄露：在公网 Wi-Fi 等不安全环境下，即使 HTTPS 存在，额外加一层加密也能增加破解成本。
保护本地存储的数据：例如将加密后的 Token 存入 localStorage，避免明文被简单读取。
反爬虫与混淆：对 API 请求参数进行轻度加密，迫使爬虫开发者付出更多逆向成本。
实现端到端加密：如聊天应用中，客户端加密消息后，服务端只存储密文，用户本人持有密钥。

二、JS 加密核心算法与适用场景

1. 哈希函数（不可逆加密）

哈希算法将任意长度的输入映射为固定长度的输出（摘要），且无法逆向得到原文。常用于密码存储、完整性校验。

MD5：已过时，容易碰撞，不推荐安全场景。
SHA 系列：SHA-256、SHA-512 是目前主流选择。
bcrypt / scrypt：慢哈希，适合后端存储密码，前端较少使用（计算量大）。

JS 示例（使用 Web Crypto API）：

javascript

复制

下载

async function sha256(message) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex;
}
sha256('hello').then(hash => console.log(hash));

2. 对称加密

加密和解密使用同一个密钥。特点是速度快，适合大量数据加密。密钥必须在客户端与服务器间安全共享，这通常依赖非对称加密或提前预置。

AES（高级加密标准）：最常用，支持 128/192/256 位密钥。模式推荐 GCM（带认证）或 CBC。
ChaCha20：移动设备上性能更好的流加密。

JS 实现：可使用 Web Crypto API 或第三方库 CryptoJS。

javascript

复制

下载

// 使用 CryptoJS 进行 AES 加解密
const key = CryptoJS.enc.Utf8.parse('1234567890123456'); // 16字节
const iv = CryptoJS.enc.Utf8.parse('1234567890123456');

const encrypted = CryptoJS.AES.encrypt('Hello World', key, { iv: iv, mode: CryptoJS.mode.CBC }).toString();
console.log('密文:', encrypted);

const decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv, mode: CryptoJS.mode.CBC }).toString(CryptoJS.enc.Utf8);
console.log('解密:', decrypted);

3. 非对称加密

使用公钥加密、私钥解密（或私钥签名、公钥验签）。无需共享密钥，适合保护对称加密的密钥（即混合加密方案）。

RSA：最经典，密钥长度通常为 2048 或 4096 位。加密内容不能超过密钥长度，因此常与 AES 组合使用。
ECC（椭圆曲线）：更高效，如 ECDH 用于密钥协商。

JS 实现：Web Crypto API 对 RSA 有良好支持。

javascript

复制

下载

// 生成 RSA 密钥对（实际项目中通常由服务器提供公钥）
const { publicKey, privateKey } = await crypto.subtle.generateKey(
  {
    name: 'RSA-OAEP',
    modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]),
    hash: 'SHA-256',
  },
  true,
  ['encrypt', 'decrypt']
);

三、流行的 JS 加密/解密库对比

库名	特点	适用场景
CryptoJS	老牌、功能全面，支持 AES、SHA、HMAC、PBKDF2 等，体积较大。	浏览器或 Node.js 通用，无需原生 API。
Web Crypto API	浏览器原生接口，性能极高，支持主流算法，但不支持所有模式（如 CBC 可用，GCM 可用）。	现代浏览器项目，不依赖第三方。
forge	功能极其丰富，支持 TLS 模拟、PKCS#12、X.509 证书等。	需要复杂密码学操作的 Node/浏览器。
jsencrypt	专注于 RSA，API 极其简单，适合前端仅需公钥加密的场景。	登录密码传输、支付信息保护。
tweetnacl.js	小巧、安全、速度快，实现了 NaCl 加密库，支持 X25519、XSalsa20、Poly1305。	追求高安全和轻量级的应用。
subtle	Node.js 内置 `crypto` 模块，与 Web Crypto API 相似但略有不同。	后端环境。

四、解密：何时需要在前端解密？

解密通常发生在以下场景：

显示服务器下发的加密数据：例如用户个人信息通过 AES 加密后存储在数据库，前端拿到密文后用本地密钥（从密码派生）解密展示。
处理加密的资源文件：某些游戏或电子书将资源文件 AES 加密，运行时下载并解密。
离线应用：用户下载加密数据包，由客户端本地解密后使用。

特别注意：解密密钥永远不要硬编码在 JS 代码中！正确做法是：

用户输入密码，利用 PBKDF2 派生密钥。
服务端下发临时会话密钥（通过非对称加密保护）。
使用 Web Crypto API 的 unwrapKey 功能。

五、常见陷阱与安全建议

❌ 错误做法

将密钥明文写在代码里：例如 const key = "123456"，攻击者一查源代码就暴露。
只用前端加密而不启用 HTTPS：攻击者可通过 DNS 劫持替换你的加密逻辑。
使用过时的 MD5 或只进行 base64 编码：base64 根本不是加密，只是编码。
认为混淆等于加密：混淆工具（如 UglifyJS、Javascript Obfuscator）只是让代码难以阅读，但动态调试依然能还原逻辑。

✅ 正确实践

HTTPS 优先：一切加密的基础是传输通道安全。
密钥分离：对称加密的密钥应存放在服务端，前端只持有短期票据或用户输入的密码。
使用 Web Crypto API 而非纯 JS 实现：浏览器提供的接口由操作系统/硬件加速，且抗侧信道攻击。
加盐与迭代：对用户密码进行 PBKDF2、scrypt 或 Argon2 处理后再使用。
防重放攻击：在加密数据中加入时间戳或 nonce（一次性随机数）。

六、实用工具与调试助手

对于开发和测试加密解密逻辑，以下在线工具可以极大提升效率：

CyberChef (gchq.github.io/CyberChef)：英国 GCHQ 出品，支持上百种编码、哈希、加解密操作（AES、RSA、XOR 等），被称为“网络瑞士军刀”。
JWT.io：专门用于调试 JSON Web Token 的签名与解密（对称/非对称）。
Bcrypt 在线生成器：快速验证哈希结果。
JS 混淆与反混淆工具：如 toolswm.com/confundirjs/（演示加密思想，但不要用于生产）。

这些工具能帮助你验证算法参数、测试不同模式下的加解密结果，避免在代码中反复试错。

七、综合案例：保护用户登录密码

下面是一个典型的前端加密登录流程（配合 HTTPS 防止中间人，额外加密增加安全性）：

客户端请求服务器获取 RSA 公钥。
用户输入密码，前端随机生成一个 AES 临时密钥。
用 AES 临时密钥加密用户密码。
用 RSA 公钥加密 AES 临时密钥。
将 { encData: AES密文, encKey: RSA加密的临时密钥 } 发送给服务器。
服务器用 RSA 私钥解密出 AES 密钥，再解密密文得到原始密码。
服务器正常验证密码（与数据库中哈希比对）。

此方案即使 HTTPS 被意外绕过，攻击者也得不到明文密码，因为密钥是临时且加密传输的。

简化版代码片段（使用 jsencrypt + CryptoJS）：

javascript

复制

下载

// 假设已获取 RSA 公钥 rsaPublicKey
const encrypt = new JSEncrypt();
encrypt.setPublicKey(rsaPublicKey);

// 生成随机的 AES 密钥和 IV
const aesKey = CryptoJS.lib.WordArray.random(16);
const iv = CryptoJS.lib.WordArray.random(16);
const password = document.getElementById('pwd').value;

// AES 加密密码
const encryptedPwd = CryptoJS.AES.encrypt(password, aesKey, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7,
}).toString();

// RSA 加密 AES 密钥（注意需要将 WordArray 转成 base64 再加密）
const aesKeyBase64 = CryptoJS.enc.Base64.stringify(aesKey);
const encryptedAesKey = encrypt.encrypt(aesKeyBase64);

// 发送数据
fetch('/login', {
  method: 'POST',
  body: JSON.stringify({
    encryptedPwd,
    encryptedAesKey,
    iv: CryptoJS.enc.Base64.stringify(iv),
  }),
});