狠狠撸

フロントからバックエンドまで
— WebAssemblyで広がる可能性
YAMAMOTO Yuji (山本悠滋)
2020-12-16 IIJ Technical WEEK 2020 DAY 3

Copyright ? 2020 IIJ Innovation Institute Inc.
はじめまして！
? 山本悠滋 (@igrep)
? 所属: IIJ-II 技術開発室
? 趣味ではHaskeller歴約8年

私とWebAssembly
? WASIが発表されたあたり（2019年の春頃）くらいから
WebAssemblyに強い関心が
? 仕様を追いかけてみたり少しフィードバックしたり
? WebAssemblyを使った新しいウェブサービスを模索中
? 趣味ではWebAssemblyをArm32にコンパイルするコンパイラー
をゆっくり開発
? 先週WebAssembly nightというイベントで発表しました

?今日話すこと
? そもそもWebAssemblyとは
? 現在のWebAssemblyの活躍
? なぜ安全か
? ウェブブラウザー以外における活躍
? これからの活躍

そもそもWebAssemblyとは
? ウェブブラウザー上でJavaScriptのように（プラグインなしで）動
作させることを目的として作られた命令セットと、そのバイナリー
フォーマット
? 2017年11月、主要な4つのウェブブラウザー（Chrome?Firefox?
Safari?旧Edge）がver. 1.0をサポート
? 2019年12月、W3CによりHTML?CSS?JavaScriptに続く「ウェブ
ブラウザーで動く4つめの言語」として標準化
? World Wide Web Consortium (W3C) brings a new language to the Web
as WebAssembly becomes a W3C Recommendation

現在のWebAssemblyの活躍
? Google Meet
? FFMPEG.WASM
? Blazor WebAssembly
? Showcase | Magnum Engine

Google Meet
Google AI Blog: Background Features in Google Meet, Powered by
Web ML
? 背景ぼかし機能の実装にWebAssemblyが！
? C++で書かれたGoogle製機械学習フレームワーク MediaPipe
をWebAssemblyにコンパイルして実現
? 関連: WebAssemblyでの機械学習モデルデプロイの動向

FFMPEG.WASM
https://ffmpegwasm.github.io/
? 様々なコーデックを利用して動画や音声の変換ができるCLIツー
ル ffmpeg をWebAssemblyに移植！
? 動画のエンコードなどが全部ウェブブラウザー上で完結！

Blazor WebAssembly
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-
models?view=aspnetcore-5.0
? ASP.NET Core Blazor: C#?F#向けウェブアプリケーションフレ
ームワーク
? クライアントもサーバーも概ねC#で書ける
? 実行モデルを切り替えれば主要な処理をサーバーで実行したり
WebAssemblyで実行したりと切り替えられる

Showcase | Magnum Engine
https://magnum.graphics/showcase/
? 「Magnum Engine」というC++向けグラフィックスエンジンのサン
プル集

なぜ安全か
? ホストのAPIからの分離
? ホストのデータからの分離
? index空間の分離

なぜ安全か
用語
? ホスト: ウェブブラウザーなど、WebAssemblyを動作させること
ができるプログラム
? 後述のとおりブラウザー以外でもWebAssemblyを動かすプログラムがある
? index空間: 配列の添え字(index)の集合
? e.g. 長さ50の配列であれば0から49までの50個のindexの集合
? 「名前空間」の「名前」を文字列から整数に置き換えたバージョン
? WAT
? 「WebAssembly Text Format」の略
? WebAssemblyはバイナリーフォーマットなので直接人間が読むのは難しい
ため、テキストファイルとして読めるよう翻訳したもの
? 「普通の機械語」に対する「アセンブリー」と同じ役割

ホストのデータからの分離
WebAssemblyでは
? 原則: ホストのメモリーには勝手にアクセスできない！
? ホストとデータをやりとりしたくなったら
? Memoryオブジェクトが表す、割り当てられた専用の領域を使う
? ホスト側でサイズを指定して作って、WebAssemblyを呼ぶときに渡す

コード例 (WAT):
この行でMemoryをimportする必要が
あることを明示

コード例 (Node.js):
ここでMemoryを作って
ここでimport
ここで書き込み
出力: 7

ホストのAPIからの分離
普通の機械語では
? リンクした関数やOSのシステムコールは原則どのモジュールも
呼べちゃう！
? あなたがダウンロードした悪質なプログラムが、意図しない関数
を呼ぶかも知れない！
※アセンブリーの内容に特に意味はありません

ホストのAPIからの分離
WebAssemblyでは
? 明示的にimportした外部の関数しか呼べない！
? 何も明示しない限りは何もできない
? ※もう一つ、間接呼び出しを実現するためのTableという機能が
ありますが割愛
ここでimportした関数しか呼べない！

index空間の分離
普通の機械語では
? 概ねどこにでもジャン
プ（goto）できるように
作られている
? ※CPUによって細かい
制約はありますが
? ?プログラムに脆弱性
があると、攻撃者によ
ってジャンプ先を意図
しないアドレスに書き
換えられてしまう
※アセンブリーの内容に特に意味はありません

WebAssemblyでは
? 関数呼び出しやブロッ
クを抜け出したいとき
に使う命令毎に「
index空間」が分かれ
ている
? 図における(call
0)の0と(br 0)の0
は完全に別の配列へ
のindexとして解釈さ
れる

関数呼び出し命令callの場合
? callの引数に渡せるのは、関数専用のindexだけ！
? (func …)で定義した関数の他importした関数が含まれる
? 関数専用のindex空間が区切られている

ブロックから抜け出す命令brの場合
? brに渡せるのは、brを囲っているブロックのうち、「内側から何
番目のブロックから抜け出すか」を表すindexのみ指定できる
? 図ではbrしている箇所で3つのblockに囲われているので0, 1, 2のい
ずれか

ウェブブラウザー以外における活躍
? PostgreSQL
? Envoy Proxy
? Krustlet
? WASI

PostgreSQL
Announcing the first Postgres extension to run WebAssembly
? PostgreSQLのSQLからWebAssemblyで定義した関数が呼べ
る！

Envoy Proxy
Istio / Redefining extensibility in proxies - introducing
WebAssembly to Envoy and Istio
? Microservice向けのプロキシサーバー
? 「独自の認証?認可機構を使いたい」?「標準でサポートされてないプロトコル
を扱いたい」といったケースのために、拡張機能が
? 従来:
? C++で拡張を書いて静的リンク
? => 速いけどリビルドが必要で気軽じゃない
? Mixerというアダプターにprotobufでメッセージを送る
? => 気軽だけど遅い
? WebAssemblyなら
? デプロイも簡単で動作も速い
? いろいろな言語をサポートできる
? 一般化するために仕様も策定中:
? https://github.com/proxy-wasm

Krustlet
What is Krustlet?
? KubernetesのノードとしてのWebAssembly処理系wasmtimeを
動かす
? Dockerのimageの代わりに、WebAssemblyのモジュールをとっ
てきてKubernetesクラスターにデプロイできる

WASI
WASI: WebAssembly System Interface
? WebAssemblyがPOSIX風のAPIを利用できるようにするための
標準仕様
? importしない限りprintfとかopenとかが使えない！
? => importする関数の名前や型を決めましょう！
? WebAssemblyがアクセスできるファイル?ディレクトリーを制限す
る機能を提供することで、セキュリティーを保つ
? importしないとホストのAPIを利用できないのと同様に、ファイル?ディレク
トリーにもホストが明示的な許可を与える仕組みを

これからの活躍
? Docker v.s. WebAssembly
? Shopify
? Flash Playerの移植
? まだまだパーツが足りない
? WASIのさらなる発展
? 他の言語処理系を埋め込みやすく
? ホストとの連携を強める

Docker v.s. WebAssembly
DockerのCo-founder, Solomon HykesさんのTwitterでの発言
? 「2008年にWebAssemblyとWASIがあれば、Dockerを作る必要
はなかっただろう」
? Krustletのような仕組みが発達すれば、コンテナーの代わりに
WebAssemblyという時代が来る？

Shopify
Making Commerce Extensible with WebAssembly, Mitch Dickinson
- YouTube
? テナントのいろいろな要求をテナント側のコードで実現するため
に、Shopifyのサーバーで動くWebAssemblyによるプラグイン機
構を構築中
? Web APIで実現するよりも高速！

Flash Playerの移植
ruffle-rs/ruffle: A Flash Player emulator written in Rust
? 2020年末（もうすぐ！）サポートが終了するFlash Player
? Flashの資産をなくさないためWebAssemblyでエミュレート！
? WebAssemblyでできること以上のことはできないので、あらゆる
Flashが動くわけではないはず
? 危険なFlashが動く可能性がその分低いということ！

まだまだパーツが足りない
? 「活躍」とはいったものの、実験的なものが大半で、広く使われる
には至っていない
? CやC++, Rustなど以外の言語を動かすとWebAssemblyのサイ
ズが膨らんでしまったり、
? ホストとWebAssembly間のデータの受け渡しが煩雑だったり、
など多くの問題が

WASIのさらなる発展
? 現状はファイルシステムや乱数、環境変数やコマンドライン引数
の処理が中心
? ソケットに接続したり、リッスンするAPIは策定中！
? feat(socket): berkeley socket API by 3miliano ? Pull Request #312 ?
WebAssembly/WASI

他の言語処理系を埋め込みやすくする
? Exception
? Exception handling
? 例外のcatch/throw
? GC
? GC Extension
? ガーベージコレクター。多くのプログラミング言語における縁の下の力持ち
? これらの機能が追加されることで、これらの機能が必要な言語を
WebAssemblyにし安く！

ホストとの連携を強める: reference-types
WebAssembly Reference Types in Wasmtime
? externrefという「演算はできないポインターのようなもの」を表
す特殊な型が追加
? e.g. ウェブページにおけるElementへの参照
? importしたホストのAPIをWebAssemblyでラップできるように！
? FirefoxやWasmtimeが実装済み！

ホストとの連携を強める: interface types
Interface Types Proposal
? WebAssemblyは整数や浮動小数点数（と、前述のexternref）しか
扱えない
? 例えば文字列を扱おうと思ったら、一旦Memoryに書き込んだあと、アドレス
を整数として渡す必要が
? => 面倒なボイラープレートに！
? 型宣言と、型の値を相互変換する際の仕様を標準化！
? => WebAssembly製の関数があたかも文字列などを直接扱えるかのように
見せるラッパーを提供

まとめ
? WebAssemblyは、ウェブブラウザーだけでなく、様々な種類の
アプリケーションにおける拡張機構としての役割が期待されてい
る
? 脆弱なWebAssemblyを実行してもユーザーに悪影響がないよう
に、工夫が凝らされた仕様となっている
? まだまだ足りない機能がたくさんあるので、更なる追加機能が検
討されている
? もっと多くのプログラミング言語をWebAssemblyで実装しやすくなって、
? もっと簡単にホストと連携できるようになりそう

参考（言及していないもののみ）
? C#でSPAが実現できる、Blazor WebAssemblyのはじめかた
(1/3)：CodeZine（コードジン）
? Istioldie 1.6 / Mixer Configuration Model (Deprecated)
? Istioldie 1.6 / Mixer Adapter Model
? Proxy-Wasm: Wasmを利用したPlugin機構の開発
? Control Flow Integrity (CFI) | Karamba Security
? たのしいバイナリの歩き方
? Security - WebAssembly
? Memory in WebAssembly (and why it’s safer than you think)
- Mozilla Hacks - the Web developer blog
? krustlet/architecture.md at master ? deislabs/krustlet
? Bytecode Alliance

狠狠撸

フロントからバックエンドまで - WebAssemblyで広がる可能性

More Related Content

フロントからバックエンドまで - WebAssemblyで広がる可能性