1 问题:
在使用uni-app开发前端项目,出于安全考虑 所有参数都进行了RSA加密传给后端
我采用得是RSA加密方法
代码如下:
import JSEncrypt from 'jsencrypt';
import {globalVariable} from "./global"
function encryptData(data) {
// 创建 JSEncrypt 实例,并指定公钥
const encryptor = new JSEncrypt();
encryptor.setPublicKey(globalVariable.publicKey);
// 对数据进行加密操作
const encrypted = encryptor.encrypt(data);
// 返回加密后的密文
return encrypted;
}
export default encryptData;
这个方法常规加密可以 ,当加密字符过长时 就出现问题了
这是我加密得内容 比较长
报错
报错原因
JSencrypt 中默认使用 PKCS #1 v1.5 填充方案进行加密,该方案要求加密时的数据长度不能超过密钥长度减去 11 字节。因此,如果要加密的明文长度过长,会导致加密失败并返回 false。可以考虑使用 OAEP 填充方案来进行加密,该方案支持更长的明文长度。返回false
解决方法:
第一种方法:
上网百度 说可以用RSA中得encryptlong解决
npm依赖包 encryptlong
修改后的代码:
const {JSEncrypt} = require('encryptlong')
let encryptedData = (data, key=PUBLIC_KEY) => {
let encryptor = new JSEncrypt()
encryptor.setPublicKey(key)
let cptData = encryptor.encryptLong(data)
return cptData
}
踩坑中 。。。。
结果:引入使用不了 后面发现这个方法只支持浏览器 不支持微信小程序 使用不了 后续会踩很多坑
。。。。。。
换一个方法:
第二种方法
OAEP 填充方案
安装crypto-js库
npm install crypto-js
- 引入所需模块
在uni-app项目中,你需要在需要使用OAEP加密的页面或组件中引入所需的模块:
javascript复制代码
import CryptoJS from 'crypto-js'; import { JSEncrypt } from 'jsencrypt';
可以使用npm命令来安装crypto-js库:
npm install crypto-js
- 引入所需模块
在uni-app项目中,你需要在需要使用OAEP加密的页面或组件中引入所需的模块:
javascript复制代码
import CryptoJS from 'crypto-js'; import { JSEncrypt } from 'jsencrypt';
这里我们使用Crypto-JS库提供的RSA和OAEP加密函数以及jsencrypt库提供的生成RSA密钥对和加密方法。
- 生成RSA密钥对
在使用OAEP填充方案进行加密时,需要首先生成RSA密钥对。可以使用jsencrypt库提供的JSEncrypt()
方法来生成RSA密钥对:
const encrypt = new JSEncrypt({ default_key_size: 2048 }); const publicKey = encrypt.getPublicKey(); const privateKey = encrypt.getPrivateKey();
这里我们生成了一个2048位的RSA密钥对,并将公钥和私钥保存到变量publicKey和privateKey中。
- 使用OAEP进行加密
在生成RSA密钥对后,就可以使用OAEP填充方案进行加密。可以使用Crypto-JS库提供的CryptoJS.enc.Utf8.parse()
方法将明文转换为UTF-8编码格式,然后使用encrypt()
方法对明文进行加密:
const ciphertext = CryptoJS.RSA.encrypt( CryptoJS.enc.Utf8.parse(plaintext), publicKey, { keySize: 2048 / 32, padding: CryptoJS.pad.OAEP } );
第三种方法:AES加密
上述方法过于繁琐了而且AES得逻辑都是一样用crypto-js加密
使用AES加密crypto-js加密
引入crypto-js
1.需要在uniapp项目根目录里,打开命令行,执行如下命令:
npm install crypto-js
2.在项目根目录,创建一个utils文件夹,并创建一个aes_endecrypt.js文件
/**
* 工具类
*/
import Vue from 'vue'
import CryptoJS from 'crypto-js'
let keyStr = "abcde123456";//加密密钥
let ivStr = "yyuuide45678";//矢量
//加密
export function aes_encrypt(word){
keyStr = keyStr ? keyStr : 'hfhfuu8dolv98bt6';
var key = CryptoJS.enc.Utf8.parse(keyStr);
var iv = CryptoJS.enc.Utf8.parse(ivStr);
// var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(word, key, {
iv:iv,
mode:CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
}
//解密
export function aes_decrypt(word){
keyStr = keyStr ? keyStr : 'hfhfuu8dolv98bt6';
var key = CryptoJS.enc.Utf8.parse(keyStr);//
var iv = CryptoJS.enc.Utf8.parse(ivStr);
// const restoreBase64 = word.replace(/\-/g,'+').replace(/_/g,'/');
var restoreBase64=word.replace(/[\r\n]/g,'');
var decrypt = CryptoJS.AES.decrypt(restoreBase64, key, {
iv:iv,
mode:CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
3.在main.js文件中,引入方法,并注册为全局方法
import { aes_encrypt, aes_decrypt } from '@/utils/aes_endecrypt.js';
Vue.prototype.aes_encrypt = aes_encrypt;
Vue.prototype.aes_decrypt = aes_decrypt;
4.在页面中使用aes加密,解密
var encrypt = this.aes_encrypt('123456')
console.log('===encrypt===',encrypt);
var decrypt = this.aes_decrypt(encrypt)
console.log('===decrypt===',decrypt);
最后我选择得最简单得方法:
二、第二种方式:直接引入插件
1.在dcloud插件市场中搜索-传输加密,AES对称加密
2.项目main.js文件中,注册全局组件
import AES from '@/js_sdk/ar-aes/ar-aes.js'
Vue.prototype.AES = AES.AES
3. 在页面中使用
//加密值
var e = this.AES.encrypt(['加密内容','key','iv')
//AES解密
//解密值
var d = this.AES.decrypt('解密内容','key','iv')
今天一天得坑就踩到这咯.....