encrypt/index.html at master · time54/encrypt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <title>前端加密传输</title>
        <style>
            *{margin:0;padding: 0;}
            html,body,.wrap{
                width:100%;height:100%;
                font-size: 14px;
            }
            .wrap{
                padding: 30px;
                box-sizing: border-box;
            }
            .common{margin-bottom:20px;}
            .dec{
                display: inline-block;
                width: 21%;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="common">
                <span class="dec">明文：</span>
                <input type="text" class="clear_data" placeholder="请输入需要加密的原文"/>
            </div>
            <div class="common">
                    <p>第一步：客户端随机产生16位 aes key</p>
                    <span class="dec">aes key:</span>
                    <input class="aesKey" type="text" placeholder="随机产生16位密钥"/>
                    <button class="random">random</button>
            </div>
            <div class="common">
                    <span>第二步：使用rsa对aes公钥加密</span>&nbsp;&nbsp;&nbsp;<button class="rsa_encrypt">rsa加密</button>
                    <textarea rows="5" cols="50" class="encrypt_aesKey" placeholder="加密后的aes密钥"></textarea>
            </div>
            <div class="common">
                    <span>第三步：对重要信息进行aes加密</span>&nbsp;&nbsp;&nbsp;<button class="aes_encrypt">aes加密</button>
                    <textarea rows="5" cols="50" class="encrypt_data" placeholder="aes加密数据"></textarea>
            </div>
            <div class="common">
                    <span>第四步：客户端提交rsa加密后的aes密钥 + 敏感信息到服务器端</span>
                    <textarea rows="5" cols="50" class="encrypt_data2" placeholder="aes加密数据"></textarea>
                    <button class="submit">提交数据</button>
            </div>
        </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script src="rsa.js"></script>
        <script src="aes.js"></script>
        <script>
            /*1、随机产生16位aes密钥*/
            var aesKey = '';
            $('.random').click(function(){
                var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
                for(var i=0; i<16; i++){
                   var index = Math.round(Math.random()*35);
                   aesKey += chars[index];
                }
                $('.aesKey').val(aesKey);
            });
            /*2、rsa对aes公钥加密*/
            var rsa_publickey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB';
            var encrypted_aesKey = "";//aes加密后的aesKey
            $('.rsa_encrypt').click(function(){
                var aesKeyVal =  $('.aesKey').val();
                var encrypt = new JSEncrypt(); //定义rsa加密对象
                encrypt.setPublicKey(rsa_publickey);
                encrypted_aesKey = encrypt.encrypt(aesKeyVal);
                $('.encrypt_aesKey').val(encrypted_aesKey);
            });
            /*3、aes加密数据*/
            var encrypted = ''; //aes加密后的数据
            $('.aes_encrypt').click(function(){
                var clear_data =  $('.clear_data').val();
                var key = CryptoJS.enc.Utf8.parse(aesKey); // 秘钥
                var iv = CryptoJS.enc.Utf8.parse(aesKey); //向量iv
                 encrypted = CryptoJS.AES.encrypt(clear_data, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });
                $('.encrypt_data').val(encrypted.toString());
                var encrypt_data2 = encrypted_aesKey + "\n" + encrypted.toString();
                $('.encrypt_data2').val(encrypt_data2);
            });

            /*4、服务端对加密后的AES密钥进行RSA私钥解密，拿到aes密钥原文*/
            $('.submit').click(function(){
                $.ajax({
                    url: 'decode.php',
                    type: 'post',
                    data: {'aeskey':encrypted_aesKey,
                            'encrypted':encrypted
                    },
                    dataType: 'json',
                    timeout: 10000,
                    success: function(data){
                        console.log(data);
                    },
                    error: function(err){
                        console.log(err);
                    }
                });
            });
        </script>
    </body>
</html>