使用js对form表单base64加密

Posted 2020-10-15 jjkang

利用js可以对前台数据加密，以防止被恶意获取，以下代码，用base64对数据进行加密，可以在后台进行解密。

引入的js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.base64.js"></script>

　　

html中的数据

 姓名：<input type="text" id="name"  ><br/>
 密码：<input type="password" id="password" ><br/>
<button onclick="submitData()">提交</button>

js处理

<script>
    function submitData(){
        
        var obj = new Object();
        obj.name = $(‘#name‘).val();
        obj.password= $(‘#password‘).val();
        
        //转换为json之后加密
        var str = $.base64.encode(JSON.stringify(obj));


        $.post("你的url地址", 
        { 
            data: str 
        },
           function(data){
             console.log(data);
           });
    }

    //扩展base64，支持中文
    jQuery.base64 = (function($) {

        // private property
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

        // private method for UTF-8 encoding
        function utf8Encode(string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";
            for (var n = 0; n < string.length; n++) {
                var c = string.charCodeAt(n);
                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
            }
            return utftext;
        }

        function encode(input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = utf8Encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output +
                    keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) + keyStr.charAt(enc4);
            }
            return output;
        }

        return {
            encode: function (str) {
                return encode(str);
            }
        };

    }(jQuery));
    
</script>