利用crypto-js实现静态网页数据加密

crypto-js是什么#

使用crypto-js也是很久之前的事了，一直都没有好好整理，今天借助博客重构的机会，好好捋一下。crypto-js是一个加密算法库，支持哈希算法，如：MD5、SHA-1、SHA-2、SHA-3、RIPEMD-160也支持多种加密方式，如：AES、DES, Triple DES、Rabbit、RC4, RC4Drop。可实现多种多样的加密算法。

使用#

在github.com/brix/crypto-js 上引入相关文件，因为我只需要使用aes加密算法，所以没有引入整个库而是只下载了aes.js单个文件。借助强大的crypto-js，我们只需要几行代码就可以实现加密效果，下面是一个使用aes加密的demo，效果为在页面加密字符串“123456”，并解密加密的密文。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>Title</title>
7
    <script src="./aes.js"></script>
8
</head>
9

10
<body>
11
    <script>
12
        //aes加密
13
        function encrypt(word) {
14
            var key = CryptoJS.enc.Utf8.parse("1234560000000000"); //16位
15
            var iv = CryptoJS.enc.Utf8.parse("1234567890000000");
16
            var encrypted = '';
17
            if (typeof (word) == 'string') {
18
                var srcs = CryptoJS.enc.Utf8.parse(word);
19
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
20
                    iv: iv,
21
                    mode: CryptoJS.mode.CBC,
22
                    padding: CryptoJS.pad.Pkcs7
23
                });
24
            } else if (typeof (word) == 'object') { //对象格式的转成json字符串
25
                data = JSON.stringify(word);
26
                var srcs = CryptoJS.enc.Utf8.parse(data);
27
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
28
                    iv: iv,
29
                    mode: CryptoJS.mode.CBC,
30
                    padding: CryptoJS.pad.Pkcs7
31
                })
32
            }
33
            return encrypted.ciphertext.toString();
34
        }
35
        // aes解密
36
        function decrypt(word) {
37
            var key = CryptoJS.enc.Utf8.parse("1234560000000000");
38
            var iv = CryptoJS.enc.Utf8.parse("1234567890000000");
39
            var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
40
            var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
41
            var decrypt = CryptoJS.AES.decrypt(srcs, key, {
42
                iv: iv,
43
                mode: CryptoJS.mode.CBC,
44
                padding: CryptoJS.pad.Pkcs7
45
            });
46
            var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
47
            return decryptedStr.toString();
48
        }
49
    </script>
50
    <script>
51
        var str = "123456";
52
        var encrypted = encrypt(str);
53
        var decrypt1 = decrypt(encrypted.toString());
54
        document.writeln("aes cbc 加密 解密");
55
        document.writeln("<br/>");
56
        document.writeln("待加密：" + str);
57
        document.writeln("<br/>");
58
        document.writeln("加密的密文:".concat(encrypted));
59
        document.writeln("<br/>");
60
        document.writeln("解密密文的结果:" + decrypt1);
61
    </script>
62
</body>
63

64
</html>

代码效果如下图

其他应用#

借助crypto-js还可以实现一些很好玩的加密，例如静态页面文章的加密。出于某种原因我的文章“造谣人士生平事”之前就使用了这种加密方式。判断文章标题是“加密”开头后，就引入aes.js文件

1
<script>
2

3
        var postTitleValue = document.querySelector(".post-title").innerHTML.trim();
4
        if (postTitleValue.slice(0, 2) === "加密") {
5

6
            var oScript = document.createElement("script");
7
            oScript.src = "./aes.js";
8
            document.body.appendChild(oScript);
9
        }
10
    </script>

引入aes.js后添加密钥和密钥偏移量输入框，添加加密解密函数，添加点击事件。默认的密钥和密码偏移量都为”1234560000000000”，但是千万不要使用默认密码和密钥，最方便的做法是使用在线随机数生成工具生成随机密钥和随机密钥偏移量。

1
//aes加密
2
function encrypt(word, keyy, ivv) {
3
    var key = keyy ? CryptoJS.enc.Utf8.parse(keyy) : CryptoJS.enc.Utf8.parse("1234560000000000"); //16位
4
    var iv = ivv ? CryptoJS.enc.Utf8.parse(ivv) : CryptoJS.enc.Utf8.parse("1234567890000000");
5
    var encrypted = '';
6
    if (typeof (word) == 'string') {
7
        var srcs = CryptoJS.enc.Utf8.parse(word);
8
        encrypted = CryptoJS.AES.encrypt(srcs, key, {
9
            iv: iv,
10
            mode: CryptoJS.mode.CBC,
11
            padding: CryptoJS.pad.Pkcs7
12
        });
13
    } else if (typeof (word) == 'object') { //对象格式的转成json字符串
14
        data = JSON.stringify(word);
15
        var srcs = CryptoJS.enc.Utf8.parse(data);
16
        encrypted = CryptoJS.AES.encrypt(srcs, key, {
17
            iv: iv,
18
            mode: CryptoJS.mode.CBC,
19
            padding: CryptoJS.pad.Pkcs7
20
        })
21
    }
22
    return encrypted.ciphertext.toString();
23
}
24
// aes解密
25
function decrypt(word, keyy, ivv) {
26
    var key = keyy ? CryptoJS.enc.Utf8.parse(keyy) : CryptoJS.enc.Utf8.parse("1234560000000000");
27
    var iv = ivv ? CryptoJS.enc.Utf8.parse(ivv) : CryptoJS.enc.Utf8.parse("1234567890000000");
28
    var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
29
    var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
30
    var decrypt = CryptoJS.AES.decrypt(srcs, key, {
31
        iv: iv,
32
        mode: CryptoJS.mode.CBC,
33
        padding: CryptoJS.pad.Pkcs7
34
    });
35
    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
36
    return decryptedStr.toString();
37
}
38
var lock = document.createElement("div"),
39
    input = document.createElement("input"),
40
    inputIvv = document.createElement("input"),
41
    btn1 = document.createElement("button"),
42
    btn2 = document.createElement("button"),
43
    markdown = document.querySelector(".markdown-body");
44
    markdown.style.display="none"
45
lock.id = "lock";
46
input.id = "lock-input";
47
inputIvv.id = "lock-inputIvv";
48
input.type="password";
49
inputIvv.type="password";
50
btn1.id = "lock-btn1";
51
btn2.id = "lock-btn2";
52
btn1.innerHTML = "解密";
53
btn2.innerHTML = "加密";
54
document.body.appendChild(lock);
55
lock.appendChild(input);
56
lock.appendChild(inputIvv);
57
lock.appendChild(btn1);
58
lock.appendChild(btn2);
59

60
btn1.onclick = function () {
61
    var keyy = input.value;
62
    var ivv = inputIvv.value;
63
    var markdownValue = markdown.innerHTML.trim();
64
    //去除生成干扰，我的文章每次生成会自动包一层div，这一步是为了保证密文永不改变内容，你们不需要这一步
65
    var str = markdownValue.slice(3,-4);
66
    console.log(str);
67
    var decr = decrypt(str.toString(), keyy, ivv);
68
    markdown.innerHTML = decr.trim();
69
    markdown.style.display="block"
70
}
71
btn2.onclick = function () {
72
    var keyy = input.value;
73
    var ivv = inputIvv.value;
74
    var markdownValue = markdown.innerHTML.trim();
75
    var str = markdownValue;
76
    var decr = encrypt(str.toString(), keyy, ivv);
77
    markdown.innerHTML = decr.trim();
78
    markdown.style.display="block"
79
}

加密输入框的css，使用了页面压缩，看起来比较乱。

1
#lock{overflow:hidden;width:248px;position:absolute;left:50%;top:230px;margin-left:-100px}#lock-btn1,#lock-btn2{margin-left:31.5px;float:left;display:block;width:60px;height:20px;border-radius:20px;background-color:transparent;color:#000;-webkit-transition:all 150ms linear;-moz-transition:all 150ms linear;-o-transition:all 150ms linear;-ms-transition:all 150ms linear;transition:all 150ms linear;font-size:14px;font-weight:normal;text-align:center;border:1px solid #66615b}#lock-btn2{margin-left:61.5px}#lock-btn1:hover,#lock-btn2:hover{background-color:#66615b;color:rgba(255,255,255,0.7);border-color:#66615b}#lock-input,#lock-inputIvv{border-radius:20px;outline:0;padding:0 10px;width:100px;height:20px;background:transparent;color:#000;font-size:1.25em;float:left}#lock-input:hover,#lock-inputIvv:hover{background-color:#66615b;color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.7)}

每次需要发布加密的文章时，将文章标题命名为”加密.XXX“，页面就会出现加密解密框，首次发布请输入密钥和密钥偏移量点击加密，拿到密文。然后将文章内容改为密文。保存好你的密钥和密钥偏移量，以后查看加密文章时，输入密钥和密钥偏移量点击解密，即可看到原始的文章。代码效果如下两图

音乐

音乐

crypto-js是什么#

使用#

其他应用#

文章分享

评论区

音乐

目录