為保障資料安全，網頁上顯示的圖片，音訊等敏感資訊，需要做加密，在網頁端呼叫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);
 }
 

感謝您的認真閱讀。

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

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