JavaScript 实现 AES/CBC/PKCS7Padding 数据加密解密

home 编辑时间 2020/04/01

![](/api/file/getImage?fileId=5e84152016199b501c0071e2)

## 前言
关于AES加密解密的笔记
之前写过一篇`Java` 的 `AES PKCS7` 实现方法的笔记
地址:
[https://leanote.zzzmh.cn/blog/post/5cc2807b16199b7fec00034f](https://leanote.zzzmh.cn/blog/post/5cc2807b16199b7fec00034f)

这次再实现一下 `JavaScript` 的 `AES PKCS7`
参考:
[https://blog.csdn.net/fei565789229/article/details/87487250](https://blog.csdn.net/fei565789229/article/details/87487250)

## 代码
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AES 测试</title>
</head>
<body>
<label>加密前: </label><input id="data" type="text" placeholder="加密前" style="width: 80%"><br>
<label>加密后: </label><input id="code" type="text" placeholder="加密后" style="width: 80%"><br>
<label>解密后: </label><input id="decode" type="text" placeholder="解密后" style="width: 80%"><br>
<button onclick="test()">test</button>
<script src="https://cdn.staticfile.org/crypto-js/4.0.0/crypto-js.min.js" type="text/javascript"></script>
<script>
    // 偏移量
    let iv = "0000000000000000";
    // 密钥，长度必须为16
    let secret_key = "1234567890123456";
    function parse(string) {
        return CryptoJS.enc.Utf8.parse(string);
    }
    function encrypt(data){
        // Encrypt
        return CryptoJS.AES.encrypt(parse(data), parse(secret_key), {
            iv: parse(iv),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }).toString();
    }
    function decrypt(code){
        return CryptoJS.AES.decrypt(code, parse(secret_key),{
            iv: parse(iv),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }).toString(CryptoJS.enc.Utf8);
    }
    function test() {
        const data = document.querySelector('#data').value;
        const code = encrypt(data);
        document.querySelector('#code').value = code;
        const decode = decrypt(code);
        document.querySelector('#decode').value = decode;
    }
</script>
</body>
</html>
```

## END
线上演示:
[https://tczmh.gitee.io/aes-test/](https://tczmh.gitee.io/aes-test)

效果截图:
![](/api/file/getImage?fileId=5e84149a16199b501c0071e1)

Gitee源码: 
[https://gitee.com/tczmh/aes-test](https://gitee.com/tczmh/aes-test)

送人玫瑰,手留余香