前端web加密_前端输入密码加密

1，前端web加密算法--使用js函数escape()和unescape();操作对象字符串；

document.write(escape("Visit W3School!") )

var code=unescape("%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B");  
eval(code)  

escape()方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。因为该方法本质就是将非ASCLL码字符替换

unescape()，将ASCLL码解码转换成字符串；

2，前端web加密算法--MD5加密

md5加密很简单，在js中导入MD5.js。然后在js脚本中编写

	var b =$("#logPassword");$.md5(b.val());

但是MD5没有解密算法，或者说解密算法很复杂。所以我们在数据库中存放的密码可能是经过两次MD5加密的字符串

3，base64加密解密

base64既可以加密也可以解密，导入base64.js然后在js脚本中

var b =$("#logPassword");var code = $.encode64(b.val());$.unencode64(code);

===============================================================

加密分为单向和双向。单向是不可逆的，这边加密，那边无法解密；双向加密就是可逆的，这边加密，那边解密后跟数据库里的密码比对。由于加密算法需要发送到浏览器端来执行，因此双向加密对于http的client端来说不可行，最好的办法是单向加密，单向加密最常用的就是做MD5散列。

==============================================================================

密码存储的方式：

密码该如何存储呢？按照安全性由低到高，有这样几种选择：

1.密码名文直接存储在系统中

2.密码经过对称加密后再存储

3.密码经过非对称加密后再存储

===================================================================================

md5加服务器随机数加密

MD5传过去，服务器端把数据库里的密码做MD5后两相比对，等于还是拿POST过去的串原样比对。那我截获MD5串以后，原样POST给server端，不是一样能通过验证？我说，我们可以加点盐（salt），就是在做MD5之前给密码原文加上某个字符串后再做MD5运算。要点在于，这个salt，是每次提交之前跟服务器端实时申请的，而且会在很短的时间内自动过期（因为申请和验证之间的时间间隔只是两次连续http请求的时间，所以这个过期时间可以很短），这个salt只用一次，验证之后无论成功与否都会在服务器端强制作废。这样的话，截获任何一次MD5加密串，都无法用于另一次登录验证。

=======================================================================================

小结：最简单的加密是明文直接加字符串，然后在服务器端去除字符串解密；

最可靠的加密是前端jsmd5+salt加密（非对称加密）

实现

1，没有name的表单不会提交，这样避免密码由用户输入的密码，变成32位"*", 给客户看到

<form action="" method="post" class="form-inline" id="from-test" οnsubmit="return checkInput()">
    <input type="text" id="username" name="username"> 姓名 <br>
    <input type="password" id="password"> 密码 <br>
    <input type="hidden" id="password_md5" name="password">
    <button type="submit">Submit</button>
</form>

function checkInput() {
    var password_input = document.getElementById('password');
    var password_md5 = document.getElementById('password_md5');

    // set password
    password_md5.value =  md5(password_input.value);
    return true;
}

2，使用ajax异步，对表单进行验证

1. //单击登录  
2.         $('#btn a').click(function () {  
3.             if (!$('#loginName').validatebox('isValid')) {  
4.                 $('#loginName').focus();  
5.             } else if (!$('#password').validatebox('isValid')) {  
6.                 $('#password').focus();  
7.             } else {  
8.                 //md5加密传输  
9.                 var salt="{*nbsjt*asar#cdxd#}";  
10.                 var pwd=$('#password').val();  
11.                 var md5Pwd=$.md5(pwd+salt);  
12.                 $.ajax({  
13.                     url:'login.manager',  
14.                     type:'post',  
15.                     data:{  
16.                         loginName:$('#loginName').val(),  
17.                         password:md5Pwd,  
18.                     },  
19.                     beforeSend:function(){  
20.                         $.messager.progress({  
21.                             text:'正在登录中......',  
22.                         });   
23.                     },  
24.                     success:function(data,response,status){  
25.                         $.messager.progress('close');  
26.                           
27.                         if(data=="success"){  
28.                             location.href = 'main.manager';//进入后台首页  
29.                         }else{  
30.                             $.messager.alert('登录失败！', '用户名或密码错误！', 'warning', function () {  
31.                                 $('#password').select();  
32.                             });  
33.                         }  
34.                     }  
35.                 });  
36.             }  
37.         });