ブログ - セミナー

ブログニュース

投稿の詳細

未来のテクノロジー WebAssembly

投稿時間: 22:37, 09/08/2023

 WebAssembly(略称:Wasm)はwebアプリ開発分野におけるかなり新しい技術と言えるでしょう。Javascriptプログラミング言語に比べ、webアプリのパフォーマンスの良さから一般的に利用されています。これはネットワークセキュリティ分野のwebセキュリティーに対し、可能性と同時に課題も突き付けています。

 それではWebAssemblyとは具体的にどのような技術であり、どのような背景で開発され今に至るのでしょうか。今回はWebAssemblyについてクローズアップしていきます。

<目次>

  1. WebAssemblyとは?
  2. 誕生の背景
  3. WebAssemblyの利点と課題
  4. WASMの簡単な例

1. WebAssemblyとは

 これまで、デバイスにwebサイトをダウンロードする際、webブラウザはHTML、CSS、Javascript、この3つの言語が理解ができさえすれば、ユーザーとコンタクトが可能なwebアプリを制作することができました。しかし現在、webブラウザはそれに加えて新しい言語を理解できる必要があります。それがWebAssemblyです。

 WebAssemblyは現在最も一般的なブラウザであるMicrosoft、Google、Mozilla、Appleの標準フォーマットとして開発されました。Javascriptのパフォーマンス問題を解決するために生まれ、ユーザー側のデバイスの演算能力を活用します。特に動画、オーディオ、画像などのマルチメディア通信処理タスク、ゲーム、シュミレーション、アルゴリズムなどに活かされます。

2. WebAssemblyの誕生背景

 Javascriptのパフォーマンス問題を解決するために生まれたと書きましたが、Javascriptが遅いと言われる理由、それは一体なんでしょうか。

 プログラミング言語には、実行にコンパイル(コードを機械語に変換する作業)を必要とする言語としない言語の2つがあります。Javascriptはコンパイルを必要とする言語の中でも、プログラミング言語で書かれたコードを一行読んでは機械語に翻訳し実行、また一行読んでは翻訳し実行という逐次翻訳をとるインタプリタ言語であり、かつ動的型付け(プログラムを書くときに変数や関数に何が入ってくるかというのが特に決まっていない形)であるため、解析に時間がかかります。Javascriptの用途が広がると共に実行速度が問題になってきました。

 これらの問題を受け、Javascriptを高速化する目的でサブセットであるasm.js開発に至りました。数値演算系の実行速度がアップするなど、数々の利点をもたらした一方、ファイルサイズが新たな課題として浮かび上がります。

 これに替わるものとして、WebAssemblyが誕生しました。WebAssemblyはバイナリコード(二進数のコード)を使用するため、ファイルサイズの縮小化に成功したのです。

どれくらい軽くなるのか

<画像引用>https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2

3. WebAssemblyの利点

・ファイルサイズの縮小により、ロード時間が短縮化される。ただし、実行時間が早くなるわけではない。

・将来的には、JavaScriptを書かずにGC, DOM, Web API操作を目標としている

・現時点でC/C++, Rust等の言語に対応している。

WebAssemblyの課題

・どの言語で書こうが事前コンパイルが必須である。

それで、WebAssemblyの使用は?

・部分的な処理の高速化する場合(ブラウザ上の高速画像及び動画処理)

・C, C++といった他言語の既存アプリを移植する場合

・WASMでほとんどを実装し、UIなどをweb技術で実装する場合。

どれくらい速くなるのか

4. WebAssemblyの簡単な例

 WebAssemblyを理解するため、簡単な例を挙げてみます。Javascriptプログラミングで、add2num()という2つの整数の加算の関数を設定します。以下の図を見れば、ソースコードの書き方の 違いの比較ができます。

 WASM Bytecodeがブラウザが実行する最後のコード部分です。次に、WebAssemblyで書いた関数add2numをwebブラウザで実行するための操作を行います。最初に、以下の内容のmodule.watファイルを作成します。

 この部分のコードはテキストフォーマット(WebAssembly Text Format, 略してWAT)のWebAssemblyで、Lispプログラミング言語と同様のS式を使用しています。どのAseembly言語も添付テキストフォーマットで設計されており、覚えにくいバイトコードインストラクションに代わり、言語の読み取りと使用が簡単です。

 以上のコード部分では2つの32ビット整数を加算する関数を定義します:

・WebAssemblyのコードはモジュールに格納されます。ブラウザはこのモジュールに基づいてWASMを実行します。

・関数名はadd2numで、32ビット整数型のパラメーター$p0 と $p1を含みます。関数は『result』コマンドを通して32ビット整数の戻り値を返します。WASMにおいて、変数名および関数名の前に“$”マークを付けます。

・関数を呼び出す際、初期数値を含むローカルというメモリ領域があります。それは、、$p0 と $p1という関数に伝わる2つのパラメーターです。そして、get_localコマンドはこのローカル部分の値を読み取り、スタックに入れます。

・i32.addコマンドはスタック上の2つの数値、$p0 と $p1を取り出し、足し合わせて結果をスタックに入れます。関数はスタックの最上部の値($p0 と $p1の合計値)を返します。

・Exportコマンドはwasm_addによって関数add2numがモジュール外に呼び出されるよう定義します。

 以上の通り、WASMは二進法式でブラウザに格納されるので、module.watの内容を二進法式に翻訳しなければなりません。幸いにもWebAssembly Binary Toolkit(WABT)はWASMで作業するためのツールを非常にたくさん提供しており、その中のwat2wasmはWATコードをバイトコードに変換が可能になるツールです。

 下記のコマンドを実行することでmodule.watをコンパイルします

$ wat2wasm module.wat -o module.wasm

 上のようなバイトコードはかなり読みにくいので、wasm-objdumpを使用することで、二進のWASMファイルの内側にバイトコード表示し、module.wasmがより理解しやすくなります。

$ ./wabt/bin/wasm-objdump -d module.wasm

 現時点では、WASMのバイトコードはJavascriptから呼び出されます。続いて以下の内容でindex.htmlファイルを作成します。

 上のJavascript部分はmodule.wasmファイルのWASMコードをオブジェクト wasm_instanceに収め、当プロセスが成功したら、関数add2numが使えます。結果をチェックするため、作業中のフォルダーでシンプルなウェブサーバーを開いてみてください早ければ、php-cliを使います:

$ php -S 127.0.01:8888


http://127.0.0.1:8888/index.html にアクセスし、結果を確認します。ここではGoogleChromeを使用します。

 Chrome DevToolsを開き、Networkタブをチェックすると、index.htmlにアクセスした際、Javascript部分は内容が二進数方式になったmodule.wasmファイルをダウンロードしたのがわかります。次にConsoleタブに移り、ダウンロードしたWASMコードの初期化ができるか見ます。

 見てわかるように、オブジェクトwasm_instanceは初期化に成功し、WASMで書かれた関数wasm_addを含みます(出力されたadd2num関数)。関数wasm_addをConsoleで呼び出してチェックすることも可能です。

 上の例では、JavascriptはバイトコードWASMを独自のファイルから収め、同時にバイトコード列をByte Arrayを介してJavascriptに直接伝えることもできます。

 module.wasmファイルの内容をHex Array形式に遷移sするなら、Pythonが一番簡単です。

$ python -c “print [hex(ord(c)) for c in open(‘module.wasm’).read()]” | tr -d “‘”

 上記のバイトコードの格納を以下のように直接Javascriptコードに行います。

 DevTools Console使用してこのコード部分を即座にチェックすることが可能です。

 WASMコードの実行に成功しました!

 このような方法で、WASMはwebアプリに新しい局面を開きます。 もっとも名の知れたWASMのパフォーマンスDEMOはWebAssembly Video Editorです。ブラウザ上でリアルタイムでビデオの処理を行います。

まとめ

 今回のブログを通し、みなさまにWebAssemblyの概念について把握していただければ嬉しいです。情報安全という面では、これはwebセキュリティー業界の研究者たちにとって未開の最新の技術となっています。WASMはどのような影響を情報安全の分野に与えるのでしょうか?

 WASMとJavascriptはブラウザの同一のサンドボックス(Sandbox)上で実行され、設定面においてはJSエンジンがWASMのインストラクションのパーサ(Parser)を補い、サイバー犯罪者がブラウザを攻撃する新しいAttack Surface(攻撃対象領域)ができてしまいます。

 Webサイトに埋め込みコードの解析において、セキュリティー技術者たちに難題をもたらします。例えば、クレジットカード情報を盗むソースコードや、Coinhiveのような仮装通貨を発掘するソースコードなどはJavascriptコードであれば、解析者は害悪なコードの早期発見ができますが、WASMといった二進法形式であれば、見つけることがかなり難しくなります。

 また、ファイアウォールやWAFといった第三者ツールによる害悪なソースコードの発見の妨げになります。

 WASMはwebアプリに高パフォーマンスをもたらします。そのため、将来的にビデオや画像の制作編集プログラムといった複雑なwebアプリはデスクトップからウェブに徐々に移り変わり、それに伴ってwebアプリセキュリティーにおいて新たな研究の境地を切り開くことでしょう。

<参考・引用>

[Pentest] WebAssembly là gì? Ưu điểm của công nghệ được tạo ra bởi Microsoft, Google, Mozilla, Apple

https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2


その他のニュース

日本の企業とデジタル フォーメーション(DX)

ノーコード開発プラットフォーム

ジョン・マカフィー
ネットセキュリティ界の狂犬