jsencrypt实现前端RSA非对称加密解密（vue项目）

Posted 2023-04-15

参考技术A

最近一个vue项目要求所有密码数据需要使用RSA非对称加密传输，以为挺简单，结果开发过程中还是遇到了些问题，简单做个笔记。同时也希望可以帮助到遇到同样问题的道友门。

重点来了：使用jsencrypt实现RSA非对称加解密
因为这里直接在前端加解密，所以需要一对现成的密钥，我们通过 密钥在线生成器 得到：

然后在需要使用的文件中引入JSEncrypt，我是将所有工具函数都封装在一个js文件的，我就直接在该文件中引入，我看也有人是在main.js中引入的。

到这里我们的加密解密方法就完成了，在需要的地方直接拿过来用就好了！

大功告成！这样就完了？我以为这样就ok了。

当然，如果没有遇到这个bug，就可以忽略下面的内容了。
从上面截图可以看到，重启项目的时候报错： navigator is not defined
而且这个bug有点奇葩，先启动项目再引入jsencrypt就什么问题都没有，但是先引入jsencrypt再启动项目就报错。这也是我前面能顺利执行的原因所在。
通过好一通折腾，用了网上的各种方法，比如在main.js引入jsencrypt、引入jsdom之类的，都没能解决这个问题，最终还是在jsencrypt的git相关 issue 下找到了这个问题的解决方案。

到这里问题就算基本解决了，但是由于项目组不止我一个前端，我不能要求每个同事或者以后接手维护项目的同事都要在node_modules中去替换文件。
所以就采用了另外一种方案：将jsencrypt.js通过在线js压缩器压缩至jsencrypt.min.js中，然后把jsencrypt.min.js放到src/assets/jsencrypt文件夹中，就不用npm install的方式了。
换了种方式，jsencrypt的引用方式需要做出相应的调整：

参考链接： RSA非对称加密传输---前端加密&解密(VUE项目)
https://github.com/travist/jsencrypt/issues/144
PS：才疏学浅，如果有考虑不周之处或者有更好的解决方案，欢迎指正探讨！

rsa加密算法及js的JSEncrypt实现前端加密

最近的项目中用到了rsa加密算法，在实现了相关功能之后，我去了解了一下rsa相关原理，于是就写了这篇博客啦。

首先介绍一下什么是rsa加密算法：

作为非对称加密算法的老大，rsa号称是地球上最安全的加密算法。

 首先了解一些数学背景（我发现我真的好喜欢看数学概念0.0），这里就不再赘诉相关数学背景了，但是请务必要理解这些概念，贴一个我觉着讲得特别清晰的概念，便于理解：

https://blog.csdn.net/u014044812/article/details/80782448

然后介绍一下rsa密钥生成过程：

1.随机选两个不等的质数p和q：

实际应用中如果这两个质数越大就越难破解

 2.计算p和q的乘积n

n=p*q
n的长度就是密钥长度，然后把n写成二进制，共有多少位，这个密钥就有多少位，
在一般场景中rsa密钥一般是1024位，重要场合位2048位

 3.计算n的欧拉函数φ(n)

4.随机选择一个整数e，条件是1<e<φ(n),且e与φ(n)互质

5.计算e对于φ(n)的模反元素d

ed-kφ(n)=1

 

（可以利用辗转相除法求的d元素，）

按照公式，d=x=-367，但是一般取正整数，然后d加减φ(n)的n倍都是e的模反元素

所以取d=d+kφ(n)=-367+1x3120=2753

 

6.将n和e封装成公钥，n和d封装成私钥

公钥：（n,e） 

私钥：（n，d）

 

利用JSEncrypt实现的整个加密过程，具体实现可以看看

https://github.com/travist/jsencrypt

我司现在后端用java实现的解密过程，我现在在前端实现加密过程，列举部分代码