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 + '<br />' + nencrypted + '<br />' + 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 + '<br />' + nencrypted + '<br />' + 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>
更多加密方法可参考:
JS中利用CryptoJS进行MD5/SHA256/BASE64/AES加密解密的方法与示例
————————————————
版权声明:本文为CSDN博主「UserGuan」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/AdminGuan/article/details/126850974