rsa小程序前端加密

① 记录一下前端使用CryptoJS的几种加密方式

自己太小白了，之前在PC端项目中使用的MD5加密，现在的小程序项目使用了 CryptoJS 里面的 enc-base64 和 hmac-sha1 ，之前没有用到过这两种，所以比较疑惑，为何在小程序不继续使用 MD5 呢？所以在这里记录一下自己解疑惑的一些知识点。

随着互联网的兴起，我们对信息的安全越来越受重视，这样就导致在web开发中，对用户密码等各种加密变得更加重要了。与服务器的交互中，为了确保数据传输的安全性，避免被黑客抓包篡改。

对于Base64编码的，我觉得看一篇文章能够解决你的疑惑，我在这里就不赘述了
🧐 Base64编码原理

如： 用户密码，请求参数，文件加密

如： 接口参数签名验证服务

支付数据、CA数字证书

前端的朋友可能会关注前端js加密，我们在做 WEB 的登录功能时一般是通过 Form 提交或 Ajax 方式提交到服务器进行验证的。为了防止抓包，登录密码肯定要先进行一次加密（RSA），再提交到服务器进行验证。一些大公司都在使用，比如淘宝、京东、新浪 等。

前端加密也有很多现成的js库，如：

JS-RSA： 用于执行OpenSSL RSA加密、解密和密钥生成的Javascript库， https://github.com/travist/jsencrypt

MD5： 单向散列加密md5 js库， https://github.com/blueimp/JavaScript-MD5

crypto-js： 对称加密AES js库， https://github.com/brix/crypto-js

-CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。

HMAC 系列是消息验证，用于验证一个消息是否被篡改——如网站上传递 email 和 hmac(email)，则接收时可以通过 hmac(email) 获知 email 是否是用户伪造的

② 前端js 加密解密方式

一、base64加密
使用JS函数的window.btoa()和 window.atob()，分别是中腊编码和解码

二、编码和解码字符串

使用JS函巧羡数卖宽滑的escape()和unescape()，分别是编码和解码

三、AES加密解密
四、RSA加密解密

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

最近一个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_moles中去替换文件。
所以就采用了另外一种方案：将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加密、解密、签名、验签的原理及方法

RSA加密是一种非对称加密。可以在不直接传递密钥的情况下，完成解密。这能够确保信息的安全性，避免了直接传递密钥所造成的被破解的风险。是由一对密钥来进行加解密的过程，分别称为公钥和私钥。两者之间有数学相关，该加密算法的原理就是对一极大整数做因数分解的困难性来保证安全性。通常个人保存私钥，公钥是公开的（可能同时多人持有）。

加密和签名都是为了安全性考虑，但略有不同。常有人问加密和签名是用私钥还是公钥？其实都是对加密和签名的作用有所混淆。简单的说，加密是为了防止信息被泄露，而签名是为了防止信息被篡改。这里举2个例子说明。

RSA的加密过程如下：

RSA签名的过程如下：

总结：公钥加密、私钥解密、私钥签名、公钥验签。

RSA加密对明文的长度有所限制，规定需加密的明文最大长度=密钥长度-11（单位是字节，即byte），所以在加密和解密的过程中需要分块进行。而密钥默认是1024位，即1024位/8位-11=128-11=117字节。所以默认加密前的明文最大长度117字节，解密密文最大长度为128字。那么为啥两者相差11字节呢？是因为RSA加密使用到了填充模式（padding），即内容不足117字节时会自动填满，用到填充模式自然会占用一定的字节，而且这部分字节也是参与加密的。

⑤ 小程序RSA加密、解密、加签、验签

npm install  wxapp_rsa

var RSA = require('/wxapp_rsa.js')

// RSA加签

    var sign_rsa = new RSA.RSAKey();

//privateKey_pkcs1需要是-----BEGIN PRIVATE KEY-----开头的私钥

    sign_rsa = RSA.KEYUTIL.getKey(privateKey_pkcs1);

    console.log('签名RSA:')

    console.log(sign_rsa)

    var hashAlg = 'MD5withRSA';

    var hSig = sign_rsa.signString("12345678901234567890", hashAlg);

    hSig = RSA.hex2b64(hSig); // hex 转 b64

    console.log("签名结果：" + hSig)

    // RSA 验签

    var verify_rsa = new RSA.RSAKey();

    verify_rsa = RSA.KEYUTIL.getKey(publicKey_pkcs1);

    console.log('验签RSA:')

    console.log(verify_rsa)

    hSig = RSA.b64tohex(hSig)

    var ver = verify_rsa.verifyString("12345678901234567890", hSig)

    console.log('验签结果：' + ver)

//  RSA加密 【加密字段长度不大于117】

    var encrypt_rsa = new RSA.RSAKey();

    encrypt_rsa = RSA.KEYUTIL.getKey(rsa_public_key);

    console.log('加密RSA:')

    console.log(encrypt_rsa)

    var encStr = encrypt_rsa.encrypt('1234567890')

    console.log(encStr)

    encStr = RSA.hex2b64(encStr);

    console.log("加密结果：" + encStr)

    // RSA 解密

    var decrypt_rsa = new RSA.RSAKey();

    decrypt_rsa = RSA.KEYUTIL.getKey(rsa_public_key_private);

    console.log('解密RSA:')

    console.log(decrypt_rsa)

    encStr = RSA.b64tohex(encStr)

    var decStr = decrypt_rsa.decrypt(encStr)

    console.log("解密结果：" + decStr)

⑥ uni-app 利用Hbuilderx 的 rsa加密插件，实现加密

1.安装插件，通过HbuilderX 导入插件

https://ext.dcloud.net.cn/plugin?id=1389

2.项目文件夹下，会自动生成一个文件夹，js_sdk，把最毕旦里面的jsencrypt文件夹，拷贝到components下

3. 在需要参数加纤蠢密的vue页面，引入该组件，就可以正常使用了

import   jsencrypt   from '@/components/jsencrypt/jsencrypt.vue';

onLoad(options){

var publiukey='-----BEGIN PUBLIC KEY-----'毁数陪+'/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/' +'-----END PUBLIC KEY-----';

    var pubblicData=jsencrypt.setEncrypt(publiukey,"1234");

    console.log('密文',pubblicData);

}