加密基础知识四 前端JS加密传输 crypto-js

时间：2024-04-15 12:21:56
一、使用HTTP简单加密

对系统安全性要求比较高，那么需要选择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文件让加密算法难以获取。这样黑客不知道加密算法就无法破解了。

二、GOOGLE的JS加密算法库crypto-js

去https://github.com/brix/crypto-js下载，develop和master下载稍有区别。以MD5测试为例，只引入md5.js(未压缩前为9K)会报错，需要先引入core.js(未压缩前为22K)。而在master分支下载的crypto-js，是所有加密算法合集(未压缩前为188K)，只需要引入这一个JS文件即可。

<head>
    <script type="text/javascript" src="core.js"></script>
    <script src="md5.js"></script>
</head>
<body>
</body>
<script>
var hash = CryptoJS.MD5("Message");
console.log("test:",hash.toString());
</script>

打印结果是test: 4c2a8fe7eaf24721cc7a9f0175115bd4，与网站上对照结果一致。

 
image.png

 

1.再来测试一下AES加密
参考CryptoJS 加密的使用方法

var encrypt = getAES("Message");
console.log("encrypt:",encrypt);
var decrypt = getDAes(encrypt);
console.log("decrypt:",decrypt);

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  = \'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\';  //密钥
    var iv   = \'1234567812345678\';
    var encrypted =getAesString(data,key,iv); //密文
    var encrypted1 =CryptoJS.enc.Utf8.parse(encrypted);
    return encrypted;
}

function getDAes(data){//解密
    var key  = \'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\';  //密钥
    var iv   = \'1234567812345678\';
    var decryptedStr =getDAesString(data,key,iv);
    return decryptedStr;
}

输出结果

encrypt: GtV+06AIR7HQ8Bm4pRHdGw==
decrypt: Message

key和iv我们都可以更换，但是需要保证的是加解密的key和vi保持一致

2.参考前端crypto-js AES加密 PHP后端解密

前端js

<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/pad-zeropadding.js"></script>
<script>
    var key_hash = CryptoJS.MD5("Message");
    var key = CryptoJS.enc.Utf8.parse(key_hash);
    var iv  = CryptoJS.enc.Utf8.parse(\'1234567812345678\');
    var encrypted = CryptoJS.AES.encrypt("Message", key, { iv: iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding});
    document.write("encode:"+encrypted);
</script>

php代码

<?php
$text = "Message";
$key = md5($text);  //key的长度必须16，32位,这里直接MD5一个长度为32位的key
$iv=\'1234567812345678\';
$crypttext = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $text, MCRYPT_MODE_CBC, $iv);
$decode = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $crypttext, MCRYPT_MODE_CBC, $iv);
echo base64_encode($crypttext);
echo "<br/>";
echo $decode;
echo "<br/>";
?>

3.实战
参考关于CryptoJS中md5加密以及aes加密的随笔
为什么 CryptoJS DES 加密的结果和 Java DES 不一样?
用的CBC模式，AES-128bit, Pkcs7补码方式（后台有可能是PKCS5Padding，是一样的），一开始后台设定的key是10位，他们都可以加密和解密，但是我用了就是不行，我觉得肯定是我没有处理好，但是最终实在没办法大家都改成16位，就对了，可以跟后台对上了



相关文章