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

#php #js #前端 #加密 #解密

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

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; 
}

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

声明:本站部分图片或文章内容来源于网络,版权归原作者所有,如有侵权,请与我联系删除。


文章来源: https://www.cnblogs.com/wish123/p/17262633.html