鐵人賽 Day 27 當 JavaScript 遇上 WebAssembly

2025 年 09 月 27 日

文章目錄

本系列文章所討論的 JavaScript 資安與逆向工程技術，旨在分享知識、探討防禦之道，並促進技術交流。

所有內容僅供學術研究與學習，請勿用於任何非法或不道德的行為。

讀者應對自己的行為負完全責任。尊重法律與道德規範是所有技術人員應共同遵守的準則。

什麼是 WebAssembly？

WebAssembly（縮寫為 wasm）是一種可以在瀏覽器中執行的低階二進位格式，設計目標是讓 Web 具備接近原生程式的效能。

它允許開發者將 C、C++、Rust 等語言編譯後直接在瀏覽器中跑，而不是只依賴 JavaScript。

這讓一些運算密集的功能（例如影像處理、3D 渲染、加解密演算法）可以在網頁中更快執行。

執行速度接近原生程式遠快於解釋型的 JavaScript。

只要有支援 wasm 的瀏覽器（幾乎現代瀏覽器都支援）就能執行相同模組。

不再受限於 JavaScript 能使用多種語言編譯到 wasm。

wasm 在瀏覽器中執行時仍受安全限制，不會隨意存取作業系統資源。

開發者需要熟悉編譯工具鏈對前端工程師來說比純 JavaScript 更複雜。

相較於 JavaScript，wasm 只能看到編譯後的二進位格式，即使透過 DevTools 的 WebAssembly Debugger 也不如 JavaScript 容易使用斷點追蹤。

wasm 本身無法直接操作 DOM 仍需要透過 JavaScript 做橋接。

WebAssembly 是二進制格式瀏覽器能讀但人類很難直接看懂。

為了讓開發者能讀寫與理解定義了一個對應的文字表示法，叫做 WAT (WebAssembly Text Format)。

.wat 檔案本質上就是一個人類可讀的組合語言風格程式碼與 .wasm 可以互相轉換。

int add(int a, int b) {
    return a + b;
}

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  (export "add" (func $add))
)

(func $add ...) 定義一個名為 add 的函式。

(param $a i32) (param $b i32) 表示輸入兩個 32 位元整數。

(result i32) 表示回傳一個 32 位元整數。

local.get $a 取出參數。

local.get $b 取出參數。

i32.add 執行整數加法。

(export "add" (func $add)) 匯出函式，讓 JavaScript 可以呼叫。

WebAssembly 是一種強大又安全的技術，能提升效能並保護程式邏輯。

但對資安研究員來說 wasm 提高了逆向成本，但可透過工具還原邏輯。

WebAssembly 並不是無法逆向只是更難逆向。