前端实现rsa加密功能

本文将从web和小程序两个端来实现rsa的加密功能。
一般项目的登录密码、身份证号以及一些用户敏感信息等在传输的时候需要使用加密传输，一般来说，前端只会得到后端给的公钥，而rsa加密，可以用公钥加密，也可以用私钥加密，即可以用一个公钥进行加密，也可以去解密后端经过私钥加密的数据，在我的项目中，我只需要把用户输入的信息进行加密传输给后端，所以只需要使用到公钥（这个公钥后端会提供）

1.web端使用rsa加密

首先安装项目所需要的包

安装jsencrypt

npm install jsencrypt --save-dev

安装encryptlong

npm install encryptlong --save-dev

创建rsa.js文件
在项目的根目录的src文件下创建utils文件夹，创建rsa.js文件

在这里插入图片描述
4 引入并封装加密方法

/* 引入JSEncrypt实现数据RSA加密 */
import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 JSEncrypt.js Message too long for RSA
/* 引入encryptlong实现数据RSA加密 */
import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。

// RSA 公钥
const publicKey = `后端给的公钥`

export default {
    /**
     * 使用JSEncrypt进行短文本加密
     * @param {string} data - 要加密的数据
     * @param {string} [key=publicKey] - 可选的公钥，默认使用主公钥
     * @returns {string} 加密后的数据
     */
    rsaEncrypt(data, key = publicKey) {
        const jsencrypt = new JSEncrypt();
        jsencrypt.setPublicKey(key);
        // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
        return jsencrypt.encrypt(data);
    },

    /**
     * 使用encryptlong进行长文本加密
     * @param {string} data - 要加密的数据
     * @param {string} [key=publicKey] - 可选的公钥，默认使用主公钥
     * @returns {string} 加密后的数据
     */
    encrypt(data, key = publicKey) {
        const encryptor = new Encrypt();
        encryptor.setPublicKey(key);
        // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
        return encryptor.encryptLong(data);
    }
}

项目中使用

import Rsa from '@/utils/rsa'
const loginParams: LoginParams = {
      phone: loginForm.value.phone,
      password: Rsa.encrypt(loginForm.value.password)
    }

添加类型声明
如果是ts项目，还需要添加rsa文件的类型声明

declare module '@/utils/rsa' {
    interface RsaUtils {
      /**
       * 使用JSEncrypt进行短文本加密
       * @param data - 要加密的数据
       * @param key - 可选的公钥，默认使用主公钥
       */
      rsaEncrypt(data: string, key?: string): string;
  
      /**
       * 使用encryptlong进行长文本加密
       * @param data - 要加密的数据
       * @param key - 可选的公钥，默认使用主公钥
       */
      encrypt(data: string, key?: string): string;
    }
  
    const rsa: RsaUtils;
    export default rsa;
  }

2.小程序端使用rsa加密

本来也使用和web端同样的方式去引入jsencrypt和encryptlong ，但是一直在报错不能使用。踩了很多坑发现这两个包的源码的判断的某些字段小程序里并不支持，所以我们需要直接去修改node_modules里的jsencrypt源码，去做小程序的兼容，也就意味着我们不能使用npm下载的方式去引入（因为不要用npm下载方式，这样引入的还是官方的依赖库，修改是无效的，是在官方的js文件修改后丢入utils文件夹下，再引入），接下来总结几个需要做兼容的地方

小程序使用jsencrypt加密，报Uncaught TypeError: Cannot read property ‘appName‘ of undefined问题
解决措施：navigator主要是对浏览器的判断，同时小程序中没有appName，直接删除或者保留最后一个else即可。这个解决后还会有其他的问题按照报错做兼容处理即可
找到代码中的
if (j_lm && (navigator.appName == “Microsoft Internet Explorer”)) {
BigInteger.prototype.am = am2;
dbits = 30;
} else if (j_lm && (navigator.appName != “Netscape”)) {
BigInteger.prototype.am = am1;
dbits = 26;
} else { // Mozilla/Netscape seems to prefer am3
BigInteger.prototype.am = am3;
dbits = 28;
}
直接删掉改为
BigInteger.prototype.am = am3;
dbits = 28;
解决uniapp开发微信小程序AES加密报错：TypeError: Cannot read property ‘crypto‘ of undefined
if (window.crypto && window.crypto.getRandomValues) { // 生成长度为256，元素值为0的数组
var z = new Uint32Array(256); // 生成长度为256，元素随机值的数组
window.crypto.getRandomValues(z);
}
替换为
var getRandomValues = function (array) {
for (var i = 0, l = array.length; i < l; i++) { array[i] = Math.floor(Math.random() * 256);
} return array;
}
var z = new Uint32Array(256);getRandomValues(z);
参考文档：参考文档1
参考文档2
小程序兼容后的源码：https://github.com/zhangs3721/wx_jsencrypt?tab=readme-ov-file
https://github.com/UFO0001/WX_RSA?tab=readme-ov-file