前端 crypto-js AES 加密和解密
对系统安全性要求比较高，那么需要选择https协议来传输数据。当然很多情况下一般的web网站，如果安全要求不是很高的话，用http协议就可以了。在这种情况下，密码的明文传输显然是不合适的，因为如果请求在传输过程中被截了，就可以直接拿明文密码登录网站了。
对于使用http协议的web前端的加密，只能防君子不能防小人。前端是完全暴露的，包括你的加密算法。 知道了加密算法，密码都是可以破解的，只是时间问题。所以加密是为了增加破解的时间成本，如果破解需要花费的时间让人难以接受，这也就达到了目的。
而为了保证数据库中存储的密码更安全，则需要在后端用多种单向（非对称）加密手段混合进行加密存储。前端加密后端又需要解密，所以需要对称加密算法，即前端使用 encrypted = encrypt(password+key)，后端使用 password = decrypt(encrypted +key) ，前端只传输密码与key加密后的字符串encrypted ，这样即使请求被拦截了，也知道了加密算法，但是由于缺少key所以很难破解出明文密码。所以这个key很关键。而这个key是由后端控制生成与销毁的，用完即失效，所以即使可以模拟用加密后的密码来发请求模拟登录，但是key已经失效了，后端还是验证不过的。
注意，如果本地环境本就是不安全的，key被知道了，那就瞬间就可以用解密算法破解出密码了。这里只是假设传输的过程中被截获的情形。所以前端加密是防不了小人的。如果真要防，可以将加密算法的js文件进行压缩加密，不断更新的手段来使js文件难以获取，让黑客难以获取加密算法。变态的google就是这么干的，自己实现一个js虚拟机，通过不断更新加密混淆js文件让加密算法难以获取。这样黑客不知道加密算法就无法破解了。
配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script>
function getAesString(data, key, iv) { //加密
var key = CryptoJS.enc.Utf8.parse(key);
var iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(data, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString(); //返回的是base64格式的密文
}
function getDAesString(encrypted, key, iv) { //解密
var key = CryptoJS.enc.Utf8.parse(key);
var iv = CryptoJS.enc.Utf8.parse(iv);
var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
function getAES(data) { //加密
var key = '12345678910Asdfx'; //密钥
var iv = '12345678910Asdfx';
var encrypted = getAesString(data, key, iv); //密文
var encrypted1 = CryptoJS.enc.Utf8.parse(encrypted);
return encrypted;
}
function getDAes(data) { //解密
var key = '12345678910Asdfx'; //密钥
var iv = '12345678910Asdfx'; //密钥偏移量
var decryptedStr = getDAesString(data, key, iv);
return decryptedStr;
}
var AES = getAES('hello');
var AFTERAES = getDAes(AES);
console.log('加密后:' + AES );
console.log('解密后:' + AFTERAES );
</script>
</body>
</html>