前端用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;  
}

至此完成了，对前端密码的加密传输；

主要麻烦的地方在于前后端的语言不同需要找对前后端加密方式的匹配，不然前端加密之后，后端会加密不出来