前端 aes 加密

最新推荐文章于 2024-08-19 10:43:11 发布

原创最新推荐文章于 2024-08-19 10:43:11 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了AES加密算法的工作原理及使用CryptoJS库实现的CBC模式加密与解密过程。通过一个具体的HTML示例，展示了如何在前端进行AES加密和解密操作，包括密钥和初始化向量的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

aes加密算法原理：

https://blog.youkuaiyun.com/qq_28205153/article/details/55798628

加密模式介绍：

https://blog.youkuaiyun.com/jerry81333/article/details/78336616

aes加密依赖CryptoJS库

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id="encrypt"/>
加密密文：<span id="enWord"></span><br/>
<input type="text" id="decrypt"/>
解密密文：<span id="deWord"></span><br/>
<button id="encryptClick">加密</button>
<button id="decryptClick">解密</button>
<script src="js/aes.js"></script>
<script>
    var aesObj={
        "key":CryptoJS.enc.Utf8.parse("abcdefgabcdefg12"),
        ivv:CryptoJS.enc.Utf8.parse("abcdefgabcdefg12"),
        //秘钥和偏移量和后台约定好
        "EnCode":function(str){
            var encrypted=CryptoJS.AES.encrypt(str,this.key,{
                iv:this.ivv,
                mode:CryptoJS.mode.CBC,
                padding:CryptoJS.pad.Pkcs7
            });
            return encrypted.toString();
        },

        "DeCode":function(str){
            var decrypted=CryptoJS.AES.decrypt(str,this.key,{
                iv:this.ivv,
                mode:CryptoJS.mode.CBC,
                padding:CryptoJS.pad.Pkcs7
            });
            return decrypted.toString(CryptoJS.enc.Utf8);
        }
    };

    var encryptBtn=document.getElementById("encryptClick");
    var decryptBtn=document.getElementById("decryptClick");
    var encryptTxt=document.getElementById("enWord");
    var decryptTxt=document.getElementById("deWord");
    encryptBtn.onclick=function(){
        var inputVal=document.getElementById("encrypt").value;
        var encryptStr=aesObj.EnCode(inputVal);

        encryptTxt.innerText=encryptStr;
    };

    decryptBtn.onclick=function(){
        var inputVal=document.getElementById("decrypt").value;

        var decryptStr=aesObj.DeCode(decodeURIComponent(inputVal));

        decryptTxt.innerText=decryptStr;
    }

</script>
</body>
</html>

下载地址：

https://pan.baidu.com/s/1w08UrTPkJuohHz6113R4Ew
提取码：gz7b