前言：聊聊 CryptoJS 那点事儿

哎，老兄，今天咱们随便坐下来喝杯咖啡，唠嗑一下 JavaScript 数据安全。

说实话，前端这块儿总是被人说“信任太低”，于是就有了 CryptoJS。

别急，我先给你抖个底子——CryptoJS 是啥？纯 JS 实现的密码学库，啥 AES、MD5、SHA dou有。

哈哈，这玩意儿跟我们平时写的业务代码一样，直接 npm 安装、import 用就完事儿。

先说场景。

用户在登录页填了密码，又在支付页输信用卡号，这些敏感信息Ru果直接明文通过 HTTPS 走，虽然传输层有 SSL，但浏览器插件、恶意脚本、甚至 XSS douNeng把明文偷走。

咱们说的“Zui小信任模型”就是：后端不全信任前端，所以让前端先把数据加密一层，再交给后端。

再举个例子：

接口参数防篡改——HMAC+时间戳

本地存储的用户信息——AES 加密后放 localStorage

一次性口令生成——PBKDF2 派生密钥

Zui常用的当然是 AES。咱们一般选 CBC 模式配 PKCS7 填充。

const secretKey = CryptoJS.enc.Utf8.parse; // 16 字节
const iv = CryptoJS.enc.Utf8.parse;
const plaintext = "敏感数据要加密";
const ciphertext = CryptoJS.AES.encrypt(plaintext, secretKey, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
}).toString;
console.log;

解密也hen直白：

const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
});
const original = bytes.toString;
console.log;

哈希主要用来Zuo“数字指纹”。比如密码存库，用盐值+迭代再哈希。

// MD5
console.log.toString);
// SHA-256
console.log.toString);

PBKDF2 Neng把用户随手敲的密码，加盐+多次迭代，产出一个高熵的派生密钥。

var derivedKey = CryptoJS.PBKDF2("userPassword", "randomSalt", {
    keySize: 256/32,
    iterations: 250000,
    hasher: CryptoJS.algo.SHA512
});
console.log);

这个坑可大了。

绝对不要把硬编码的 key/iv 写在源码里。哪怕你压缩混淆，它仍然Ke以被抓包工具轻易找出来。

生产环境请从后端 API 动态获取 key/iv，或者使用非对称加密把对称钥匙包起来。

Ru果只Neng前端生成，那就每次登录时随机生成一次用会话存储保存，仅在当前会话有效。

记得给盐值也随机化，防止彩虹表攻击。

async function fetchSecret {
    const resp = await fetch;
    const data = await resp.json; // {key:"...", iv:"..."}
    return {
        key: CryptoJS.enc.Hex.parse,
        iv:  CryptoJS.enc.Hex.parse
    };
}

1️⃣ “只要用了 HTTPS 就不需要前端加密”。不对不对，那只是传输层安全，浏览器里运行的代码依旧裸露。

2️⃣ “把 AES key 放在 localStorage”。这根本没保安作用——任何Neng打开控制台的人douNeng读到它。

3️⃣ “使用 ECB 模式就省事”。ECB 完全没有扩散性，同一块明文会产生同样的密文，是大忌！除非你真的想让图像出现马赛克效果 😂。

4️⃣ “MD5 Ke以当作密码哈希”。Yi经被证实Ke以碰撞，不建议用于任何安全场景，只适合文件完整性校验而Yi。

这个问题经常被问到，我也曾纠结过几天。其实原因大多和 SEO 技术细节有关：

页面渲染方式：Baidu 的爬虫对纯 JavaScript 渲染支持有限。Ru果你的页面所有内容dou是通过 JS 动态注入，爬虫可Neng根本kan不到关键字，从而“不收录”。解决办法是服务端渲染或使用 prerender 技术，把关键内容提前写入 HTML 中。

内容重复或质量不足：Baidu 喜欢原创、有价值的文字。Ru果你的页面只有代码块，没有解释说明，hen容易被判定为“低质量”。所以在本文里我特意加入了大量解释和案例，让内容geng丰富、geng友好。

Crawl budget 被耗尽：Ru果站点内部链接结构混乱、死链太多，爬虫会浪费时间在无效页面上，自然也不会深入抓取你的技术文章。保持站点健康、定期检查 404 页面是关键。

保证页面可直接阅读、提供足够文字说明，并Zuo好 SEO 基础，就Neng让百度乖乖收录啦！哈哈，你懂的~

# 小伙伴们经常抱怨每次dou要 copy 粘贴同样代码，其实只要封装成函数，就Neng复用且易维护啦！下面给出一个简洁版示例。

// cryptoUtil.js
import CryptoJS from 'crypto-js';
export const encryptAES =  => {
    const key = CryptoJS.enc.Hex.parse;
    const iv  = CryptoJS.enc.Hex.parse;
    return CryptoJS.AES.encrypt(plainText, key, {
        iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    }).toString;
};
export const decryptAES =  => {
    const key = CryptoJS.enc.Hex.parse;
    const iv  = CryptoJS.enc.Hex.parse;
    const bytes = CryptoJS.AES.decrypt(cipherText, key, {
        iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return bytes.toString;
};

# 使用示例：

AES 加完以后你可Neng还想确保数据没有被中途篡改。Zui简单的方法就是把 HMAC 再拼接到一起：

function signAndEncrypt {
   const jsonStr   = JSON.stringify;
   const cipherTxt = encryptAES;
   const mac       = CryptoJS.HmacSHA256.toString;
   return `${cipherTxt}.${mac}`; // 用点号分隔
}
function verifyAndDecrypt {
   const  = payload.split;
   const expectedMac      = CryptoJ S .HmacSHA256.toString;
   if  throw new Error;
   return JSON.parse);
}

    说到底，Crypto​​​​​​​​​​​​​​​‍‍‌‍‍‌‍‍‌‍‌‌‌ ‌ ‌‌​​️ 是帮我们在“不可信”的浏览器里实现“一层保险”的神器。它不是万Neng钥匙，也不Neng替代 HTTPS；但配合合理的KMS、后台签名以及Zui小权限原则**，它Ke以让敏感信息即使掉进黑客手里也只Nengkan到乱码而Yi。