HTML使用 crypto-js-AES 加密

HTML引入crypto-js.min.js

<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>

vue安装crypto-js

npm install crypto-js

加解密方法


const key = CryptoJS.enc.Utf8.parse("1234567890hijklm"); // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('1234567890abcdef'); // 十六位十六进制数作为密钥偏移量
/* 加密方法 */
function myEncrypt(word) {
  const srcs = CryptoJS.enc.Utf8.parse(word);
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}
/* 解密方法 */
function myDecrypt(word) {
  const encryptedHexStr = CryptoJS.enc.Base64.parse(word);
  const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

使用


const inputVal = '12345'; // 加密内容
let encPwd = myEncrypt(inputVal); // 加密方法
encPwd = JSON.stringify(encPwd); // 将JavaScript对象转换为字符串
encPwd = JSON.parse(encPwd); // 将字符串解析为JavaScript对象
const decPwd = myDecrypt(encPwd); // 解密方法
const UGC = '原内容：' + inputVal; // 原内容
const nencrypted = '加密后：' + encPwd; // 加密后
const decrypted = '解密后：' + decPwd; // 解密后
document.getElementById('box').innerHTML = UGC + '
' + nencrypted + '
' + decrypted;

完整代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>crypto-js-AES加密</title>
    <!-- 加密 -->
    <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
  </head>
  <body>
    <input type="text" id="frame" placeholder="请输入加密内容" />
    <button id="btn">加密</button>
    <div id="box" style="margin-top: 20px"></div>
  </body>
  <script>
    document.getElementById("btn").onclick = function() {
      const inputVal = document.getElementById("frame").value; // 加密内容
      if (!inputVal) {
        alert('请输入加密内容');
        return;
      }
      let encPwd = myEncrypt(inputVal); // 加密方法
      encPwd = JSON.stringify(encPwd); // 将JavaScript对象转换为字符串
      encPwd = JSON.parse(encPwd); // 将字符串解析为JavaScript对象
      const decPwd = myDecrypt(encPwd); // 解密方法
      const UGC = '原内容：' + inputVal; // 原内容
      const nencrypted = '加密后：' + encPwd; // 加密后
      const decrypted = '解密后：' + decPwd; // 解密后
      document.getElementById('box').innerHTML = UGC + '
' + nencrypted + '
' + decrypted;
    };
  </script>
  <!-- CryptoJS.js -->
  <script>
    const key = CryptoJS.enc.Utf8.parse("1234567890hijklm"); // 十六位十六进制数作为密钥
    const iv = CryptoJS.enc.Utf8.parse('1234567890abcdef'); // 十六位十六进制数作为密钥偏移量
    /* 加密方法 */
    function myEncrypt(word) {
      const srcs = CryptoJS.enc.Utf8.parse(word);
      const encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    }
    /* 解密方法 */
    function myDecrypt(word) {
      const encryptedHexStr = CryptoJS.enc.Base64.parse(word);
      const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
      const decrypt = CryptoJS.AES.decrypt(srcs, key, {
        iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
      return decryptedStr.toString();
    }
  </script>
</html>

相关阅读:
依赖的作用域范围
（一）JavaScript 面向对象
vueelementui+tabs选项卡样式更改-内容待递增
Apache Doris 2.0.5 版本正式发布
简易node ts代码给json进行sort或者diff
ChromaDB教程
[杂记]C++中的lambda函数、可变参数模板
C++ NULL 与nullptr 区别
使用JavaScript及HTML、CSS完成秒表计时器
Python的def __init__( ):函数

原文地址：https://blog.csdn.net/AdminGuan/article/details/126850974