用go語言實現(xiàn)WebAssembly數(shù)據(jù)加密的示例講解

更新時間：2024年03月18日 10:50:29 作者：qinyuan15

在Web開發(fā)中,有時候為了提升安全性需要對數(shù)據(jù)進行加密,由于js代碼相對比較易讀,直接在js中做加密安全性較低,而WebAssembly代碼不如js易讀,本文提供一個用go語言實現(xiàn)的WebAssembly數(shù)據(jù)加密示例,需要的朋友可以參考下

一、背景和意義

在Web開發(fā)中，有時候為了提升安全性需要對數(shù)據(jù)進行加密。由于js代碼相對比較易讀，直接在js中做加密安全性較低，而WebAssembly代碼不如js易讀，使用WebAssemply做數(shù)據(jù)加密對安全性有一定的提升（不過熟悉WebAssembly的人還是能看懂加解密過程）。本文提供一個用go語言實現(xiàn)的WebAssembly數(shù)據(jù)加密示例。

二、創(chuàng)建WebAssembly文件

創(chuàng)建一個空目錄，執(zhí)行如下命令初始化go模塊：

go mod init wasm-demo

接下來在當前目錄下創(chuàng)建main.go文件，提供數(shù)據(jù)加密與解密的方法：

package main

import (
   "bytes"
   "crypto/aes"
   "crypto/cipher"
   "encoding/hex"
   "fmt"
   "syscall/js"
)

var aesCode = "0000000000000000" // 作為demo，這里只用16個0作為密鑰

// pkcs5Padding 對數(shù)據(jù)進行填充，使其長度為塊大小的倍數(shù)。
func pkcs5Padding(cipherText []byte, blockSize int) []byte {
   padding := blockSize - len(cipherText)%blockSize
   padText := bytes.Repeat([]byte{byte(padding)}, padding)
   return append(cipherText, padText...)
}

// pkcs5UnPadding 移除填充數(shù)據(jù)。
func pkcs5UnPadding(decrypted []byte) []byte {
   length := len(decrypted)
   unPadding := int(decrypted[length-1])
   return decrypted[:(length - unPadding)]
}

// aesDecrypt 加密
func aesEncrypt(encryptStr string) (string, error) {
   encryptBytes := []byte(encryptStr)
   block, err := aes.NewCipher([]byte(aesCode))
   if err != nil {
      return "", err
   }

   blockSize := block.BlockSize()
   encryptBytes = pkcs5Padding(encryptBytes, blockSize)

   blockMode := cipher.NewCBCEncrypter(block, []byte(aesCode)[:blockSize])
   encrypted := make([]byte, len(encryptBytes))
   blockMode.CryptBlocks(encrypted, encryptBytes)
   return hex.EncodeToString(encrypted), nil
}

// aesDecrypt 解密
func aesDecrypt(decryptStr string) (string, error) {
   decryptBytes, err := hex.DecodeString(decryptStr)
   if err != nil {
      return "", err
   }

   block, err := aes.NewCipher([]byte(aesCode))
   if err != nil {
      return "", err
   }

   blockMode := cipher.NewCBCDecrypter(block, []byte(aesCode)[:block.BlockSize()])
   decrypted := make([]byte, len(decryptBytes))

   blockMode.CryptBlocks(decrypted, decryptBytes)
   decrypted = pkcs5UnPadding(decrypted)
   return string(decrypted), nil
}

func jsFunc(handler func(string) (string, error)) js.Func {
   return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
      var result string
      var err error
      if len(args) > 0 {
         result, err = handler(args[0].String())
      }
      return js.ValueOf(map[string]interface{}{
         "result": result,
         "err":    err,
      })
   })
}

func main() {
   fmt.Println("Go wasm loaded!")
   js.Global().Set("aesEncrypt", jsFunc(aesEncrypt))
   js.Global().Set("aesDecrypt", jsFunc(aesDecrypt))
   <-make(chan bool)
}

如果是在goland中編輯此代碼，需要在Settings中設置一下Build Tags，將OS設置為js，Arch設置為wasm，否則代碼編輯器里的syscall/js會標紅：

接下來執(zhí)行如下命令生成wasm文件main.wasm：

GOOS=js GOARCH=wasm go build -o main.wasm

三、在前端頁面中使用WebAssemply的加解密方法

執(zhí)行如下命令將go目錄下的wasm_exec.js復制過來到當前目錄：

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

接下來創(chuàng)建前端代碼index.html文件：

<!DOCTYPE html>
<html lang="utf8">
    <head>
        <title>wasm demo</title>
        <script src="wasm_exec.js"></script>
        <script>
            const go = new Go();
            WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then(result => {
                go.run(result.instance);
                const encrypt = aesEncrypt("HelloWorld");
                console.log("encrypt result: ", encrypt);
                console.log("decrypt result: ", aesDecrypt(encrypt.result));
            });
        </script>
    </head>
    <body></body>
</html>

將當前目錄添加到nginx中，然后通過nginx提供的端口訪問index.html，可以看到控制臺輸出加解密的結果如下：