前端加密算法及其应用详解

在现代前端开发中，用户数据安全愈发重要。无论是账号密码、手机号，还是本地存储的信息，都需要在传输或存储前进行加密处理，防止数据泄露、篡改或中间人攻击。本文将系统梳理前端常用的加密技术、它们的区别及实际应用方式。

---

🧩 一、常见加密技术分类

类型	是否可逆	代表算法	前端用途	后端用途
编码	✅（非加密）	Base64	图片转码、URL传输、嵌入资源	-
哈希	❌	MD5、SHA256	签名、校验数据完整性	密码存储、签名验证
对称加密	✅	AES、DES	加密手机号、本地数据保护	解密客户端数据
非对称加密	✅	RSA、ECC	加密密码、公钥签名	使用私钥解密或签名

---

🔐 二、深入理解对称加密 - AES 示例

1. AES 简介

AES（Advanced Encryption Standard）是目前广泛使用的对称加密算法，加密和解密使用同一密钥，具有加解密速度快、安全性高的特点，适合前端本地加密场景。

2. CBC 模式（Cipher Block Chaining）

CBC 是一种常见的 AES 加密模式，它将明文数据分为多个块，每个块的加密依赖前一个密文块，从而确保即使明文块内容相同，密文也不同。

第一块会先与 IV（初始化向量）做异或运算，再进行加密。

3. PKCS7 填充

AES 要求数据长度是 16 字节的倍数，因此 PKCS7 填充规则会自动补齐。例如加密 "Hello"（5字节），会补足11个值为 11 的字节。

---

🛠️ 三、前端 AES 加密代码示例

import CryptoJS from "crypto-js";

export const aesEncrypt = (data) => {
  const isProd = isProdFun(); // 判断是否是生产环境
  let key = "df658c3b2fc5b818961441c07f7ac4ce";
  let iv = "4bd91d734a724ee9";

  if (!isProd) {
    key = "3c2ae4eba7307b2da218e23bd4a43eeb";
    iv = "c574d00e89d3a4ba";
  }

  const keyUtf8 = CryptoJS.enc.Utf8.parse(key);
  const ivUtf8 = CryptoJS.enc.Utf8.parse(iv);

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

  return encrypted.toString(); // 输出为Base64格式密文
};

✅ 加密过程回顾（图解类比）：

1. 把数据分成每页（块）
2. 每页先 XOR 一次（CBC），再加密
3. 最后一页不够则补页（PKCS7）
4. 第一页使用初始化向量（IV）
5. 最终形成无法识别的字符串

---

🛡️ 四、防中间人攻击应用示例

一个实际场景是：手机号加密后再发送请求，即使中间人截获请求，也无法识别数据。

const encryptedPhone = aesEncrypt("18812345678");
fetch("/api/sendCode", {
  method: "POST",
  body: JSON.stringify({ phone: encryptedPhone }),
});

---

🔑 五、非对称加密 vs 对称加密的组合

非对称加密（如 RSA）通常用于加密对称加密的密钥，比如：

• 前端使用 RSA 公钥加密 AES 密钥
• 服务端使用 RSA 私钥解密密钥，再用解密后的密钥解密正文

这样做的好处是：性能 + 安全兼得

---

🧂 六、哈希算法与加盐机制

虽然哈希不可逆，但常用于数据签名、完整性校验、密码存储。

加盐的意义：

• 同一个密码加上不同盐 → 哈希值不同；
• 防止彩虹表攻击（常见密码的预计算哈希匹配）；

const password = "123456";
const salt = "random_salt_9jd0";
const hash = CryptoJS.SHA256(password + salt).toString();

---

🧪 七、现代加密与 TLS1.3 的提升

• TLS1.2：握手阶段使用 RSA，速度较慢，过程复杂；
• TLS1.3：只保留 ECDHE + 对称加密，握手压缩成 1-RTT（甚至支持 0-RTT）；
• 因此，对称加密依然更快，但非对称加密阶段性能差距大幅缩小。

---

✅ 总结

前端加密不是“越复杂越好”，而是根据场景选择合适的方式：

场景	推荐算法
本地加密缓存	AES 对称加密
登录密码传输	RSA 公钥加密或 HTTPS
数据完整性验证	SHA256 + HMAC
敏感数据传输（手机号等）	AES 加密后上传
图片或小资源嵌入	Base64 编码

结合 CryptoJS 或 Web Crypto API，可实现安全性与可维护性的平衡，打造高质量的前端安全方案。