本文涉及到的内容有：前端使用CryptoJS对数据进行DES或AES加密解密；
后端使用PHP openssl对数据进行解密和加密。
前端AES加密数据
首先在vue环境下安装crypto-js，crypto-js项目地址：/brix/crypto-js。npminstallcrypto-js--save
在需要调用的组件中引入crypto-js:importCryptoJSfrom'crypto-js'
我们在本站文章：《WEB开发中常见的加密方式有哪些》中了解到AES和DES属于对称加密，加密和解密使用同一个密钥，那么在本文中我们就要前端和后端约定一个密钥，我们在本文的例子中假定约定密钥key=1234567890123456，AES-ECB模式加密，Pkcs7填充方式。//AES加密
encryptByAES(string,key){
letckey=CryptoJS.enc.Utf8.parse(key);
letencrypted=CryptoJS.AES.encrypt(string,ckey,{
mode:CryptoJS.mode.ECB,
padding:CryptoJS.pad.Pkcs7
});
//returnencrypted.toString();//此方式返回base64格式密文
returnencrypted.ciphertext.toString();//返回hex格式的密文
}
现在我们要对数据admin进行AES加密：letresult=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){
letKeyHex=CryptoJS.enc.Utf8.parse(key);
letencrypted=CryptoJS.DES.encrypt(string,
KeyHex,{
mode:CryptoJS.mode.CBC,//ecb模式不需要偏移量
padding:CryptoJS.pad.Pkcs7,
iv:CryptoJS.enc.Utf8.parse(ivstr)
});
//lethexstr=encrypted.toString();//此方式返回base64
lethexstr=encrypted.ciphertext.toString()//返回hex格式的密文
returnhexstr;
}
本文例子中，我们约定密钥key=1234567890123456，偏移量iv=123456。现在前端调用DES加密方法：letresult=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){
letckey=CryptoJS.enc.Utf8.parse(key);
letciphertext=CryptoJS.enc.Hex.parse(string);
letsrcs=CryptoJS.enc.Base64.stringify(ciphertext);
letdecrypt=CryptoJS.AES.decrypt(srcs,ckey,{
mode:CryptoJS.mode.ECB,
padding:CryptoJS.pad.Pkcs7
});
letdecrypted=decrypt.toString(CryptoJS.enc.Utf8);
console.log(decrypted);
//returndecrypted.toString();
returndecrypted.toString(CryptoJS.enc.Utf8);
},
//DES解密
decryptByDES(ciphertext,key,ivstr){
letkeyHex=CryptoJS.enc.Utf8.parse(key);
letdecrypted=CryptoJS.DES.decrypt({
ciphertext:CryptoJS.enc.Hex.parse(ciphertext)
},keyHex,{
iv:CryptoJS.enc.Utf8.parse(ivstr),
mode:CryptoJS.mode.CBC,
padding:CryptoJS.pad.Pkcs7
});
returndecrypted.toString(CryptoJS.enc.Utf8);
}
对于AES和DES加密看起来简单，但他们内部原理相当复杂，而且有很多种模式加密，这里就不深入探讨了。无论是前端加密，还是解密，因为对称加密涉及到密钥，在前端加密中密钥就会直接暴露出来，有心的人会很轻易拿到密钥，那么前端加密就没什么秘密了。所以笔者倾向于前端加密，后端再解密，再就是使用https协议部署web环境，真正的加密应用场景应该在接口对接验证数据时使用。
