建設下一代 Web 開放技術——WebContainer

基於 Webassembly + QuickJS 的 Web 安全沙箱技術方案，面向 Web 端建設下一代開放技術

背景

Web 端側的開放技術長期以來一直在尋找最好的解決方案，從早期基於 Webview + API 管控 的開放形式 ，到目前基於小程序的重容器的架構方案。或多或少都無法全面的解決開發者體驗的問題，API 開放形式無法做到安全管控，小程序開放形式的架構必然會給業務帶來孤島效應。如何給開發者帶來更好的研發體驗、給商家帶來更好的產品體驗一直是我們淘寶開放技術前端團隊的命題。

經過半年的技術演進和業務落地，我們自研了一套基於 Webassembly + QuickJS 的架構方案，來解決上述的問題。

目標

三年的小程序形式開放基礎已經形成了規模化壁壘，落地新的技術方案必然考慮到成本問題，所以本次架構升級的目標可以描述爲 “面向 Web 端建設下一代 PC 開放技術，建設基於 W3C 標準的 Web 技術三方開放方案，與小程序、小部件開放形態互補，構建電商域的完整開放技術生態”。

思考

端側開放到底解決什麼問題，我理解開放技術在端側主要圍繞這 2 個點：1. 如何讓外部代碼安全的可控的執行；2. 用戶數據的安全如何保障，做到無端不透；

  1. 關於第一個點落實到細節是 JavaScript/CSS/HTML 如何執行的問題。我的解法是：JavaScript 運行在 Webassembly+QuickJS 安全容器裏，基於 Webassembly 的安全水位保障 JS 執行的隔離和可控；CSS 基於 Shadow DOM + iframe 做到樣式隔離。
    2. 數據安全主要依託瀏覽器容器環境對數據做加簽驗籤加密操作，本文章不展開講解；

技術細節

工欲其事必先利器，我們先對技術底層細節做一個瞭解

WebAssembly


圖來源地址（https://medium.com/jspoint/the-anatomy-of-webassembly-writing-your-first-webassembly-module-using-c-c-d9ee18f7ac9b）

這裏重點提到 2 個事情：

  1. WebAssembly 二進制碼會經過 Liftoff 生成未優化的 ByteCode，再給到 TurboFan 優化代碼編譯爲機器碼

  2. WebAssembly 和 JavaScript 的編譯後端是共享的，WebAssembly 的盡頭是和架構相關的機器碼，這裏是一個關鍵點也是 VM 和 HOST 同步調用的關鍵點。

WebContainer 架構

本質上我們會以 App 級別的思想來架構方案（多頁面、路由、通信），底層運行時基於 QuickJS ，涉及到多頁面管理、鑑權、內存分析等等。

Binding 細節

外部代碼的 Runtime 會運行到 Quickjs 裏，執行環境需要仿真和瀏覽器環境一致，這個時候涉及到 API Binding 設計，在 HOST JavaScript Runtime 定義 W3C 規範，通過 WebAssembly 的內存 Binding 到 Quickjs Runtime 中，當外部代碼調用對應方法時，會映射到 HOST 實現，通過安全管控策略再執行到 HOST 環境中。

研發模式

WebContainer 的本質要解決開發者體驗問題，做到上層框架無關，所以在安全的水位上我們不會約束今天開發者的框架體系。但是我們需要定義 App Export 的接口。

Benchmark

kxUlMi

相對於純小程序的通信效率提升 355 倍，但是受到安全容器的限制 JS 執行相對於底層 V8 引擎降低到 1%，但是也是足夠用於生產環境的。

業務落地

在商傢俬域場景，我們已經在旺鋪裝修表單落地，目前 ISV 反饋非常不錯，業務平臺未來會全量替換到新開放容器中。

未來

繼續基於 WebContainer 能力做上層開放體系的建設，解決插件體系。解決啓動耗時的問題。技術底層完善 Quickjs Debug 能力。

Alibaba F2E 阿里巴巴前端官方公衆號

關注「Alibaba F2E」微信公衆號把握阿里巴巴前端新動向

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/GzcciDDjnBicvuyXLdTaTA

猜你喜歡