HTML5怎样利用CryptoJS加密文本_HTML5CryptoJS文本加密用法【实例】

11次阅读

html5需借助cryptojs库实现AES对称加密(推荐CBC模式配IV)或MD5/SHA256哈希,注意密钥编码统一、避免ECB不安全模式,并强调前端哈希不可替代服务端密码处理。

HTML5怎样利用CryptoJS加密文本_HTML5CryptoJS文本加密用法【实例】

html5 本身不提供加密能力,但可以在浏览器环境中通过引入 CryptoJS 库,使用 javaScript 对文本进行对称加密(如 AES)或哈希运算。关键在于正确引入库、选择合适模式与填充、统一编码和密钥处理。

AES 加密文本(推荐 ECB 或 CBC 模式)

CryptoJS 默认使用 AES-128,密钥可为字符串wordArray。注意:ECB 不安全,仅用于简单演示;生产环境建议用 CBC 并传入随机 IV。

  • 引入 CryptoJS(cdn 方式):
  • ECB 示例(无 IV,密钥直接字符串):
    const encrypted = CryptoJS.AES.encrypt(“Hello World”, “my-secret-key”).toString();
    const decrypted = CryptoJS.AES.decrypt(encrypted, “my-secret-key”).toString(CryptoJS.enc.Utf8);
  • CBC 示例(需显式指定 IV 和填充):
    const key = CryptoJS.enc.Utf8.parse(“16-bytes-key-1234”);
    const iv = CryptoJS.enc.Utf8.parse(“16-bytes-iv-5678”);
    const encrypted = CryptoJS.AES.encrypt(“Hello World”, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    const decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv }).toString(CryptoJS.enc.Utf8);

MD5 / SHA256 哈希文本(不可逆)

适合密码摘要、校验值生成,但不能用于“加密后解密”。注意:前端哈希不能替代服务端密码处理,仅作辅助。

  • MD5:CryptoJS.MD5(“password123″).toString()
  • SHA256:CryptoJS.SHA256(“data”).toString()
  • 加盐哈希(提升安全性):
    CryptoJS.SHA256(“password” + “salt123”).toString()

密钥与编码注意事项

常见乱码或解密失败,多因编码不一致。CryptoJS 默认按 UTF-8 处理字符串,但密钥若含中文或特殊字符,需显式解析。

立即学习前端免费学习笔记(深入)”;

  • 避免直接用中文当密钥:CryptoJS.enc.Utf8.parse(“密钥”) 更可靠
  • Base64 密文需保持原样传输,不要二次 encodeURI 或截断
  • 解密前确认密文是合法 Base64 字符串(含 A-Za-z0-9+/=,长度 4 的倍数)

完整 HTML 实例(AES-CBC 加密/解密)

复制保存为 .html 文件即可在浏览器中运行:



text=ZqhQzanResources