react使用AES对称加密的实现
- 前言
- 使用CryptoJS库
- 密钥存放
- 加密方法
- 解密方法
- 结语
前言
项目中要求敏感信息怕被抓包泄密必须进行加密传输处理,普通的md5加密虽然能解决传输问题,但是项目中有权限的用户是需要查看数据进行查询的,所以就不能直接使用md5加密,于是就想到了使用AES对称加密
使用CryptoJS库
引入:
npm i CryptoJS
密钥存放
这里密钥的存放考虑到安全原因,如果在接口中可能会被抓取,在考虑实际使用情况后使用了前端环境变量存放
的方法,密钥作为前端应用的环境变量进行配置。在打包或部署前端应用时,可以将密钥配置为环境变量,并在应用运行时通过环境变量读取密钥。这样可以将密钥从源代码中分离出来,避免意外泄露。
在项目根目录下面创建.env
文件
写入代码
REACT_APP_API_KEY = "后端给的密匙"
加密方法
// 加密
export const encryptionTxt = (plaintext) => {if (!plaintext) { // 空值判断, 避免空值阻塞代码return ''}if (typeof plaintext !== 'string') {// 加密内容必须为字符串plaintext = String(plaintext)}// 从环境变量中拿密匙const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 使用AES加密 (ECB模式)const encrypted = CryptoJS.AES.encrypt(plaintext, key, {mode: CryptoJS.mode.ECB, // ECB加密模式padding: CryptoJS.pad.Pkcs7, // 填充方式,常用Pkcs7})// 将加密后的数据转换为16进制字符串const encryptedHexStr = encrypted.ciphertext.toString(CryptoJS.enc.Hex)// 打印加密后的16进制字符串return encryptedHexStr
}
解密方法
// 解密
export const decryptText = (encryptedHexStr) => {if (!encryptedHexStr) {return ''}// 密钥 (需与加密时保持一致)const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 将16进制字符串转换为二进制格式const encryptedData = CryptoJS.enc.Hex.parse(encryptedHexStr)// 使用AES ECB模式进行解密const decrypted = CryptoJS.AES.decrypt({ ciphertext: encryptedData }, // 数据格式应为CryptoJS的ciphertext格式key,{mode: CryptoJS.mode.ECB, // ECB模式padding: CryptoJS.pad.Pkcs7, // 填充方式})// 转换解密后的数据为UTF-8字符串const decryptedText = decrypted.toString(CryptoJS.enc.Utf8)return decryptedText
}
结语
方法可以丢在工具目录下方便在页面中调用使用,我这个是在项目完成后才说加的功能,我就直接丢在until里面,然后在接口哪里把要传的值加密,页面里也是直接调用解密方法把加密的信息正常显示出来,对于保存密钥
这个争议挺大的,放后端先使用公钥登录,获取权限后再发私钥也是一种方法,但是后端觉得只要在请求里其实就不安全,权衡之下使用的前端环境变量存放
,前端环境变量存储的话如果用了git管理的,就把.env文件注释
了,就别传到远端去了,这个是个小项目,其实加密不加密意义都不大,不知道做那种银行机密的码友们又是怎么处理的,可以在评论区讨论下,文中有啥不对的地方欢迎指正