背景

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

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

解決方案

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

總體流程如下圖所示：

代碼示例

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

1. <script setup> 
2. import { onMounted } from "vue"; 
3. import initWasm, {sign} from "./pkg/sign.js"; // 通過wasm-pack打包生成的二進制包的入口文件 
4. import { v4 as uuidv4 } from 'uuid'; // 此示例以生成的UUID作為cnonce隨機字符串 
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> 

簽名機制示例，server端接受到請求時，應該同時獲得簽名值以及cnonce一次性字符串，按照下面同樣的簽名順序進行簽名，比對前端傳入的簽名以及server端生成的簽名進行校驗：

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

簽名機制示例 (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. } 

構建rust源代碼，并生成對應的二進制包

首先在項目的github地址

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

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

安裝cargo

由于我們使用cargo作為rust環境的管理器，所以第一步安裝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 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

要構建二進制包，需要一個額外工具 wasm-pack。它會幫助我們把代碼編譯成 WebAssembly 并構建出適用于web環境的wasm包。使用下面的命令可以下載并安裝：

1. cargo install wasm-pack 

編譯wasm

wasm-pack安裝成功后，執行下面的命令以編譯wasm包

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

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

第一次構建和編譯時間會比較長，需要下載依賴的rust庫并編譯，請耐心等待

如果速度仍然很慢，建議更換cargo國內源

更換 cargo 源

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

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

1. cd ~/.cargo 
2. touch config 

然后編輯config文件，添加如下內容：

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的源

集成

執行wasm-pack命令打包會得到一個名為pkg的文件夾，位于項目的根目錄下

將其放入要使用的前端項目中，即可以像上面代碼示例章節所描述的方式進行集成和調用

附錄

• rust 項目地址：https://github.com/swearer23/ron-weasley
• vue3 調用方式示例項目地址：https://github.com/swearer23/harry-porter (內含有secret=123456的wasm包，可以用于示例)

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