- 用到的库:CryptoJS 官方地址:https://github.com/sytelus/CryptoJS
引入 js 文件
<script src="static/plugins/aes/aes.js"></script>
<!-- 加密时需引入 pad-zeropadding.js -->
<script src="static/plugins/aes/pad-zeropadding-min.js"></script>
form 表单:
<form action="#" method="post" id="loginForm" >
用户名:<input type="text" name="username"><br>
密 码:<input type="password" name="pazzword" id="pazzword"><br>
<button type="button" onclick="checkForm()">提交</button>
</form>
js:
<script type="text/javascript">
function checkForm(){
var key = "0000000671595991";
var iv = "tdrdadq59tbss5n7";
var pazzword = $("#pazzword").val();
// aes 加密
pazzword = encrypt(pazzword,key,iv);
$("#pazzword").val(pazzword);
if(pazzword.length == 24){
alert(pazzword + "解密后:" + decrypt(pazzword,key,iv));
$("#loginForm").submit();
}
}
// 加密
function encrypt(data,key,iv) { //key,iv:16位的字符串
var key1 = CryptoJS.enc.Latin1.parse(key);
var iv1 = CryptoJS.enc.Latin1.parse(iv);
return CryptoJS.AES.encrypt(data, key1,{
iv : iv1,
mode : CryptoJS.mode.CBC,
padding : CryptoJS.pad.ZeroPadding
}).toString();
}
// 解密
function decrypt(data,key,iv){ //key,iv:16位的字符串
var key1 = CryptoJS.enc.Latin1.parse(key);
var iv1 = CryptoJS.enc.Latin1.parse(iv);
var decrypted=CryptoJS.AES.decrypt(data,key1,{
iv : iv1,
mode : CryptoJS.mode.CBC,
padding : CryptoJS.pad.ZeroPadding
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
</script>
解释一下代码:
- 我们加密的模式选的是CBC的,然后填充模式是填充0,这个是前后台约定的,请谨慎。key 和 iv 初始化向量是16位长度的字符串(事前约定)。这两个东西不懂的话,看看AES加密的条件。
- 要注意的是,在加密完成后的字符串是经过Base64加密的,也就是说,后台解密模块必须要求考虑字符编码问题,这个由项目实际来决定。可以把他先转出UTF8的然后再传递给后台。我这里后台是介绍Base64加密后的,所以就不用转码了。
- 解密之后要转成UTF8喔,如果后台给的数据是JSON的话,要用
JSON.parse()
一下才能用。