WebAssembly outside of the browser

Transcript

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

2. 2 何をしてきた？ • インターンシップ @ Google ◦ Chrome OS /

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

3. 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. 4 What is WebAssembly? • Webブラウザで動くバイトコード • スタックベース仮想マシンのバイナリ形式 (.wasm) ◦

   テキスト形式 (.wat) も定義 • コンパイラのターゲット言語 ◦ 自分で書くのではなく、コンパイラが生成する ◦ C, C++, Rustだけでなく、様々な言語から生成でき る ▪ appcypher/awesome-wasm-langs

5. 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. 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. 7 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス

   ◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html

8. 8 Why WebAssembly is Fast? • バイトコードである ◦ より機械語に近いため、変換が速い •

   バイナリサイズが小さい ◦ サーバーからダウンロードする速度が速くな る ◦ スタックマシンはサイズが小さくなりやすい • Streaming compilation + 今後更なる機能の追加

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

10. 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. 11 WebAssembly Sections • WebAssemblyのバイナリフォーマットのおかげ で、Streaming compilationを可能にしている • バイナリは複数のセクションから成り立つ ◦

    11個の決められたセクション ▪ 各セクションは必須ではない ▪ 各セクションは決められた順に並んでい ないといけない ◦ 任意のセクション

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

13. 13 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8 Import 他モジュールに定義 されている関数をイン ポートする Code

    関数本体 1番バイナリが大きく なる可能性があるた め、後方に配置 インポート情報を早く知ることで、並列コンパイルが可能 Type 引数と返り値の 型情報

14. 14 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス

    ◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html

15. 15 Why WebAssembly is Safe? • サンドボックス環境 ◦ メモリ空間の分離 •

    Control Flow Integrity ◦ 制御フローの制限

16. 16 Why WebAssembly is Safe? Memory isolation • WebAssemblyはホスト環境のメモリには直接ア クセスできない

    • 代わりに単なるバイト列として表されるLinear memoryを使用できる • Linear memoryの範囲は64KiB×ページ数 ◦ ホスト環境がページ数の初期値と最大値を 指定できる ◦ 範囲を超えてのアクセスは禁止

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

18. 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. 19 WebAssembly is... • Webブラウザで動く、スタックベース仮想マシンのバイナ リ形式 ◦ 速い ◦ 安全

    • ツールチェーンや仕様がどんどん充実してきている • Webブラウザだけで使うのはもったいなくない…？

20. 20 WebAssembly runtime for outside of the browser • ブラウザにWebAssemblyを動かすランタイムが内包

    • ブラウザ外で動かすためにはWebAssemblyのランタイムが 必要 ◦ Wasmer ▪ Wasmer社によって開発 ◦ Wasmtime ▪ Bytecode allianceコミュニティによって開発 • Mozilla、Fastly、Intel、RedHatがメンバー

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

22. 22 Use cases: WebAssembly outside of the browser • コマンドラインツールを作る

    • 他の言語との統合 ◦ GoやPythonからWasm関数を呼び出す ◦ なんと、PostgreSQLからWasm関数を呼び 出す拡張ツールも • サーバー上で動かす • ブロックチェーンで使う ◦ EthereumにおけるSolidityの代わり

23. 23 Client-side JavaScript WebAssembly Server-side Node.js wasmer / wasmtime Use

    cases: WebAssembly outside of the browser ＼ Node.jsの歴史の再来 ／

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

    https://diveintodocker.com/

25. 25 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime https://diveintodocker.com/

26. 26 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime ファイルアクセスやネットワークは？

27. 27 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime ファイルアクセスやネットワークは？ WASIによってできるようになります

28. 28 WASI: WebAssembly system interface • WebAssemblyがシステムとやりとりするためのインター フェースの標準 ◦ 例えば、putc(int

    character, FILE * stream) のよう にAPI ◦ POSIXみたいな感じ • WebAssembly/WASIリポジトリで仕様策定中 ◦ まだまだ始まったばかり

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

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

31. 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. 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

33. Appendix

34. 34 閑話休題: WebAssemblyのロゴ • ロゴのデザイン決定は全て GitHubのissueを 用いて行われた • JSのロゴである黄色と、色相環において補 色の関係

    ◦ JSと相補的な関係であることを表す https://github.com/WebAssembly/design/issues/980

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

36. 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