基于golang开发一个wasm加解密模块

为保障数据安全,网页上显示的图片,音频等敏感信息,需要做加密,在网页端调用wasm解密,然后渲染出来。
Golang原生支持编译为wasm,所以开发会比较便捷,选型时选择golang。

整体思路:

	js请求文件buffer -> buffer传给wasm -> wasm调用解密函数解密 -> js渲染解密后数据

golang wasm解密模块

开发wasm,需要先引用 "syscall/js"

函数需要

func decode(this js.Value, args []js.Value) interface{} {
	// 加密key
	keys := ([]byte)("KEY_PREFIX_" + args[0].String())
	buffer := make([]byte, args[1].Length())

	// 从js读取
	js.CopyBytesToGo(buffer, args[1])

	// ^ 示例解密函数 ( a ^ b ^ b = a)
	for i := range buffer {
		buffer[i] = buffer[i] ^ keys[i%len(keys)]
	}

	// 拷贝到js
	array := js.Global().Get("Uint8Array").New(len(buffer))
	js.CopyBytesToJS(array, buffer)

	return array
}

注意点:

  • js和golang传递buffer,需要经理CopyBytesToGo和CopyBytesToJS两个过程
  • args 是js调用的函数

main里,需要导出decode函数

func main() {
	done := make(chan int, 0)
	js.Global().Set("decode", js.FuncOf(decode))
	<-done
}

js 调用

先引用wasm_exec.js 胶水代码

<script src="wasm_exec.js"></script>

然后,加载wasm解密:

function decodeImage() {
	var oReq = new XMLHttpRequest();
	oReq.open("GET", "demo_encode.png", true);
	oReq.responseType = "arraybuffer";

	oReq.onload = function (oEvent) {
		var arrayBuffer = oReq.response; // 注意:不是oReq.responseText
		if (arrayBuffer) {
			var byteArray = new Uint8Array(arrayBuffer);
			var decodeData = decode('KEY_HERE', byteArray);
			document.getElementById("decodeJavaImage").src = URL.createObjectURL(
				new Blob([decodeData], { type: 'image/png' })
			);
		}
	};
	oReq.send(null);
 }

感谢您的认真阅读。

如果你觉得有帮助,欢迎点赞支持!

不定期分享软件开发经验,欢迎关注作者, 一起交流软件开发:

posted @ 2022-05-12 11:02  JadePeng  阅读(702)  评论(0编辑  收藏  举报