使用WebAssembly保护前端JS核心代码实战

前言

上个月我花了2天开发了一个全新的VSCode插件叫“我爱掘金”，让所有掘友可以化身为小蝌蚪，在VSCode里实时聊天。使用的是一个开源项目 workerman-todpole ，在原项目的基础上我做了大量的修改和优化。也曾试图添加一些房管功能，比如只有管理员可以使用大红色，只有管理员可以发光等等。

但正义的掘友们很快就开始尝试各种能打破这种【不平等】待遇的方法，其中 @那猫小帅 同学还开发了各种 池塘机器人，可以在池塘里扮演给新手用户提供帮助的NPC。现在小蝌蚪大眼睛的创意也是那猫小帅同学提出的，简直棒棒哒💯。

需求

要实现房管功能，我需要实现一个方法，来生成和激活高级命令，激活后则可以获得高级权限。显然，我不想被别人看到这段代码里我是如何生成命令和校验命令的。

我也不想放到服务器上做成一个后端接口，因为每次都去请求接口会对服务器产生压力。而websocket每次收到消息时都需要去验证这个高级命令

所以，我确定了两个核心诉求

• 高级命令的生成和激活直接在前端完成，避免请求服务器。

• 不能让人看到生成和激活的核心逻辑，否则就失去了意义。

一番调研之后，发现WebAssembly可以满足我的这两点需求，接下来就是实战了。

WebAssembly介绍

WebAssembly 有一套完整的语义，并且可以生成一种 .wasm 的二进制格式，体积小且加载快， 其目标就是充分发挥硬件能力以达到原生执行效率。

运行仍然是在浏览器里，但使用一种二进制格式的.wasm文件 ，这完全能满足我的需求，并且主流浏览器对WebAssembly的兼容性很好。

比如下面这段代码，大家可以复制粘贴到浏览器的调试窗口中感受一下

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str =>&n