背景

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 版本)：

<script setup> 
import { onMounted } from "vue"; 
import initWasm, {sign} from "./pkg/sign.js"; // 通過wasm-pack打包生成的二進制包的入口文件 
import { v4 as uuidv4 } from 'uuid'; // 此示例以生成的UUID作為cnonce隨機字符串 
  
onMounted(async () => { 
    await initWasm() 
}) 
  
const sendRequest = () => { 
    const cnonce = uuidv4() 
    const params: EncryptedParams = { 
        name: 'John', 
        age: 23, 
        breed: 'dog', 
        ts: Date.now() 
    } 
    const wasmSignature = sign(JSON.stringify(params), cnonce); 
    ... 
    axios.post(something); 
} 
  
</script> 

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

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

簽名機制示例 (rust 版本)： 

extern crate wasm_bindgen; 
  
use ring::hmac; 
use ring::digest::{Context, SHA256}; 
use data_encoding::BASE64; 
use data_encoding::HEXUPPER; 
use wasm_bindgen::prelude::*; 
  
#[wasm_bindgen] 
pub fn ron_weasley_sign (message: &str, cnonce: &str) -> String { 
    const SECRET: &str = std::env!("SECRET"); 
  
    let mut context = Context::new(&SHA256); 
    context.update(format!("{}|{}", cnonce, message).as_bytes()); 
    let sha256_result = context.finish(); 
    let sha256_result_str = format!("{}", HEXUPPER.encode(sha256_result.as_ref())); 
  
    let key = hmac::Key::new(hmac::HMAC_SHA512, SECRET.as_bytes()); 
    let mac = hmac::sign(&key, sha256_result_str.as_bytes()); 
    let b64_encoded_sig = BASE64.encode(mac.as_ref()); 
    return b64_encoded_sig.to_uppercase(); 
} 

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

首先在項目的github地址

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

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

安裝cargo

由于我們使用cargo作為rust環境的管理器，所以第一步安裝cargo

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

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

安裝wasm-pack

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

cargo install wasm-pack 

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

cd ~/.cargo 
touch config 

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