自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

使用WebAssembly對前端API請求進(jìn)行簽名

開發(fā) 前端
server端處理WebAPI請求的安全問題:請求重放 (eg. 月餅搶購場景中,程序員通過腳本直接訪問接口);參數(shù)篡改 (eg. 會話劫持場景中,將應(yīng)該搶購到的月餅歸屬人改為自己);腳本攻擊 (eg. 綜合前兩種場景,使用技術(shù)手段構(gòu)建的請求進(jìn)行攻擊,如信息竊取,漏洞攻擊)等。

背景

server端處理WebAPI請求的安全問題:

  1. 請求重放 (eg. 月餅搶購場景中,程序員通過腳本直接訪問接口)
  2. 參數(shù)篡改 (eg. 會話劫持場景中,將應(yīng)該搶購到的月餅歸屬人改為自己)
  3. 腳本攻擊 (eg. 綜合前兩種場景,使用技術(shù)手段構(gòu)建的請求進(jìn)行攻擊,如信息竊取,漏洞攻擊)
  4. 可信客戶端請求 (eg. 以上所有場景根因均為訪問客戶端不可信并不可證偽)

解決方案

  1. 對請求參數(shù)+cnonce (客戶端生成的一次性隨機(jī)字符串) 進(jìn)行hash簽名
  2. 以secret作為鹽值
  3. 將簽名作為header值傳遞給server端
  4. server端在redis中查驗(yàn)是否已有重復(fù)簽名,如有重復(fù)直接拒絕請求(防止請求重放)
  5. server端對簽名值進(jìn)行校驗(yàn)
  6. 校驗(yàn)通過之后將該簽名值作為key值,存入redis

總體流程如下圖所示:

代碼示例

前端使用示例(TypeScript Vue3 版本):

  1. <script setup> 
  2. import { onMounted } from "vue"
  3. import initWasm, {sign} from "./pkg/sign.js"; // 通過wasm-pack打包生成的二進(jìn)制包的入口文件 
  4. import { v4 as uuidv4 } from 'uuid'; // 此示例以生成的UUID作為cnonce隨機(jī)字符串 
  5.   
  6. onMounted(async () => { 
  7.     await initWasm() 
  8. }) 
  9.   
  10. const sendRequest = () => { 
  11.     const cnonce = uuidv4() 
  12.     const params: EncryptedParams = { 
  13.         name'John'
  14.         age: 23, 
  15.         breed: 'dog'
  16.         ts: Date.now() 
  17.     } 
  18.     const wasmSignature = sign(JSON.stringify(params), cnonce); 
  19.     ... 
  20.     axios.post(something); 
  21.   
  22. </script> 

 

簽名機(jī)制示例,server端接受到請求時(shí),應(yīng)該同時(shí)獲得簽名值以及cnonce一次性字符串,按照下面同樣的簽名順序進(jìn)行簽名,比對前端傳入的簽名以及server端生成的簽名進(jìn)行校驗(yàn):

  1. const encryptedSign = (message: string, cnonce: string): string => { 
  2.   const secret = 'XXXXXXX' // 該簽名鹽值可以自行生成,生成之后需要重新編譯rust應(yīng)用,生成新的wasm包 
  3.   const hashDigest = sha256(`${cnonce}|${message}`) 
  4.   const hmacDigest = Base64.stringify(hmacSHA512(hashDigest.toString().toUpperCase(), secret)) 
  5.   return hmacDigest.toString().toUpperCase() 

簽名機(jī)制示例 (rust 版本): 

  1. extern crate wasm_bindgen; 
  2.   
  3. use ring::hmac; 
  4. use ring::digest::{Context, SHA256}; 
  5. use data_encoding::BASE64; 
  6. use data_encoding::HEXUPPER; 
  7. use wasm_bindgen::prelude::*; 
  8.   
  9. #[wasm_bindgen] 
  10. pub fn ron_weasley_sign (message: &str, cnonce: &str) -> String { 
  11.     const SECRET: &str = std::env!("SECRET"); 
  12.   
  13.     let mut context = Context::new(&SHA256); 
  14.     context.update(format!("{}|{}", cnonce, message).as_bytes()); 
  15.     let sha256_result = context.finish(); 
  16.     let sha256_result_str = format!("{}", HEXUPPER.encode(sha256_result.as_ref())); 
  17.   
  18.     let key = hmac::Key::new(hmac::HMAC_SHA512, SECRET.as_bytes()); 
  19.     let mac = hmac::sign(&key, sha256_result_str.as_bytes()); 
  20.     let b64_encoded_sig = BASE64.encode(mac.as_ref()); 
  21.     return b64_encoded_sig.to_uppercase(); 

構(gòu)建rust源代碼,并生成對應(yīng)的二進(jìn)制包

首先在項(xiàng)目的github地址

https://github.com/swearer23/ron-weasley 下載源代碼

之后按照README文件的步驟安裝編譯環(huán)境(以*nix環(huán)境為例)

安裝cargo

由于我們使用cargo作為rust環(huán)境的管理器,所以第一步安裝cargo

安裝完成后在命令行輸入cargo -v 查看是否安裝成功

  1. cargo -v # 可能需要重新啟動終端 
  2. Rust's package manager 
  3.  
  4. USAGE: 
  5.     cargo [+toolchain] [OPTIONS] [SUBCOMMAND] 
  6.  
  7. OPTIONS: 
  8.     -V, --version                  Print version info and exit 
  9.         --list                     List installed commands 
  10.         --explain <CODE>           Run `rustc --explain CODE` 
  11.     -v, --verbose                  Use verbose output (-vv very verbose/build.rs output) 
  12.     -q, --quiet                    No output printed to stdout 
  13.         --color <WHEN>             Coloring: auto, always, never 
  14.         --frozen                   Require Cargo.lock and cache are up to date 
  15.         --locked                   Require Cargo.lock is up to date 
  16.         --offline                  Run without accessing the network 
  17.         --config <KEY=VALUE>...    Override a configuration value (unstable) 
  18.     -Z <FLAG>...                   Unstable (nightly-only) flags to Cargo, see 'cargo -Z help' for details 
  19.     -h, --help                     Prints help information 
  20.  
  21. Some common cargo commands are (see all commands with --list): 
  22.     build, b    Compile the current package 
  23.     check, c    Analyze the current package and report errors, but don't build object files 
  24.     clean       Remove the target directory 
  25.     doc, d      Build this package's and its dependencies' documentation 
  26.     new         Create a new cargo package 
  27.     init        Create a new cargo package in an existing directory 
  28.     run, r      Run a binary or example of the local package 
  29.     test, t     Run the tests 
  30.     bench       Run the benchmarks 
  31.     update      Update dependencies listed in Cargo.lock 
  32.     search      Search registry for crates 
  33.     publish     Package and upload this package to the registry 
  34.     install     Install a Rust binaryDefault location is $HOME/.cargo/bin 
  35.     uninstall   Uninstall a Rust binary 
  36.  
  37. See 'cargo help <command>' for more information on a specific command. 

安裝wasm-pack

要構(gòu)建二進(jìn)制包,需要一個額外工具 wasm-pack。它會幫助我們把代碼編譯成 WebAssembly 并構(gòu)建出適用于web環(huán)境的wasm包。使用下面的命令可以下載并安裝:

  1. cargo install wasm-pack 

編譯wasm

wasm-pack安裝成功后,執(zhí)行下面的命令以編譯wasm包

  1. SECRET= wasm-pack build --target=web --release 

<your-secret>替換為你的簽名鹽值

第一次構(gòu)建和編譯時(shí)間會比較長,需要下載依賴的rust庫并編譯,請耐心等待

如果速度仍然很慢,建議更換cargo國內(nèi)源

更換 cargo 源

在你的cargo文件夾下新建 config 文件

macos中,文件夾地址在 ~/.cargo 

  1. cd ~/.cargo 
  2. touch config 

然后編輯config文件,添加如下內(nèi)容: 

  1. [source.crates-io] 
  2. registry = "https://github.com/rust-lang/crates.io-index" 
  3. replace-with = 'ustc' 
  4. [source.ustc] 
  5. registry = "git://mirrors.ustc.edu.cn/crates.io-index" 

即可更換為ustc的源

集成

執(zhí)行wasm-pack命令打包會得到一個名為pkg的文件夾,位于項(xiàng)目的根目錄下

將其放入要使用的前端項(xiàng)目中,即可以像上面代碼示例章節(jié)所描述的方式進(jìn)行集成和調(diào)用

附錄

  • rust 項(xiàng)目地址:https://github.com/swearer23/ron-weasley
  • vue3 調(diào)用方式示例項(xiàng)目地址:https://github.com/swearer23/harry-porter (內(nèi)含有secret=123456的wasm包,可以用于示例)

 

 

 

責(zé)任編輯:未麗燕 來源: 今日頭條
相關(guān)推薦

2023-12-12 07:30:54

IstioWasm前端

2024-10-18 08:17:36

2021-08-30 14:23:05

BlazorHTTP請求

2020-11-09 11:10:56

前端api緩存

2023-10-27 10:16:17

前端項(xiàng)目Rust

2020-11-03 08:12:20

WebAssemblyAPI

2017-02-24 09:30:17

iOS簽名代碼

2019-09-12 18:10:38

HTTPieAPI測試Python

2022-06-02 08:01:11

云原生工具

2024-09-30 09:25:29

2018-07-30 13:29:04

WebAssemblyGo語言

2021-05-09 22:48:40

SQL數(shù)據(jù)庫變量

2021-06-15 20:59:14

Kubernetes調(diào)試容器

2020-03-27 20:22:53

數(shù)據(jù)集裝箱網(wǎng)絡(luò)

2021-03-05 00:06:12

Docker容器內(nèi)存

2022-08-15 15:16:20

機(jī)器學(xué)習(xí)圖片深度學(xué)習(xí)

2023-07-13 11:24:14

SQL優(yōu)化賦值

2009-10-22 09:32:51

ghostlinux系統(tǒng)備份

2021-09-27 16:39:10

PythonGif壓縮

2023-12-06 07:14:28

前端API中間件
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號