Js加密算法

使用crypto-js在浏览器上对数据加密签名

重要知识点：

CryptoJS.lib.WordArray WordArray对象可以理解为byte[]
CryptoJS.enc 提供编码转换，从字符串转为WordArray，或从WordArray转为字符串

MD5加密

var ciphetext = CryptoJS.MD5(plaintext);//获得一个CryptoJS.lib.WordArray对象
ciphetext.toString(CryptoJS.enc.Base64);//转成Base64字符串，也可以用 CryptoJS.enc.Base64.stringify(ciphetext);

//ciphetext.toString(); //默认转成BitString格式，与ciphetext.toString(CryptoJS.enc.Hex);效果相同

完整代码

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" type="text/javascript"></script>
    <title>MD5 加密解密</title>
    <script type="text/javascript">
        function encryptor() {
            var plaintext = $("#plaintext").val();
            var displayFormat = $("#displayFormat").val();
            var ciphetext = CryptoJS.MD5(plaintext);
            switch (displayFormat) {
                case "Base64String":
                    ciphetext = CryptoJS.enc.Base64.stringify(ciphetext);
                    break;
                case "BitString":
                    ciphetext = CryptoJS.enc.Hex.stringify(ciphetext);
                    break;
            }
            $("#ciphetext").val(ciphetext);
        }
    </script>
    <style>
        h, div {
            margin: 10px 10px;
        }

        input[type=text] {
            width: 500px;
        }

        input[type=button] {
            margin: 0px 5px;
            padding: 10px;
        }

        select {
            width: 250px;
        }

        textarea {
            width: 500px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <h>MD5 加密解密</h>
        </div>
        <div>
            <label for="plaintext">明文：</label>
            <br />
            <textarea id="plaintext"></textarea>
        </div>
        <div>
            <label for="plaintext">显示格式：</label>
            <br />
            <select id="displayFormat">
                <option value="Base64String" selected="selected">Base64String</option>
                <option value="BitString">BitString</option>
            </select>
        </div>
        <div>
            <input type="button" value="加密" onclick="encryptor()" />
        </div>
        <div>
            <label for="ciphetext">密文：</label>
            <br />
            <textarea id="ciphetext" readonly="readonly" ></textarea>
        </div>
    </div>
</body>
</html>

View Code

HmacSha1 签名

var signtext = '这里是你的签名';
var converttext ='这里是正文，被签名的文本';

signtext =  CryptoJS.enc.Utf8.parse(signtext);//得到一个CryptoJS.lib.WordArray对象
converttext = CryptoJS.enc.Utf8.parse(converttext);//得到一个CryptoJS.lib.WordArray对象

var resulttext = CryptoJS.HmacSHA1(converttext, signtext); //得到一个CryptoJS.lib.WordArray对象，这就是你的签名

resulttext=resulttext.toString();//转成BitString格式

完整代码

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" type="text/javascript"></script>
    <title>HmacSha1 签名</title>

    <script type="text/javascript">
        $(function () {
            $("#buttonSign").bind("click", Sign);
            $("#buttonVerifySign").bind("click", VerifySign);
        });
    </script>
    <script type="text/javascript">
        function Sign() {
            var signtext = $("#signtext").val();
            var converttext = $("#converttext").val();

            signtext = GetWordArray(signtext);
            converttext = CryptoJS.enc.Utf8.parse(converttext);

            var resulttext = CryptoJS.HmacSHA1(converttext, signtext);
            resulttext = resulttext.concat(converttext);

            $("#resulttext").val(WrodArrayToString(resulttext));
        }

        function VerifySign() {
            var signtext = $("#signtext").val();
            var converttext = $("#converttext").val();

            signtext = GetWordArray(signtext);
            converttext = GetWordArray(converttext);

            var signtext1 = GetSign(converttext);
            var resulttext = GetCiphetext(converttext);
            var signtext2 = CryptoJS.HmacSHA1(resulttext, signtext)

            var b = WrodArrayToString(signtext1) == WrodArrayToString(signtext2);
            if (b) {
                $("#resulttext").val(CryptoJS.enc.Utf8.stringify(resulttext));
            } else {
                $("#resulttext").val("验证失败");
            }
        }

        function GetSign(wordArray) {
            var words = wordArray.words;
            var sigBytes = wordArray.sigBytes;
            words = words.slice(0, 5);
            return new CryptoJS.lib.WordArray.init(words, 20);
        }

        function GetCiphetext(wordArray) {
            var words = wordArray.words;
            var sigBytes = wordArray.sigBytes;
            words = words.slice(5, words.length);
            return new CryptoJS.lib.WordArray.init(words, sigBytes - 20);
        }

        /**
        function SplitWordArray(wordArray,startIndex,length){
            var words = wordArray.words;
            var sigBytes = wordArray.sigBytes;

            var hexChars = [];
            for (var i = 0; i < sigBytes; i++) {
                var bite = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff;
                hexChars.push((bite >>> 4).toString(16));
                hexChars.push((bite & 0x0f).toString(16));
            }
            hexChars=hexChars.slice(startIndex,startIndex+length);
            return new CryptoJS.lib.WordArray.init(hexChars, length);
        }
        **/


        function GetWordArray(value) {
            var displayFormat = $("#displayFormat").val();
            var wrodArray = {};
            switch (displayFormat) {
                case "Base64String":
                    wrodArray = CryptoJS.enc.Base64.parse(value);
                    break;
                case "BitString":
                    wrodArray = CryptoJS.enc.Hex.parse(value);
                    break;
            }
            return wrodArray;
        }

        function WrodArrayToString(wrodArray) {
            var displayFormat = $("#displayFormat").val();
            var value = "";
            switch (displayFormat) {
                case "Base64String":
                    value = CryptoJS.enc.Base64.stringify(wrodArray);
                    break;
                case "BitString":
                    value = CryptoJS.enc.Hex.stringify(wrodArray);
                    break;
            }
            return value;
        }

    </script>
    <style>
        h, div {
            margin: 10px 10px;
        }

        input[type=text] {
            width: 500px;
        }

        input[type=button] {
            margin: 0px 5px;
            padding: 10px;
        }

        select {
            width: 250px;
        }

        textarea {
            width: 500px;
            height: 150px;
        }
    </style>

</head>
<body>
    <div>
        <div>
            <h>HmacSha1 签名</h>
        </div>
        <div>
            <label for="signtext">签名</label>
            <br />
            <input type="text" id="signtext" />
        </div>
        <div>
            <label for="converttext">待处理文本：</label>
            <br />
            <textarea id="converttext"></textarea>
        </div>
        <div>
            <label for="displayFormat">编码格式：</label>
            <br />
            <select id="displayFormat">
                <option value="Base64String" selected="selected">Base64String</option>
                <option value="BitString">BitString</option>
            </select>
        </div>
        <div>
            <input type="button" value="签名" id="buttonSign" />
            <input type="button" value="验证" id="buttonVerifySign" />
        </div>
        <div>
            <label for="resulttext">结果：</label>
            <br />
            <textarea id="resulttext"></textarea>
        </div>
    </div>
</body>
</html>

View Code

AES加密

加密

//AES加密
//plaintextWordArray 明文，一个CryptoJS.lib.WordArray对象
//keyWordArray 秘钥，一个CryptoJS.lib.WordArray对象
//ivWordArray 偏移量，一个CryptoJS.lib.WordArray对象
//返回一个CryptoJS.lib.WordArray对象
function Encryptor(plaintextWordArray, keyWordArray, ivWordArray) {
    var encryptedData = undefined;
    //无偏移量加密
    if (ivWordArray == null || ivWordArray == undefined) {
        encryptedData = CryptoJS.AES.encrypt(plaintextWordArray, keyWordArray, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
    } else {
        //有偏移量加密
        encryptedData = CryptoJS.AES.encrypt(plaintextWordArray, keyWordArray, {
            iv: ivWordArray,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
    }
    if (encryptedData!=null&&encryptedData != undefined) {
        return encryptedData.ciphertext;
    }
    return undefined;
}

解密

// AES 解密
// ciphertextWordArray 密文，一个CryptoJS.lib.WordArray对象
// keyWordArray 秘钥，一个CryptoJS.lib.WordArray对象
// ivWordArray 偏移量，一个CryptoJS.lib.WordArray对象
// 返回一个CryptoJS.lib.WordArray对象
function Decryptor(ciphertextWordArray, keyWordArray, ivWordArray) {
    var decryptedData = undefined;

    //密文必须为Base64格式的字符串
    var ciphertext = ciphertextWordArray.toString(CryptoJS.enc.Base64);

    if (ivWordArray == null || ivWordArray == undefined) {
        decryptedData = CryptoJS.AES.decrypt(ciphertext, keyWordArray, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
    } else {
        decryptedData = CryptoJS.AES.decrypt(ciphertext, keyWordArray, {
            iv: ivWordArray,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
    }
    return decryptedData;
}

完整代码

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" type="text/javascript"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/aes.js" type="text/javascript"></script>-->
    <script type="text/javascript">
        //加密
        var key = CryptoJS.enc.Base64.parse('5C9ErX8g1qLYA298clMcumQ+V9d46hQXZmJCVb7ZRUw=');
        var plaintext = '中文什么的也认识？';
        plaintext = CryptoJS.enc.Utf8.parse(plaintext);
        var encryptedData = CryptoJS.AES.encrypt(plaintext, key, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });

        var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedData.ciphertext);
        console.log(encryptedBase64Str);

        //解密
        var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);
        console.log(decryptedStr);

    </script>

    <script type="text/javascript">
        Math.randomByMaxValue = function (maxValue) {
            return parseInt(Math.random() * maxValue, 10);
        }
    </script>

    <script type="text/javascript">

        $(function () {
            $("#buttonCreateKey").bind("click", function () {
                $("#Key").val(CreateKey());
            });
            $("#buttonCreateIv").bind("click", function () {
                $("#Iv").val(CreateIv());
            });
            $("#buttonEncryptor").bind("click", function () {
                var key = $("#Key").val();
                var iv = $("#Iv").val();
                var plaintext = $("#transferText").val();

                if (key.length == 0) {
                    showAlert("密钥不能为空！");
                    return;
                }

                var plaintextWordArray = CryptoJS.enc.Utf8.parse(plaintext);
                var keyWordArray = CryptoJS.enc.Utf8.parse(key);

                var encryptedData = undefined;
                if (iv.length > 0) {
                    var ivWordArray = CryptoJS.enc.Utf8.parse(iv);
                    encryptedData = Encryptor(plaintextWordArray, keyWordArray, ivWordArray);
                }
                else {
                    encryptedData = Encryptor(plaintextWordArray, keyWordArray, undefined);
                }
                if (encryptedData != null && encryptedData != undefined) {
                    $("#resultText").val(WordArrayToString(encryptedData));
                } else {
                    $("#resultText").val('加密失败！');
                }
            });
            $("#buttonDecryptor").bind("click", function () {
                var key = $("#Key").val();
                var iv = $("#Iv").val();
                var ciphertext = $("#transferText").val();

                if (key.length == 0) {
                    showAlert("密钥不能为空！");
                    return;
                }
                var keyWordArray = CryptoJS.enc.Utf8.parse(key);
                var ciphertextWordArray = GetWordArray(ciphertext);
                var decryptorData = undefined;
                if (iv.length > 0) {
                    var ivWordArray = CryptoJS.enc.Utf8.parse(iv);
                    decryptorData = Decryptor(ciphertextWordArray, keyWordArray, ivWordArray);
                }
                else {
                    decryptorData = Decryptor(ciphertextWordArray, keyWordArray, undefined);
                }
                if (decryptorData != null && decryptorData != undefined) {
                    $("#resultText").val(CryptoJS.enc.Utf8.stringify(decryptorData));
                } else {
                    $("#resultText").val('解密失败！');
                }
            });
        });

    </script>

    <script type="text/javascript">
        function GetWordArray(value) {
            var displayFormat = $("#displayFormat").val();
            var WordArray = {};
            switch (displayFormat) {
                case "Base64String":
                    WordArray = CryptoJS.enc.Base64.parse(value);
                    break;
                case "BitString":
                    WordArray = CryptoJS.enc.Hex.parse(value);
                    break;
            }
            return WordArray;
        }

        function WordArrayToString(wordArray) {
            var displayFormat = $("#displayFormat").val();
            var value = "";
            switch (displayFormat) {
                case "Base64String":
                    value = CryptoJS.enc.Base64.stringify(wordArray);
                    break;
                case "BitString":
                    value = CryptoJS.enc.Hex.stringify(wordArray);
                    break;
            }
            return value;
        }

        var constStr='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

        function CreateKey() {
            var a = '';
            for (var i = 0; i < 32; i++) {
                a += constStr[Math.randomByMaxValue(constStr.length)];
            }
            return a;
        }

        function CreateIv() {
            var a = '';
            for (var i = 0; i < 32; i++) {
                a += constStr[Math.randomByMaxValue(constStr.length)];
            }
            return a;
        }

        function Encryptor(plaintextWordArray, keyWordArray, ivWordArray) {
            var encryptedData = undefined;
            if (ivWordArray == null || ivWordArray == undefined) {
                encryptedData = CryptoJS.AES.encrypt(plaintextWordArray, keyWordArray, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                });
            } else {
                encryptedData = CryptoJS.AES.encrypt(plaintextWordArray, keyWordArray, {
                    iv: ivWordArray,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
            }
            if (encryptedData!=null&&encryptedData != undefined) {
                return encryptedData.ciphertext;
            }
            return undefined;
        }
        
        function Decryptor(ciphertextWordArray, keyWordArray, ivWordArray) {
            var decryptedData = undefined;

            //密文必须为Base64格式的字符串
            var ciphertext = ciphertextWordArray.toString(CryptoJS.enc.Base64);

            if (ivWordArray == null || ivWordArray == undefined) {
                decryptedData = CryptoJS.AES.decrypt(ciphertext, keyWordArray, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                });
            } else {
                decryptedData = CryptoJS.AES.decrypt(ciphertext, keyWordArray, {
                    iv: ivWordArray,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
            }
            return decryptedData;
        }

        function showAlert(message) {
            alert(message);
        }
    </script>
    <style>
        h, div {
            margin: 10px 10px;
        }

        input[type=text] {
            width: 500px;
        }

        input[type=button] {
            margin: 0px 5px;
            padding: 10px;
        }

        select {
            width: 250px;
        }

        textarea {
            width: 500px;
            height: 150px;
        }
    </style>
</head>
    <body>
        <div>
            <h>AES 加密解密</h>
            <div>
                <label for="Key">秘钥：</label>
                <br />
                <input type="text" id="Key" />
            </div>
            <div>
                <label for="Iv">偏移量：</label>
                <br />
                <input type="text" id="Iv" />
            </div>
            <div>
                <label for="displayFormat">显示格式：</label>
                <br />
                <select id="displayFormat">
                    <option value="Base64String" selected="selected">Base64String</option>
                    <option value="BitString">BitString</option>
                </select>
            </div>
            <div>
                <label for="transferText">待处理文本：</label>
                <br />
                <textarea id="transferText"></textarea>
            </div>
            <div>
                <input type="button" value="创建秘钥" id="buttonCreateKey" />
                <input type="button" value="创建偏移量" id="buttonCreateIv" />
                <input type="button" value="加密" id="buttonEncryptor" />
                <input type="button" value="解密" id="buttonDecryptor" />
            </div>
            <div>
                <label for="resultText">结果：</label>
                <br />
                <textarea id="resultText" readonly="readonly"></textarea>
            </div>
        </div>
    </body>
</html>

View Code

posted @ 2018-06-27 14:23 $("#阿飞") 阅读(3127) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

公告

昵称： $("#阿飞")
园龄： 8年6个月
粉丝： 2
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

$("#阿飞")

Js加密算法

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论