采用HTTP访问的网站前端CryptoJS AES/DES加解密方法
今天我们来关注一下前端加密。有些项目涉及到比较多的敏感数据,开发者会要求前端对数据进行加密后再传输给后端解密处理。虽然https其实对数据传输已经起了很大的安全保护作用,但是对于不使用https的用户,前端加密还是有一定的意义。
前端AES加密数据
首先在vue环境下安装crypto-js,crypto-js项目地址:https://github.com/brix/crypto-js。
npm install crypto-js --save
在需要调用的组件中引入crypto-js:
import CryptoJS from 'crypto-js'
AES和DES属于对称加密,加密和解密使用同一个密钥,那么在本文中我们就要前端和后端约定一个密钥,我们在本文的例子中假定约定密钥key=1234567890123456,AES-ECB模式加密,Pkcs7填充方式。
//AES加密 encryptByAES(string, key) { let ckey = CryptoJS.enc.Utf8.parse(key); let encrypted = CryptoJS.AES.encrypt(string, ckey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); //return encrypted.toString(); //此方式返回base64格式密文 return encrypted.ciphertext.toString(); // 返回hex格式的密文 }
现在我们要对数据admin进行AES加密:
let result = this.encryptByAES('admin', key); console.log(result); //输出7ae2d4a63d1c3e1a187a1fd89f471ef5
可以看到最后加密后得到的密文是16进制的字符串,初看结果有点像md5加密,是不是?
后端AES解密数据
前端加密后的数据,通过post或其他方式传递给后端PHP,PHP进行AES解密非常简单,使用函数openssl_decrypt()即可解决。
$mes = hex2bin($message); $res = openssl_decrypt($mes, 'AES-128-ECB', $key, OPENSSL_RAW_DATA); echo $res; //输出admin
使用和前端一致的key,将密文进行hex2bin转换,如果是base64格式的密文就不用这一步了,然后进行解密。不出意外的话最后输出解密后的结果是:admin。
前端DES加密数据
同样DES加密解密也需要约定一个相同的key,另外DES加密还需要约定一个iv(编译量),DES-CBC模式加密,Pkcs7填充方式。
encryptByDES(string, key, ivstr) { let KeyHex = CryptoJS.enc.Utf8.parse(key); let encrypted = CryptoJS.DES.encrypt(string, KeyHex, { mode: CryptoJS.mode.CBC, // ecb模式不需要偏移量 padding: CryptoJS.pad.Pkcs7, iv: CryptoJS.enc.Utf8.parse(ivstr) }); // let hexstr = encrypted.toString(); // 此方式返回base64 let hexstr = encrypted.ciphertext.toString() // 返回hex格式的密文 return hexstr; }
本文例子中,我们约定密钥key=1234567890123456,偏移量iv=123456。现在前端调用DES加密方法:
let result = this.encryptByDES('admin', key, iv); console.log(result); //输出2ba086ec85d01afe
后端DES解密数据
PHP使用openssl_decrypt()对数据进行解密:
$mes = hex2bin($message); $res = openssl_decrypt($mes, 'DES-CBC', $key, OPENSSL_RAW_DATA, $iv); echo $res; //输出admin
很显然,先要对加密的数据进行hex2bin()转换,然后直接解密,就是这样简单。对前端加密后的结果进行解密后得到结果是:admin。
后端AES/DES加密,前端解密
有时候也有反过来做的,后端返回给前端的数据是进行AES/DES加密过的,那么前端就需要对密文进行AES/DES解密了。这里将代码直接亮出来,更多代码请下载本文DEMO源码查看。
<?php $key = '1234567890123456'; //密钥,前后端双方事先约定好 $iv = '12345678'; //偏移量,前后端双方事先约定好,ecb模式不需要此参数 //AES加密 $aes = openssl_encrypt($message, 'AES-128-ECB', $key, OPENSSL_RAW_DATA); $rs = bin2hex($aes); //DES加密 $des = openssl_encrypt($message, 'DES-CBC', $key, OPENSSL_RAW_DATA, $iv); $rs = bin2hex($des);
前端对应的解密方法:
//AES解密 decryptByAES(string, key) { let ckey = CryptoJS.enc.Utf8.parse(key); let ciphertext = CryptoJS.enc.Hex.parse(string); let srcs = CryptoJS.enc.Base64.stringify(ciphertext); let decrypt = CryptoJS.AES.decrypt(srcs, ckey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); let decrypted = decrypt.toString(CryptoJS.enc.Utf8); console.log(decrypted); //return decrypted.toString(); return decrypted.toString(CryptoJS.enc.Utf8); }, //DES解密 decryptByDES(ciphertext, key, ivstr) { let keyHex = CryptoJS.enc.Utf8.parse(key); let decrypted = CryptoJS.DES.decrypt({ ciphertext: CryptoJS.enc.Hex.parse(ciphertext) }, keyHex, { iv: CryptoJS.enc.Utf8.parse(ivstr), mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return decrypted.toString(CryptoJS.enc.Utf8); }
对于AES和DES加密看起来简单,但他们内部原理相当复杂,而且有很多种模式加密,这里就不深入探讨了。无论是前端加密,还是解密,因为对称加密涉及到密钥,在前端加密中密钥就会直接暴露出来,有心的人会很轻易拿到密钥,那么前端加密就没什么秘密了。所以笔者倾向于前端加密,后端再解密,再就是使用https协议部署web环境,真正的加密应用场景应该在接口对接验证数据时使用。
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 采用HTTP访问的网站前端CryptoJS AES/DES加解密方法
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。