日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用Jsencrypt配合axios實現(xiàn)數(shù)據(jù)傳輸加密

本文轉(zhuǎn)載自微信公眾號「粥里有勺糖」，作者粥里有勺糖。轉(zhuǎn)載本文請聯(lián)系粥里有勺糖公眾號。

10多年的三臺網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整三臺建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“三臺網(wǎng)站設計”,“三臺網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

背景

不希望應用發(fā)送的數(shù)據(jù)能在 Devtools 中被看到，避免接口被“同行”扒下來，然后被惡意使用

要避免此問題，首先想到的就是對傳輸?shù)臄?shù)據(jù)進行一次加密，讓后端自行解密然后處理

盡管js源碼是被瀏覽器公開的，但通過構(gòu)建工具混淆后，在沒有source map的情況下還不不易定位目標代碼

期望加密后的樣子傳輸?shù)膬?nèi)容如下

加密方案簡述

對稱加密

對稱加密就是兩邊擁有相同的秘鑰，兩邊都知道如何將密文加密解密。

這種加密方式固然很好，但是問題就在于如何讓雙方知道秘鑰。

由于傳輸數(shù)據(jù)都是走的網(wǎng)絡，如果將秘鑰通過網(wǎng)絡的方式傳遞的話，一旦秘鑰被截獲就沒有加密的意義

非對稱加密

有公鑰私鑰之分：

  • 公鑰所有人都可以知道，可以將數(shù)據(jù)用公鑰加密，但是將數(shù)據(jù)解密必須使用私鑰解密
  • 私鑰只有分發(fā)放公鑰的一方才知道

這種加密方式就可以完美解決對稱加密存在的問題

通過對比，選用保密性好的 非對稱加密 方案作為加密方案

本文選用 RSA[1] 對稱加密算法

公私鑰生成

根據(jù)百度經(jīng)驗的建議,生成一個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.

結(jié)合Axios實踐

Axios配置

 
 
 
      
  
  
  1. npm i axios 
    2.

將加密邏輯放入到axios的請求攔截器中，將原內(nèi)容使用 JSON.stringify處理后再進行加密，加密后的內(nèi)容使用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.     // 發(fā)送之前操作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. 解密收到的內(nèi)容
  2. 將解密后的內(nèi)容直接返回

http模塊示例

使用data事件與end事件配合，接收傳遞的數(shù)據(jù)，然后進行解密返回

 
 
 
      
  
  
  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.     // 接收傳遞的數(shù)據(jù) 
    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.             // 解密傳遞的數(shù)據(jù) 
    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示例

配置一個前置的*路由，解密傳遞的內(nèi)容，然后將其重新綁定到req.body上,供后續(xù)其它路由使用

 
 
 
      
  
  
  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.     // 直接返回實際的內(nèi)容 
    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 作為開發(fā)預覽工具

vite.config.js配置: 只做了請求代理，解決開發(fā)跨域問題

 
 
 
      
  
  
  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.     發(fā)送 
    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.     // 發(fā)送一個隨機內(nèi)容 
    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.

運行結(jié)果

頁面

發(fā)送網(wǎng)絡請求

請求響應內(nèi)容

大功告成,接入十分簡單

完整的示例代碼倉庫[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


網(wǎng)站名稱：使用Jsencrypt配合axios實現(xiàn)數(shù)據(jù)傳輸加密
網(wǎng)站地址：http://www.5511xx.com/article/dhgspge.html