在前端开发中，加密技术是保障数据传输安全、用户隐私、接口防刷等功能的核心环节之一。本文将围绕两大主流前端加密库 aes.js 与 crypto-js 展开，带你全面掌握前端 AES 加密与解密 的实战用法。

📌 目录

  1. 为什么前端需要加密
  2. AES 加密算法简介
  3. crypto-js 实战（推荐）
  4. aes.js 实战
  5. 两者对比与适用场景
  6. 安全建议与注意事项
  7. 延伸阅读与参考资料

1️⃣ 为什么前端需要加密

前端加密常用于：

  • 登录信息加密（如密码、Token）
  • 本地存储加密（localStorage / IndexedDB）
  • 防止抓包接口滥用
  • 与后端对称加密通信（配合 HTTPS 使用更佳）

⚠️ 注意：前端加密不能代替 HTTPS，更多是用于“增强安全性”或“防止暴露接口规则”。

2️⃣ AES 加密算法简介

AES（Advanced Encryption Standard）是一种对称加密算法，特点：

  • 对称性：加密与解密使用同一个密钥
  • 快速、安全：常用于数据加密通信中
  • 支持 128、192、256 位密钥

在前端，常用 JS 实现 AES 的库有：

  • crypto-js：轻量、文档全、最常用
  • aes.js：更底层、更灵活

3️⃣ 使用 crypto-js 实现 AES 加解密（推荐 ✅）

✅ 安装

npm install crypto-js

或直接使用 CDN：

<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>

✅ 加密

import CryptoJS from "crypto-js";

const key = CryptoJS.enc.Utf8.parse("1234567890123456"); // 16位密钥
const iv = CryptoJS.enc.Utf8.parse("1234567890123456");  // 16位向量

const text = "需要加密的内容";

const encrypted = CryptoJS.AES.encrypt(text, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
});

console.log("加密后:", encrypted.toString());

✅ 解密

const decrypted = CryptoJS.AES.decrypt(encrypted.toString(), key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
});

console.log("解密后:", decrypted.toString(CryptoJS.enc.Utf8));

4️⃣ 使用 aes.js 实现 AES 加解密（更底层）

✅ 安装

npm install aes-js

或使用 CDN：

<script src="https://cdn.jsdelivr.net/npm/aes-js@3.1.2/index.js"></script>

✅ 加密

import aesjs from 'aes-js';

const key = aesjs.utils.utf8.toBytes('1234567890123456');
const text = '加密内容';
const textBytes = aesjs.utils.utf8.toBytes(text);

// ECB 模式（示例）
const aesEcb = new aesjs.ModeOfOperation.ecb(key);
const encryptedBytes = aesEcb.encrypt(aesjs.padding.pkcs7.pad(textBytes));

console.log('加密结果:', aesjs.utils.hex.fromBytes(encryptedBytes));

✅ 解密

const decryptedBytes = aesEcb.decrypt(encryptedBytes);
const unpadded = aesjs.padding.pkcs7.strip(decryptedBytes);
const decryptedText = aesjs.utils.utf8.fromBytes(unpadded);

console.log('解密结果:', decryptedText);

5️⃣ crypto-js vs aes.js 对比

对比项crypto-jsaes.js
使用难度✅ 简单易用⚠️ 略复杂（需要处理 padding）
模式支持CBC、ECB、CTR、CFB 等齐全支持较少（偏向 ECB、CTR）
文档和社区丰富，最主流次主流，适合底层自定义
是否自动 padding是否，需要手动调用 pkcs7.pad
适合人群大多数前端开发者高级用户、需精细控制的场景

**结论：**推荐使用 crypto-js，除非你有明确底层控制需求。

6️⃣ 安全建议与注意事项

  • 切勿将密钥硬编码在前端！ 可通过服务端动态下发密钥或使用非对称加密分发。
  • 前端加密不是安全防线的全部！ 一定要配合 HTTPS + 服务端校验。
  • 若用于登录加密，应与服务端统一加密协议（key、iv、模式等需匹配）
  • 推荐使用 CBC 模式 + PKCS7 Padding（更安全稳定）

🔗 延伸阅读与参考资料