前端对密码进行 AES 加密（AES/ECB/PKCS5Padding）

Feb 12, 2023 · Yin灏

前端接口在传输数据的时候，都是明文传输，对于一些敏感信息，比如密码等，直接传输明文并不安全，所以需要在前端对这类数据进行加密。

前端加密

加密算法：AES/ECB/PKCS5Padding
相关参数：密码字段（前端加密后再传给后端）
加密秘钥：后端同学提供
偏移量: 后端同学提供

具体实现细节可参考：官方 Github

代码实现

安装

npm install crypto-js --save-dev

建立文件，设置加密函数建立一个公共文件 utils.js，用于放置加密和解密相关的函数

首先引入 crypto-js，加密后返回 base64 编码，代码如下:

import CryptoJS from "crypto-js";
export function Encrypt(word, keyStr, iv) {
  key = CryptoJS.enc.Utf8.parse(key);
  iv = CryptoJS.enc.Utf8.parse(iv);
  const srcs = CryptoJS.enc.Utf8.parse(word);
  // 加密模式设置为 ECB，补码方式设置为 Pkcs7（即 PKCS5Padding）
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

解密代码

export function Decrypt(word, key, iv) {
  key = CryptoJS.enc.Utf8.parse(key);
  iv = CryptoJS.enc.Utf8.parse(iv);
  let base64 = CryptoJS.enc.Base64.parse(word);
  let src = CryptoJS.enc.Base64.stringify(base64);
  let decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

使用

import { Encrypt, Decrypt } from "../../utils";
// 加密
Encrypt("hello");
// 解密
Decrypt("q3San8223w==");

运行结果

在加密过程中，观察数据的结构： scrs：

encrypted.ciphertext：

最终转换成 base64，这个结果直接用于接口参数的传递：

前端加密

代码实现

运行结果

- Book Lists -