>在前端使用加解密方式容易暴露密钥（或许一定会），但是如果把密钥藏起来，藏到二进制中或许就不容易被发现了。
[sm4-sdk]( https://github.com/honwhy/sm4-sdk)
是我用来验证想法的 demo ，下面介绍大概思路，以及有些踩坑的内容
一、基本情况
1 、使用 wasm-pack 这个工具来创建项目，编译成 web 类型
```
wasm-pack new sm4-sdk
wasm-pack build --target web
```
2 、使用了一个简单的国密库
```
cargo add smcrypto
```
经过一番研究发现它的 Padding 模式是 `PKCS5Padding`
3 、使用`dotenv`达成编译阶段注入变量的目的
从前端的工程化的一些经验中借鉴来的，`dotenv`支持从环境变量和`.env`文件读取变量，
```
cargo add dotenv
```
```
// file config.rs
use dotenv_codegen::dotenv;
pub const KEY: &str = dotenv!("SM4_SDK_KEY");
pub const IV: &str = dotenv!("SM4_SDK_IV");
```
4 、如何使用
克隆这个项目，将`.env.example`修改为`.env`文件，修改里面的密钥内容，执行
```
wasm-pack build --target web
```
二、踩坑
1 、安装`wasm-pack`
安装`wasm-pack`命令有两种方式，通过`cargo`或者`npm`
如果是 windows 环境，建议设置 default host 等设为`msvc`
```
// file settings.toml
default_host_triple = "x86_64-pc-windows-msvc"
default_toolchain = "stable-x86_64-pc-windows-msvc"
```
2 、使用`github action`自动打包
希望通过`github action`的环境变量提供给项目打包时使用，可能`dotenv`没有支持好，可能是我配置不对。不过不折腾的方式是配置`repository secrets`，使用时新建一个`.env`文件
```
// file workflows/wasm-pack.yml
- name: create env file
run: |
touch .env
echo SM4_SDK_KEY=${{ secrets.SM4_SDK_KEY }} >> .env
echo SM4_SDK_IV=${{ secrets.SM4_SDK_IV }} >> .env
```
三、如何使用
参考项目中的`example.html`的做法，这个项目并没有上传到 npm 上，
```
<script type="module">
import init, { encrypt_to_base64, decrypt_from_base64 } from './pkg/sm4_sdk.js';
const run = async () => {
await init();
const origin = "hello world";
const encoded_str = encrypt_to_base64(origin);
console.log(encoded_str); // ${encoded_str}
const decoded_str = decrypt_from_base64(encoded_str);
console.log(decoded_str === origin);
appendResult(encoded_str);
}
run(); // checkout console for result
</script>
``` |
|
