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

フロントからバックエンドまで
— 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で広がる可能性

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from IIJ

More from IIJ (20)

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