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

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

背景

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

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

目標

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

思考

端側開放到底解決什麼問題，我理解開放技術在端側主要圍繞這2個點：如何讓外部程式碼安全的可控的執行 、 使用者資料的安全如何保障，做到無端不透；

1. 關於第一個點落實到細節是 JavaScript/CSS/HTML 如何執行的問題。我的解法是：JavaScript 執行在 Webassembly+QuickJS 安全容器裡，基於 Webassembly 的安全水位保障 JS 執行的隔離和可控；CSS 基於 Shadow DOM + iframe 做到樣式隔離。

2. 資料安全主要依託瀏覽器容器環境對資料做加簽驗籤加密操作，本文章不展開講解；

技術細節

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

▐    WebAssembly

圖來源地址（http://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

系統	L-PC1328H5-1417 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz   1.80 GHz Qianniu/9.05.02N
平臺/Case	型別	PC 小程式 (V8)(JIT)	PC 小程式 localwebview (Webkit)(JIT)	WebContainer (AOT)
核心資訊	型別	AliApp(QN/9.5.2) Ariver/1.0.0.5 Platform/PC	Chrome/90.0.4430.93 AppleWebKit/537.36 (KHTML, like Gecko)	Chrome/90.0.4430.93 AppleWebKit/537.36 (KHTML, like Gecko)
testStringIndexOf	VM	813,394,664 ops/sec	807,470,265 ops/sec	6,424,450 ops/sec
testStringMatch		24,794,109 ops/sec	19,488,381 ops/sec	556,760 ops/sec
testRegExp		38,638,752 ops/sec	38,599,956 ops/sec	761,215 ops/sec
testDOM		/	2,346,600 ops/sec	14,307 ops/sec
MessageChannel	通訊	702 ops/sec	286 ops/sec	101,536 ops/sec

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

業務落地

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

未來

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