Js加密算法

其他 2018-06-27 14:33:44 阅读次数: 2

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

重要知识点：

  1. CryptoJS.lib.WordArray  WordArray对象可以理解为byte[]
  2. 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;
}

完整代码

扫描二维码关注公众号，回复： 1772430 查看本文章 
<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

猜你喜欢

转载自www.cnblogs.com/shipengfei/p/9233727.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022