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

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情

AES加密标准又称为高级加密标准 Rijndael加密法，是美国国家标准技术研究所NIST旨在取代DES的21世纪的加密标准。AES的基本要求是，采用对称分组密码体制，密钥长度可以为128、192或256位，分组长度128位

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

前端加密

• 加密算法：AES/ECB/PKCS5Padding

• 相关参数：密码字段（前端加密后再传给后端）

• 加密秘钥：后端同学提供

• 偏移量: 后端同学提供

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

代码实现

1. 安装

npm install crypto-js --save-dev

2. 建立文件，设置加密函数 建立一个公共文件 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)
}

3. 解密代码

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();
}

5. 使用

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

运行结果

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

encrypted.ciphertext：

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