使用Jsencrypt配合axios实现数据传输加密

本文转载自微信公众号「粥里有勺糖」，作者粥里有勺糖。转载本文请联系粥里有勺糖公众号。

10多年的三台网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整三台建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“三台网站设计”,“三台网站推广”以来，每个客户项目都认真落实执行。

背景

不希望应用发送的数据能在 Devtools 中被看到，避免接口被“同行”扒下来，然后被恶意使用

要避免此问题，首先想到的就是对传输的数据进行一次加密，让后端自行解密然后处理

尽管js源码是被浏览器公开的，但通过构建工具混淆后，在没有source map的情况下还不不易定位目标代码

期望加密后的样子传输的内容如下

加密方案简述

对称加密

对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。

这种加密方式固然很好，但是问题就在于如何让双方知道秘钥。

由于传输数据都是走的网络，如果将秘钥通过网络的方式传递的话，一旦秘钥被截获就没有加密的意义

非对称加密

有公钥私钥之分：

  • 公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密
  • 私钥只有分发放公钥的一方才知道

这种加密方式就可以完美解决对称加密存在的问题

通过对比，选用保密性好的 非对称加密 方案作为加密方案

本文选用 RSA[1] 对称加密算法

公私钥生成

根据百度经验的建议,生成一个1024位的的秘钥

这里使用openssl生成，window下建议在Git Bash下使用

私钥

 
 
 
      
  
  
  1. openssl genrsa -out rsa_1024_priv.pem 1024 
    2.

公钥

 
 
 
      
  
  
  1. openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem 
    2.

jsencrypt

  • jsencrypt[2]
  • nodejs-jsencrypt[3]

“使用 Javascript 进行RSA加密的解决方案

使用

安装依赖

 
 
 
      
  
  
  1. # web 
    2.   
  
  
  2. npm i jsencrypt 
    3.   
  
  
  3.  
    4.   
  
  
  4. # node 
    5.   
  
  
  5. npm i nodejs-jsencrypt 
    6.

引入

 
 
 
      
  
  
  1. // web 
    2.   
  
  
  2. import JSEncrypt from 'jsencrypt' 
    3.   
  
  
  3.  
    4.   
  
  
  4. // node 
    5.   
  
  
  5. const { JSEncrypt } = require('nodejs-jsencrypt') 
    6.

公钥加密方法

 
 
 
      
  
  
  1. // 上述自动生成 
    2.   
  
  
  2. const pubKey = '上述生成的公钥' 
    3.   
  
  
  3.  
    4.   
  
  
  4. function publicEncrypt(str){ 
    5.   
  
  
  5.     const encrypt = new JSEncrypt() 
    6.   
  
  
  6.     encrypt.setPublicKey(pubKey) 
    7.   
  
  
  7.     return encrypt.encrypt(str) 
    8.   
  
  
  8. } 
    9.

私钥解密方法

 
 
 
      
  
  
  1. const privKey = `上述生成的私钥` 
    2.   
  
  
  2.  
    3.   
  
  
  3. function privDecrypt(str) { 
    4.   
  
  
  4.     const encrypt = new JSEncrypt() 
    5.   
  
  
  5.     encrypt.setPrivateKey(privKey) 
    6.   
  
  
  6.     return encrypt.decrypt(str) 
    7.   
  
  
  7. } 
    8.

可以看出API非常简洁

使用示例

 
 
 
      
  
  
  1. let str = publicEncrypt('hello world') 
    2.   
  
  
  2. console.log(str) 
    3.   
  
  
  3. console.log(privDecrypt(str)) 
    4.

结合Axios实践

Axios配置

 
 
 
      
  
  
  1. npm i axios 
    2.

将加密逻辑放入到axios的请求拦截器中，将原内容使用 JSON.stringify处理后再进行加密，加密后的内容使用value属性传递，如下所示

 
 
 
      
  
  
  1. import axios from "axios"; 
    2.   
  
  
  2.  
    3.   
  
  
  3. // 引入刚刚编写的加密方法 
    4.   
  
  
  4. import { publicEncrypt } from "./utils/crypto"; 
    5.   
  
  
  5.  
    6.   
  
  
  6. const http = axios; 
    7.   
  
  
  7. http.defaults.baseURL = '/api' 
    8.   
  
  
  8. http.defaults.headers = { 
    9.   
  
  
  9.   "content-Type": "application/json" 
    10.   
  
  
  10. }; 
    11.   
  
  
  11.  
    12.   
  
  
  12. // 请求拦截器 
    13.   
  
  
  13. http.interceptors.request.use( 
    14.   
  
  
  14.   config => { 
    15.   
  
  
  15.     // 发送之前操作config 
    16.   
  
  
  16.     // 对传递的 data 进行加密 
    17.   
  
  
  17.     config.data = { 
    18.   
  
  
  18.       value:publicEncrypt(JSON.stringify(config.data)) 
    19.   
  
  
  19.     } 
    20.   
  
  
  20.     return config; 
    21.   
  
  
  21.   }, 
    22.   
  
  
  22.   err => { 
    23.   
  
  
  23.     // 处理错误 
    24.   
  
  
  24.     return Promise.reject(err); 
    25.   
  
  
  25.   } 
    26.   
  
  
  26. ); 
    27.   
  
  
  27. http.interceptors.response.use( 
    28.   
  
  
  28.   response => { 
    29.   
  
  
  29.     // 返回前操作 
    30.   
  
  
  30.     return response.data; 
    31.   
  
  
  31.   }, 
    32.   
  
  
  32.   err => { 
    33.   
  
  
  33.     return Promise.reject(err); 
    34.   
  
  
  34.   } 
    35.   
  
  
  35. ); 
    36.   
  
  
  36.  
    37.   
  
  
  37. export default http; 
    38.

服务端解密示例代码

这里列举了两种，一种直接使用Node.js的http模块编写，一种使用Express编写：

  1. 解密收到的内容
  2. 将解密后的内容直接返回

http模块示例

使用data事件与end事件配合，接收传递的数据，然后进行解密返回

 
 
 
      
  
  
  1. const http = require('http') 
    2.   
  
  
  2.  
    3.   
  
  
  3. // 引入解密方法 
    4.   
  
  
  4. const { privDecrypt } = require('./utils/crypto') 
    5.   
  
  
  5.  
    6.   
  
  
  6. const server = http.createServer((req, res) => { 
    7.   
  
  
  7.     res.setHeader('content-type','application/json') 
    8.   
  
  
  8.     let buffer = Buffer.alloc(0) 
    9.   
  
  
  9.  
    10.   
  
  
  10.     // 接收传递的数据 
    11.   
  
  
  11.     req.on('data',(chunk)=>{ 
    12.   
  
  
  12.         buffer = Buffer.concat([buffer, chunk]) 
    13.   
  
  
  13.     }) 
    14.   
  
  
  14.     req.on('end',()=>{ 
    15.   
  
  
  15.         try { 
    16.   
  
  
  16.             // 解密传递的数据 
    17.   
  
  
  17.             const data = privDecrypt(JSON.parse(buffer.toString('utf-8')).value) 
    18.   
  
  
  18.             res.end(data) 
    19.   
  
  
  19.         } catch (error) { 
    20.   
  
  
  20.             console.log(error); 
    21.   
  
  
  21.             res.end('error')             
    22.   
  
  
  22.         } 
    23.   
  
  
  23.     }) 
    24.   
  
  
  24. }) 
    25.   
  
  
  25.  
    26.   
  
  
  26. // 启动 
    27.   
  
  
  27. server.listen(3000, err => { 
    28.   
  
  
  28.     console.log(`listen 3000 success`); 
    29.   
  
  
  29. }) 
    30.

Express示例

配置一个前置的*路由，解密传递的内容，然后将其重新绑定到req.body上,供后续其它路由使用

 
 
 
      
  
  
  1. const express = require('express') 
    2.   
  
  
  2. const { privDecrypt } = require('./utils/crypto') 
    3.   
  
  
  3.  
    4.   
  
  
  4. const server = express() 
    5.   
  
  
  5.  
    6.   
  
  
  6. server.use(express.urlencoded({ extended: false })) 
    7.   
  
  
  7. server.use(express.json({ strict: true })) 
    8.   
  
  
  8.  
    9.   
  
  
  9. // 首先进入的路由 
    10.   
  
  
  10. server.route('*').all((req, res, next) => { 
    11.   
  
  
  11.     console.log(`${req.method}--${req.url}`) 
    12.   
  
  
  12.     req.body = JSON.parse(privDecrypt(req.body.value)) 
    13.   
  
  
  13.     next() 
    14.   
  
  
  14. }) 
    15.   
  
  
  15.  
    16.   
  
  
  16. server.post('/test/demo',(req,res)=>{ 
    17.   
  
  
  17.     // 直接返回实际的内容 
    18.   
  
  
  18.     res.json(req.body) 
    19.   
  
  
  19. }) 
    20.   
  
  
  20.  
    21.   
  
  
  21. // 启动 
    22.   
  
  
  22. server.listen(3000, err => { 
    23.   
  
  
  23.     console.log(`listen 3000 success`); 
    24.   
  
  
  24. }) 
    25.

前端代码示例

使用了 Vite 作为开发预览工具

vite.config.js配置: 只做了请求代理，解决开发跨域问题

 
 
 
      
  
  
  1. export default { 
    2.   
  
  
  2.     server: { 
    3.   
  
  
  3.         proxy: { 
    4.   
  
  
  4.             '/api': { 
    5.   
  
  
  5.                 target: 'http://localhost:3000', 
    6.   
  
  
  6.                 changeOrigin: true, 
    7.   
  
  
  7.                 rewrite: (path) => path.replace(/^\/api/, '') 
    8.   
  
  
  8.             }, 
    9.   
  
  
  9.         } 
    10.   
  
  
  10.     } 
    11.   
  
  
  11. } 
    12.

页面

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.     发送 
    3.   
  
  
  3.     
     
    4.   
  
  
  4.     
     
    5.   
  
  
  5.      
    6.   
  
  
  6.      
    7.   
  
  
  7.  
    8.

逻辑

 
 
 
      
  
  
  1. import $http from './http' 
    2.   
  
  
  2. const $send = document.getElementById('send') 
    3.   
  
  
  3. const $receive = document.getElementById('receive') 
    4.   
  
  
  4.  
    5.   
  
  
  5. $send.addEventListener('click',function(){ 
    6.   
  
  
  6.     // 发送一个随机内容 
    7.   
  
  
  7.     $http.post('/test/demo',{ 
    8.   
  
  
  8.         name:'xm', 
    9.   
  
  
  9.         age:~~(Math.random()*1000) 
    10.   
  
  
  10.     }).then((res)=>[ 
    11.   
  
  
  11.         updateReceive(res) 
    12.   
  
  
  12.     ]) 
    13.   
  
  
  13. }) 
    14.   
  
  
  14.  
    15.   
  
  
  15. function updateReceive(data){ 
    16.   
  
  
  16.     $receive.value = data instanceof Object?JSON.stringify(data):data 
    17.   
  
  
  17. } 
    18.

运行结果

页面

发送网络请求

请求响应内容

大功告成,接入十分简单

完整的示例代码仓库[4]

外链

[1]RSA: https://baike.baidu.com/item/RSA%E7%AE%97%E6%B3%95/263310

[2]jsencrypt: https://www.npmjs.com/package/jsencrypt

[3]nodejs-jsencrypt: https://www.npmjs.com/package/nodejs-jsencrypt

[4]完整的示例代码仓库: https://github.com/ATQQ/demos/tree/main/asymmetric-encryption

网页标题：使用Jsencrypt配合axios实现数据传输加密
网站URL：http://www.stwzsj.com/qtweb/news26/17576.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

同城分类信息

移动网站建设　　 　成都塑料加工　　 　雪茄烟　　 　网站运营　　 　网站建设开发　　 　成都手机网站报价　　 　温江网站制作　　 　成都定制网站　　 　四川内江电信机房　　 　成都网站运维　　 　新津网站运维　　 　网站制作　　 　艾名斯智能　　 　交互设计　　 　航空文化传媒　　 　小程序开发　　 　品牌网站建设　　 　普特斯腐植酸　　 　买链接　　 　成都移动服务器托管