背景

server端處理WebAPI請(qǐng)求的安全問題：

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

解決方案

1. 對(duì)請(qǐng)求參數(shù)+cnonce (客戶端生成的一次性隨機(jī)字符串) 進(jìn)行hash簽名
2. 以secret作為鹽值
3. 將簽名作為header值傳遞給server端
4. server端在redis中查驗(yàn)是否已有重復(fù)簽名，如有重復(fù)直接拒絕請(qǐng)求(防止請(qǐng)求重放)
5. server端對(duì)簽名值進(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.   
23. </script> 

簽名機(jī)制示例，server端接受到請(qǐng)求時(shí)，應(yīng)該同時(shí)獲得簽名值以及cnonce一次性字符串，按照下面同樣的簽名順序進(jìn)行簽名，比對(duì)前端傳入的簽名以及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() 
6. } 

簽名機(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(); 
22. } 

構(gòu)建rust源代碼，并生成對(duì)應(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 # 可能需要重新啟動(dòng)終端 
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 binary. Default 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)制包，需要一個(gè)額外工具 wasm-pack。它會(huì)幫助我們把代碼編譯成 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í)間會(huì)比較長(zhǎng)，需要下載依賴的rust庫(kù)并編譯，請(qǐng)耐心等待

如果速度仍然很慢，建議更換cargo國(guó)內(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命令打包會(huì)得到一個(gè)名為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包，可以用于示例)

原文地址：https://www.toutiao.com/a7045923113728573982/