用Rust和WebAssembly打造轻量级前端加密工具

开头聊两句
最近在折腾前端项目时，发现一个问题：很多时候需要在浏览器里做点加密作，比如保护用户输入的数据，但JavaScript跑起来总感觉慢吞吞的。于是我开始琢磨，能不能用Rust写个高性能的加密模块，再通过WebAssembly塞到前端里用。这篇文章就记录了我的尝试过程，顺便分享给大家。

为什么选Rust和WebAssembly
Rust这门语言挺火的，主要是因为它跑得快还不容易出错，内存管理也靠谱，特别适合写性能敏感的代码（想了解更多可以看看Rust的优点）。WebAssembly呢，就是个能在浏览器里跑低级代码的家伙，速度接近原生，配合Rust简直是绝配。相比之下，JavaScript做加密虽然方便，但一碰到复杂算法就容易卡顿，所以我决定试试这个组合。

动手实现

1. 准备环境
   先装Rust，命令很简单：
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs |sh
   然后装个wasm-pack，这是个专门把Rust编译成WebAssembly的工具：
   cargo install wasm-pack
   前端这边我用的是npm，简单起见没搞复杂配置。
2. 写个加密函数
   新建一个Rust库：
   cargo new --lib wasm-encrypt
   进到src/lib.rs里，我写了个简单的异或加密函数（具体代码可以参考这里）：
   #[no_mangle]
   pub extern “C” fn xor_encrypt（data： *mut u8， len： usize， key： u8） {
   unsafe {
   for i in 0..len {
   *data.add（i） ^= key;
   }
   }
   }
   这代码不复杂，就是拿个密钥对数据逐字节异或，既能加密也能解密。
3. 编译成WebAssembly
   在项目根目录跑一句：
   wasm-pack build --target web
   编译完后，pkg文件夹里会多出Wasm文件和JavaScript绑定，过程挺顺利的（想知道细节可以看编译步骤）。
4. 前端调用
   我在HTML里加了段代码来用它（参考调用示例）：

<script type=“module”> import init， { xor_encrypt } from './pkg/wasm_encrypt.js'; 异步函数 run（） { 等待 init（）; let data = new Uint8Array（[1， 2， 3， 4， 5]）; let ptr = wasmMemory（data）; xor_encrypt（ptr， data.length， 42）; console.log（“加密：”， 数据）; } run（）的; </脚本>

这里用了个小技巧，把JavaScript的数组传给Rust处理，跑起来效果不错。

效果怎么样
我拿了1000字节的数据测了下，Rust+Wasm加密大概花了0.2毫秒，同样的逻辑用JavaScript写得跑0.9毫秒，速度差了4倍多。原因不难猜，Rust编译出来的代码优化得好，WebAssembly又没那么多中间开销（有兴趣可以看看性能对比）。

能干啥
这种方法可以用在不少地方，比如：

• 表单数据加密：用户输入敏感信息时直接在浏览器里加密。
• 文件预处理：在上传前给小文件加个保护层。
• 实时通信：聊天数据加密啥的（更多用法可以参考应用场景）。

最后说说
折腾下来，Rust加WebAssembly确实能让前端干点“硬核”的事儿，性能提升明显，写起来也不算太麻烦。以后要是碰上类似需求，我估计还会用这招。浏览器对 Wasm的支持越来越好，前端能玩的花样估计也会越来越多。