--- theme: smartblue --- # 使用jsencrypt配合axios实现非对称加密传输的数据 >这是我参与更文挑战的第8天，活动详情查看：[更文挑战](https://juejin.cn/post/6967194882926444557) ## 背景不希望应用发送的数据能在 Devtools 中被看到，避免接口被“同行”扒下来，然后被恶意使用 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c7551da0e294852aa3b5ba6a053a9d6~tplv-k3u1fbpfcp-zoom-1.image) 要避免此问题，首先想到的就是对传输的数据进行一次加密，让后端自行解密然后处理尽管js源码是被浏览器公开的，但通过构建工具混淆后，在没有source map的情况下还不不易定位目标代码期望加密后的样子传输的内容如下 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76bd7a70debd413294d290116514750c~tplv-k3u1fbpfcp-zoom-1.image) ## 加密方案简述 ### 对称加密对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。这种加密方式固然很好，但是问题就在于如何让双方知道秘钥。由于传输数据都是走的网络，如果将秘钥通过网络的方式传递的话，一旦秘钥被截获就没有加密的意义 ### 非对称加密有公钥私钥之分： * 公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密 * 私钥只有分发放公钥的一方才知道这种加密方式就可以完美解决对称加密存在的问题通过对比，选用保密性好的 **非对称加密** 方案作为加密方案本文选用 **[RSA](https://baike.baidu.com/item/RSA%E7%AE%97%E6%B3%95/263310)** 对称加密算法 ## 公私钥生成根据百度经验的建议,生成一个1024位的的秘钥这里使用**openssl**生成，`window`下建议在`Git Bash`下使用 **私钥** ```sh openssl genrsa -out rsa_1024_priv.pem 1024 ```

点击查看生成私钥

```sh -----BEGIN RSA PRIVATE KEY----- MIICXwIBAAKBgQC0YiWffUFPnr2OyfcaM8QLkdq30VQxjIctZJX/CnYn7NorwCyK iBX3hULSUrBxBACZBtfeGtpT+I9yn3+6s4kClZiJNOOP8bvJab4fboLUtJt9XciK ENRxHVcnrYMrM+0diXGH/COjeA7ym/L2M/eX1fxpZjTByaJdx0FZAlrD4wIDAQAB AoGBAKarxU2vw4gZCdeE3/BzAmMaWrjcD2pVCZY0ya/Fb9WGMTSZtc4u3fU+Sbbi tqtGYnMC8rUDpNZP5eOoYrIVL7MJFj7n5DIT6TJOxWRavWsei812pQlc6ccR/VEH o0nN5JQRZH8DC+CE86QddOW7VfnRMIP4A7j8UEEiRxsPITExAkEA4N10W/HA7lYE WKSRES4/gAJHg7cqS2dAWIovX/JtxzUyK2q50rWjbgbXXOGriIp3cRJeH2Jmi6tm jQQ+ldWAqwJBAM1b/9cRLWJ6fPdDIjbrc9IQE6C5HYI0FsHuyCn3zUKnD1+hc7k5 +BrSpyG5VzdPH3WOhm6GJ5TCf/LlxvvIeakCQQCEO1Ywt2KYBTc7FVNFgifPVAfP +gdCHi6lomUni/1oVuzwwSsTMMMxcY51zTM88Qg6Eu4MkKXy3lFI/cT8AXhPAkEA vy4q27muGsQVmsvxClfgl2tIGpS7l/+OQDVgO1Hq0WZdtZXE+mexRqdd2NOHEoKi svpgxHw4VRFNtH+d48EbIQJBAMcLRGOuUrPhyYXmvEvvGGqcFH7zwjoyYlQQYR3a IeAC4Mo/vDo7agLXvlRFXgPWMXAJqzjVhZ+xmew4hUqe5HY= -----END RSA PRIVATE KEY----- ```

**公钥** ```sh openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem ```

点击查看生成的公钥

```sh -----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC0YiWffUFPnr2OyfcaM8QLkdq3 0VQxjIctZJX/CnYn7NorwCyKiBX3hULSUrBxBACZBtfeGtpT+I9yn3+6s4kClZiJ NOOP8bvJab4fboLUtJt9XciKENRxHVcnrYMrM+0diXGH/COjeA7ym/L2M/eX1fxp ZjTByaJdx0FZAlrD4wIDAQAB -----END PUBLIC KEY----- ```

## jsencrypt * [jsencrypt](https://www.npmjs.com/package/jsencrypt) * [nodejs-jsencrypt](https://www.npmjs.com/package/nodejs-jsencrypt) >使用 Javascript 进行RSA加密的解决方案 ### 使用 **安装依赖** ```sh # web npm i jsencrypt # node npm i nodejs-jsencrypt ``` **引入** ```js // web import JSEncrypt from 'jsencrypt' // node const { JSEncrypt } = require('nodejs-jsencrypt') ``` ### 公钥加密方法 ```js // 上述自动生成 const pubKey = '上述生成的公钥' function publicEncrypt(str){ const encrypt = new JSEncrypt() encrypt.setPublicKey(pubKey) return encrypt.encrypt(str) } ``` ### 私钥解密方法 ```js const privKey = `上述生成的私钥` function privDecrypt(str) { const encrypt = new JSEncrypt() encrypt.setPrivateKey(privKey) return encrypt.decrypt(str) } ``` 可以看出API非常简洁 ### 使用示例 ```js let str = publicEncrypt('hello world') console.log(str) console.log(privDecrypt(str)) ``` ## 结合Axios实践 ### Axios配置 ```sh npm i axios ``` 将加密逻辑放入到axios的请求拦截器中，将原内容使用 `JSON.stringify`处理后再进行加密，加密后的内容使用`value`属性传递，如下所示 ```js import axios from "axios"; // 引入刚刚编写的加密方法 import { publicEncrypt } from "./utils/crypto"; const http = axios; http.defaults.baseURL = '/api' http.defaults.headers = { "content-Type": "application/json" }; // 请求拦截器 http.interceptors.request.use( config => { // 发送之前操作config // 对传递的 data 进行加密 config.data = { value:publicEncrypt(JSON.stringify(config.data)) } return config; }, err => { // 处理错误 return Promise.reject(err); } ); http.interceptors.response.use( response => { // 返回前操作 return response.data; }, err => { return Promise.reject(err); } ); export default http; ``` ### 服务端解密示例代码这里列举了两种，一种直接使用Node.js的`http`模块编写，一种使用Express编写： 1. 解密收到的内容 2. 将解密后的内容直接返回 #### http模块示例使用`data`事件与`end`事件配合，接收传递的数据，然后进行解密返回 ```js const http = require('http') // 引入解密方法 const { privDecrypt } = require('./utils/crypto') const server = http.createServer((req, res) => { res.setHeader('content-type','application/json') let buffer = Buffer.alloc(0) // 接收传递的数据 req.on('data',(chunk)=>{ buffer = Buffer.concat([buffer, chunk]) }) req.on('end',()=>{ try { // 解密传递的数据 const data = privDecrypt(JSON.parse(buffer.toString('utf-8')).value) res.end(data) } catch (error) { console.log(error); res.end('error') } }) }) // 启动 server.listen(3000, err => { console.log(`listen 3000 success`); }) ``` #### Express示例配置一个前置的`*`路由，解密传递的内容，然后将其重新绑定到`req.body`上,供后续其它路由使用 ```js const express = require('express') const { privDecrypt } = require('./utils/crypto') const server = express() server.use(express.urlencoded({ extended: false })) server.use(express.json({ strict: true })) // 首先进入的路由 server.route('*').all((req, res, next) => { console.log(`${req.method}--${req.url}`) req.body = JSON.parse(privDecrypt(req.body.value)) next() }) server.post('/test/demo',(req,res)=>{ // 直接返回实际的内容 res.json(req.body) }) // 启动 server.listen(3000, err => { console.log(`listen 3000 success`); }) ``` ### 前端代码示例使用了 **Vite** 作为开发预览工具 vite.config.js配置: 只做了请求代理，解决开发跨域问题 ```js export default { server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, } } } ``` **页面** ```html

``` 逻辑 ```js import $http from './http' const $send = document.getElementById('send') const $receive = document.getElementById('receive') $send.addEventListener('click',function(){ // 发送一个随机内容 $http.post('/test/demo',{ name:'xm', age:~~(Math.random()*1000) }).then((res)=>[ updateReceive(res) ]) }) function updateReceive(data){ $receive.value = data instanceof Object?JSON.stringify(data):data } ``` ## 运行结果 **页面** ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1f4490d0f904d6fafcaa58a83b22df7~tplv-k3u1fbpfcp-zoom-1.image) **发送网络请求** ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0538f0f2ea2244e1b84468f0923b8a5f~tplv-k3u1fbpfcp-zoom-1.image) **请求响应内容** ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b018804dc8d40ac9fe8c3cbb4f7ebfa~tplv-k3u1fbpfcp-zoom-1.image) 大工告成,接入十分简单 [完整的示例代码仓库](https://github.com/ATQQ/demos/tree/main/asymmetric-encryption) 欢迎评论交流