使用webassembly对前端api请求进行签名（使用webassembly对前端api请求进行签名）

背景

server端处理WebAPI请求的安全问题：

请求重放 (eg. 月饼抢购场景中，程序员通过脚本直接访问接口)
参数篡改 (eg. 会话劫持场景中，将应该抢购到的月饼归属人改为自己)
脚本攻击 (eg. 综合前两种场景，使用技术手段构建的请求进行攻击，如信息窃取，漏洞攻击)
可信客户端请求 (eg. 以上所有场景根因均为访问客户端不可信并不可证伪)

解决方案

对请求参数+cnonce (客户端生成的一次性随机字符串) 进行hash签名
以secret作为盐值
将签名作为header值传递给server端
server端在redis中查验是否已有重复签名，如有重复直接拒绝请求(防止请求重放)
server端对签名值进行校验
校验通过之后将该签名值作为key值，存入redis

总体流程如下图所示：

使用webassembly对前端api请求进行签名（使用webassembly对前端api请求进行签名）

代码示例

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

<scriptsetup>
import{onMounted}from"vue";
importinitWasm,{sign}from"./pkg/sign.js";//通过wasm-pack打包生成的二进制包的入口文件
import{v4asuuidv4}from'uuid';//此示例以生成的UUID作为cnonce随机字符串
onMounted(async()=>{
awaitinitWasm()
})
constsendRequest=()=>{
constcnonce=uuidv4()
constparams:EncryptedParams={
name:'John',
age:23,
breed:'dog',
ts:Date.now()
}
constwasmSignature=sign(JSON.stringify(params),cnonce);
...
axios.post(something);
}
</script>

签名机制示例，server端接受到请求时，应该同时获得签名值以及cnonce一次性字符串，按照下面同样的签名顺序进行签名，比对前端传入的签名以及server端生成的签名进行校验：

constencryptedSign=(message:string,cnonce:string):string=>{
constsecret='XXXXXXX'//该签名盐值可以自行生成，生成之后需要重新编译rust应用，生成新的wasm包
consthashDigest=sha256(`${cnonce}|${message}`)
consthmacDigest=Base64.stringify(hmacSHA512(hashDigest.toString().toUpperCase(),secret))
returnhmacDigest.toString().toUpperCase()
}

签名机制示例 (rust 版本)：

externcratewasm_bindgen;
usering::hmac;
usering::digest::{Context,SHA256};
usedata_encoding::BASE64;
usedata_encoding::HEXUPPER;
usewasm_bindgen::prelude::*;
#[wasm_bindgen]
pubfnron_weasley_sign(message:&str,cnonce:&str)->String{
constSECRET:&str=std::env!("SECRET");
letmutcontext=Context::new(&SHA256);
context.update(format!("{}|{}",cnonce,message).as_bytes());
letsha256_result=context.finish();
letsha256_result_str=format!("{}",HEXUPPER.encode(sha256_result.as_ref()));
letkey=hmac::Key::new(hmac::HMAC_SHA512,SECRET.as_bytes());
letmac=hmac::sign(&key,sha256_result_str.as_bytes());
letb64_encoded_sig=BASE64.encode(mac.as_ref());
returnb64_encoded_sig.to_uppercase();
}

构建rust源代码，并生成对应的二进制包

首先在项目的github地址

https://github.com/swearer23/ron-weasley 下载源代码

之后按照README文件的步骤安装编译环境(以*nix环境为例)

安装cargo

由于我们使用cargo作为rust环境的管理器，所以第一步安装cargo

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

cargo-v#可能需要重新启动终端
Rust'spackagemanager
USAGE:
cargo[+toolchain][OPTIONS][SUBCOMMAND]
OPTIONS:
-V,--versionPrintversioninfoandexit
--listListinstalledcommands
--explain<CODE>Run`rustc--explainCODE`
-v,--verboseUseverboseoutput(-vvveryverbose/build.rsoutput)
-q,--quietNooutputprintedtostdout
--color<WHEN>Coloring:auto,always,never
--frozenRequireCargo.lockandcacheareuptodate
--lockedRequireCargo.lockisuptodate
--offlineRunwithoutaccessingthenetwork
--config<KEY=VALUE>...Overrideaconfigurationvalue(unstable)
-Z<FLAG>...Unstable(nightly-only)flagstoCargo,see'cargo-Zhelp'fordetails
-h,--helpPrintshelpinformation
Somecommoncargocommandsare(seeallcommandswith--list):
build,bCompilethecurrentpackage
check,cAnalyzethecurrentpackageandreporterrors,butdon'tbuildobjectfiles
cleanRemovethetargetdirectory
doc,dBuildthispackage'sanditsdependencies'documentation
newCreateanewcargopackage
initCreateanewcargopackageinanexistingdirectory
run,rRunabinaryorexampleofthelocalpackage
test,tRunthetests
benchRunthebenchmarks
updateUpdatedependencieslistedinCargo.lock
searchSearchregistryforcrates
publishPackageanduploadthispackagetotheregistry
installInstallaRustbinary.Defaultlocationis$HOME/.cargo/bin
uninstallUninstallaRustbinary
See'cargohelp<command>'formoreinformationonaspecificcommand.

`安装wasm-pack`

要构建二进制包，需要一个额外工具 wasm-pack。它会帮助我们把代码编译成 WebAssembly 并构建出适用于web环境的wasm包。使用下面的命令可以下载并安装：

cargoinstallwasm-pack

`编译wasm`

wasm-pack安装成功后，执行下面的命令以编译wasm包

SECRET=wasm-packbuild--target=web--release

<your-secret>替换为你的签名盐值

第一次构建和编译时间会比较长，需要下载依赖的rust库并编译，请耐心等待

如果速度仍然很慢，建议更换cargo国内源

`更换 cargo 源`

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

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

cd~/.cargo
touchconfig

然后编辑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"

即可更换为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/

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

关于作者：访客

使用webassembly对前端api请求进行签名（使用webassembly对前端api请求进行签名）

背景

解决方案