crypto-js实现前端加密和解密

crypto-js是谷歌开发的一个纯JavaScript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引用总文件，也可以单独引用某一文件。

1.crypto-js实现前端加密和解密案例

封装crypto-js实现的加密和解密工具类库。encrypt.js

// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("helloworld123456");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("simoniucom123456");

/**
 * 加密方法
 * @param data
 * @returns {string}
 */
function encrypt(data) {
    if (typeof data === "object") {
        try {
            // eslint-disable-next-line no-param-reassign
            data = JSON.stringify(data);
        } catch (error) {
            console.log("encrypt error:", error);
        }
    }
    const dataHex = CryptoJS.enc.Utf8.parse(data);
    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
        iv: SECRET_IV, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.ciphertext.toString();
}

/**
 * 解密方法
 * @param data
 * @returns {string}
 */
function decrypt(data) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
        iv: SECRET_IV, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

测试页面。demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js前端解密和解密案例</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>

<h1>crypto-js前端解密和解密案例</h1>
<hr>
<script src="js/encrypt.js"></script>
<script>
    let username = "admin";
    let password = "123456";
    const encryptUsername = encrypt(username);
    const encryptPassword = encrypt(password);
    console.log("加密后的用户名：", encryptUsername);
    console.log("加密后的密码：", encryptPassword);
    console.log("解密后的用户名：",decrypt(encryptUsername));
    console.log("解密后的密码：",decrypt(encryptPassword));
</script>
</body>
</html>

运行效果：

加密后的用户名： 95c255482fb8f3750e8e618635a866c3
加密后的密码： 3995ab64411aa6bb9b19c09172a20074
解密后的用户名： admin
解密后的密码： 123456