基於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);
 }

---

感謝您的認真閱讀。

如果你覺得有幫助，歡迎點贊支持！

不定期分享軟件開發經驗，歡迎關注作者, 一起交流軟件開發：