前端用crypto-js来进行加密，php使用openssl_encrypt来进行解密

项目有个需求，需要对前端提交的密码进行加密传输，防止请求被拦截导致密码的泄露。

1、考虑到性能问题，不好太过的占用浏览器资源，我就直接采用了对称加密的方式（aes）来进行处理；

2、首先来看看前端加密的情况，我采用的是crypto-js来进行加密的，附上链接https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js

3、前端加密

// 需要加密的数据
let data = '123456';
// 我采用的是16位的key，为了方便我前端就把key转成UTF8
let key = CryptoJS.enc.Utf8.parse('GftZqNEoBVdB2kwx'); 

// iv采用的是16位的，同样为了方便转成UTF8
let iv = CryptoJS.enc.Utf8.parse('3zyJFPEzh5rUeUNi'); 

// 加密方式使用CBC，padding偏移量设置成Pkcs7，以便和后端对应解密
let encryptData = CryptoJS.AES.encrypt(data, key, {
                            mode: CryptoJS.mode.CBC,
                            iv: iv,
                            padding: CryptoJS.pad.Pkcs7
                        });
// 这样加密就完成啦，打印下加密后的数据
console.log(encryptData.toString());

4、另附上前端解密

// 需要加密的数据
let encryptData = 'gb+0Jn9uhOmw21cDeTQRiQ==';

// 我采用的是16位的key，为了方便我前端就把key转成UTF8
let key = CryptoJS.enc.Utf8.parse('GftZqNEoBVdB2kwx'); 

// iv采用的是16位的，同样为了方便转成UTF8
let iv = CryptoJS.enc.Utf8.parse('3zyJFPEzh5rUeUNi'); 

// 加密方式使用CBC，padding偏移量设置成Pkcs7，以便和后端对应解密
let encryptData = CryptoJS.AES.decrypt(encryptData, key, {
                            mode: CryptoJS.mode.CBC,
                            iv: iv,
                            padding: CryptoJS.pad.Pkcs7
                        });
// 这样解密就完成啦，打印下解密后的数据；记得讲解密会的数据也转成UTF8
console.log(encryptData.toString(CryptoJS.enc.Utf8));

5、php服务端解密

function aesDecrypt($data) {
        // 密钥key要和前端一致，由于前端转成了UTF8的格式，这边就可以直接使用了
        $cryptKey = 'GftZqNEoBVdB2kwx';
// iv也是一样要和前端一致
        $iv = '3zyJFPEzh5rUeUNi';
// 然后使用openssl_decrypt来进行解密
        $decrypt = openssl_decrypt($data, 'AES-128-CBC', $cryptKey, 0, $iv);
        return $decrypt;
}    

6、附上php服务端加密代码

function aesEncrypt($data) {
 $cryptKey = 'GftZqNEoBVdB2kwx';
$iv = '3zyJFPEzh5rUeUNi';
$encrypt = openssl_encrypt($data, 'AES-128-CBC', $cryptKey, 0, $iv);
return $encrypt;  
}

至此完成了，对前端密码的加密传输，主要麻烦的地方在于前后端的语言不同，需要找对前后端加密方式的匹配，不然前端加密之后，后端会加密不出来。