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>

相关阅读:
GPT-3 内幕机制可视化解析
剑指 Offer II 037. 小行星碰撞
Linux中通配符、shell元字符、转义符
多网络设备存在时，如何配置其上网优先级？
Map.Entry理解和应用
mathlive在vue中使用
ipython、jupyter 在代码执行前修改待执行的代码
Bean的生命周期及演示
GitHub标星百万的程序员转架构之路，竟被阿里用作内部晋升参考
小程序底层架构剖析

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