WebAssembly outside of the browser カーネル/VM探検隊@関西 2020/02/08 @d0iasm

2 何をしてきた？ ● インターンシップ @ Google ○ Chrome OS / Chrome browser ● Coreboot (オープンソースBIOS) 開発 @ GSoC 今は何してる？ ● インターンシップ @ Wasmer ● RISC-Vエミュレータ開発 @趣味 ● 修論発表準備 @ 大学 Doi Asami @d0iasm

3 rvemu: RISC-V Emulator on the Web ● 現在RV64Gをサポート ● まだ実用レベルでは無い ● ほとんどの部分がRustで書 かれている Emulate 32-Bit And 64-Bit RISC-V In Your Browser With Asami’s Open Source rvemu | Gareth Halfacree, Hackster.io Rustで書かれているのにな ぜWebブラウザ上で動く？ → WebAssemblyを使用し ているから

4 What is WebAssembly? ● Webブラウザで動くバイトコード ● スタックベース仮想マシンのバイナリ形式 (.wasm) ○ テキスト形式 (.wat) も定義 ● コンパイラのターゲット言語 ○ 自分で書くのではなく、コンパイラが生成する ○ C, C++, Rustだけでなく、様々な言語から生成でき る ■ appcypher/awesome-wasm-langs

5 .wasm and .wat C++ Text (.wat) Binary (.wasm) int factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); } get_local 0 i64.const 0 i64.eq if i64 i64.const 1 else get_local 0 get_local 0 i64.const 1 i64.sub call 0 i64.mul end 20 00 42 00 51 04 7e 42 01 05 20 00 20 00 42 01 7d 10 00 7e 0b https://webassembly.org/docs/text-format/

6 ● Fast, safe, and portable semantics: ○ Fast ○ Safe ○ Well-defined ○ Hardware-independent ○ Language-independent ○ Platform-independent ○ Open ● Efficient and portable representation: ○ Compact ○ Modular ○ Efficient ○ Streamable ○ Parallelizable ○ Portable Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html

7 ● Fast, safe, and portable semantics: ○ Fast: ネイティブコードに近いパフォーマンス ○ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html

8 Why WebAssembly is Fast? ● バイトコードである ○ より機械語に近いため、変換が速い ● バイナリサイズが小さい ○ サーバーからダウンロードする速度が速くな る ○ スタックマシンはサイズが小さくなりやすい ● Streaming compilation + 今後更なる機能の追加

9 Why WebAssembly is Fast? Bytecode https://hackernoon.com/webassembly-the-journey-what-is-wasm-caf9871108aa

10 (func $sum (; 0 ;) (param $0 i32) (param $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ) ) (func $sub (; 1 ;) (param $0 i32) (param $1 i32) (result i32) (i32.sub (get_local $0) (get_local $1) ) ) wasm-function[0]: sub rsp, 8 mov ecx, esi mov eax, ecx add eax, edi nop add rsp, 8 ret ● コードの全てが届くのを待つのではなく、届 いた順にコンパイルする .wasm machine code Why WebAssembly is Fast? Streaming Compilation

11 WebAssembly Sections ● WebAssemblyのバイナリフォーマットのおかげ で、Streaming compilationを可能にしている ● バイナリは複数のセクションから成り立つ ○ 11個の決められたセクション ■ 各セクションは必須ではない ■ 各セクションは決められた順に並んでい ないといけない ○ 任意のセクション

12 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8

13 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8 Import 他モジュールに定義 されている関数をイン ポートする Code 関数本体 1番バイナリが大きく なる可能性があるた め、後方に配置 インポート情報を早く知ることで、並列コンパイルが可能 Type 引数と返り値の 型情報

14 ● Fast, safe, and portable semantics: ○ Fast: ネイティブコードに近いパフォーマンス ○ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html

15 Why WebAssembly is Safe? ● サンドボックス環境 ○ メモリ空間の分離 ● Control Flow Integrity ○ 制御フローの制限

16 Why WebAssembly is Safe? Memory isolation ● WebAssemblyはホスト環境のメモリには直接ア クセスできない ● 代わりに単なるバイト列として表されるLinear memoryを使用できる ● Linear memoryの範囲は64KiB×ページ数 ○ ホスト環境がページ数の初期値と最大値を 指定できる ○ 範囲を超えてのアクセスは禁止

17 Why WebAssembly is Safe? Memory isolation https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

18 Why WebAssembly is Safe? Control flow integrity ● 制御フローを制限することで、Control hijacking attacks（攻撃者が任意のコードを実行すること） を防ぐ ■ Return oriented programming ● コールスタックはメモリ上に存在しない ● アクセスする全ての関数と型の宣言が必要 call $hoge 関数hoge code code function table 0 1 2 hoge(i32, i32) -> i32

19 WebAssembly is... ● Webブラウザで動く、スタックベース仮想マシンのバイナ リ形式 ○ 速い ○ 安全 ● ツールチェーンや仕様がどんどん充実してきている ● Webブラウザだけで使うのはもったいなくない…？

20 WebAssembly runtime for outside of the browser ● ブラウザにWebAssemblyを動かすランタイムが内包 ● ブラウザ外で動かすためにはWebAssemblyのランタイムが 必要 ○ Wasmer ■ Wasmer社によって開発 ○ Wasmtime ■ Bytecode allianceコミュニティによって開発 ● Mozilla、Fastly、Intel、RedHatがメンバー

21 WebAssembly is Neither Web nor Assembly “WebでもAssemblyでもないWebAssembly” https://www.infoq.com/presentations/webassembly-intro/

22 Use cases: WebAssembly outside of the browser ● コマンドラインツールを作る ● 他の言語との統合 ○ GoやPythonからWasm関数を呼び出す ○ なんと、PostgreSQLからWasm関数を呼び 出す拡張ツールも ● サーバー上で動かす ● ブロックチェーンで使う ○ EthereumにおけるSolidityの代わり

23 Client-side JavaScript WebAssembly Server-side Node.js wasmer / wasmtime Use cases: WebAssembly outside of the browser ＼ Node.jsの歴史の再来 ／

24 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い https://diveintodocker.com/

25 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い WebAssembly WebAssembly runtime https://diveintodocker.com/

26 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い WebAssembly WebAssembly runtime ファイルアクセスやネットワークは？

27 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い WebAssembly WebAssembly runtime ファイルアクセスやネットワークは？ WASIによってできるようになります

28 WASI: WebAssembly system interface ● WebAssemblyがシステムとやりとりするためのインター フェースの標準 ○ 例えば、putc(int character, FILE * stream) のよう にAPI ○ POSIXみたいな感じ ● WebAssembly/WASIリポジトリで仕様策定中 ○ まだまだ始まったばかり

Co-founder of Docker “もしWASMとWASIが2008年に存在してたら、Docker は必要なかっただろう ” 29

30 WebAssemblyをブラウザの 外で使う流れがきている！ @d0iasm

31 ● https://webassembly.github.io/spec/core/intro/introduction.ht ml ● https://www.infoq.com/presentations/webassembly-intro/ ● https://hacks.mozilla.org/2018/01/oxidizing-source-maps-wit h-rust-and-webassembly/ ● https://livebook.manning.com/book/webassembly-in-action/ chapter-2/8 ● https://hacks.mozilla.org/2017/02/what-makes-webassembl y-fast/ ● https://hacks.mozilla.org/2017/02/where-is-webassembly-no w-and-whats-next/ Reference

32 ● https://calendar.perfplanet.com/2017/tracking-cpu-with-long -tasks-api/ ● https://hackernoon.com/webassembly-the-journey-what-is- wasm-caf9871108aa ● https://hacks.mozilla.org/2017/07/memory-in-webassembly- and-why-its-safer-than-you-think/ ● https://diveintodocker.com/ ● https://wasi.dev/ ● https://hacks.mozilla.org/2019/03/standardizing-wasi-a-web assembly-system-interface/ スライドはslidegoのテンプレートを使用しました。 Reference

Appendix

34 閑話休題: WebAssemblyのロゴ ● ロゴのデザイン決定は全て GitHubのissueを 用いて行われた ● JSのロゴである黄色と、色相環において補 色の関係 ○ JSと相補的な関係であることを表す https://github.com/WebAssembly/design/issues/980

35 閑話休題: WebAssemblyのロゴ 没案 https://github.com/WebAssembly/design/issues/980 https://github.com/WebAssembly/design/issues/112

36 https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/ Speed: JavaScript vs WebAssembly ● 赤色がJS ● 青緑色がWasm ● Wasmのほうが標準偏 差が小さい ○ 予測しやすい！ January 18, 2018 の記事のため、 今は結果が異なるかも Chrome Firefox Safari