『Webブラウザエンジニアリング』第9~10章を読みました。

以下の書籍を9章から10章まで読みました。

Webブラウザエンジニアリング

Webブラウザは、現代のコンピューティング環境において欠かせない存在であり、最も広く使われているプラットフォームの一つです。本書は、その仕組みを実践的に学ぶための解説書です。実際にWebブラウザを構築する過程をたどりながら、レンダリング、HTMLパーサー、CSS、JavaScript、マルチスレッド対応、セキュリティモデル、アニメーションとコンポジット処理、ブラウザAPI、アクセシビリティなど、モダンなWebブラウザの主要な要素を順を追って解説していきます。 章ごとにコードを動かしながら、ブラウザに機能が積み重なっていく過程を通じて、ソフトウェアを成長させ改善していく経験を自然に体得できます。ブラウザ技術の研究者とChrome開発者による豊富な知見をもとに、Webの進化をたどりながら、手を動かしてブラウザの内部構造を深く理解できる一冊です。

oreilly.co.jp

1章から8章の感想については、以下で書いています。

• 『Webブラウザエンジニアリング』第1~3章を読みました。 | ジブンノート - silverbirder.github.io
• 『Webブラウザエンジニアリング』第4~6章を読みました。 | ジブンノート - silverbirder.github.io
• 『Webブラウザエンジニアリング』第7~8章を読みました。 | ジブンノート - silverbirder.github.io

JavaScript

今回は、JavaScript をブラウザで動かせるようにします。
JavaScript の実行エンジンを作るのは書籍の範囲外となるため、Python の DukPy という JavaScript インタプリタを使います。
以下のように書けば、JavaScript のコードを実行できます。

import dukpy
 
interp = dukpy.JSInterpreter()
interp.evaljs("2 + 2")

また、DukPy には JavaScript の中から Python のコードを実行できる仕組み、エクスポートがあります。
以下のように、ブラウザ側（Python）で "log" という名前で Python の print 関数を JavaScript 側へエクスポートします。

interp.export_function("log", print)

そして、以下の JavaScript ファイル(runtime.js)で、console.log 関数を定義します。

console = { log = function(x) { call_python("log", x) } };

call_python は、エクスポートされた "log" 関数を呼び出すことができるようになります！

ただ、これだとターミナルに出力するだけでつまらないです。
やりたいのは、JavaScript から DOM の参照や操作を行いたいです。
参照だと、document.querySelectorAll です。
JavaScript ファイル (runtime.js) では、以下のような API を定義します。

document = {
  querySelectorAll: function (s) {
    var handles = call_python("querySelectorAll", s);
    return handles.map(function (h) { return new Node(h) });
  }
}
 
function Node(handle) { this.handle = handle; }

JavaScript から "querySelectorAll" という関数を実行し、ハンドルと呼ばれる数値識別子を返します。
これは、Python側の Element クラスや Text クラスを JavaScript 側に返却しても解釈されません。
Python 側のオブジェクトに単純な数値識別子を用意しました。それをハンドルと呼びます。
そのクラスに対応するハンドルを "querySelectorAll" が返すことで、JavaScript と Python で1つのオブジェクトを参照できるようになります。
あとは、このハンドラをキーとして、Element クラスから属性を取得して返す getAttribute が実装できます。
他にも、HTMLを更新する innerHTML や イベント検知する addEventListener なども本書で仮実装されていました。

その結果、入力文字数が指定文字以上だったらエラーメッセージの表示と、送信できないような実装ができました。

どこにいるのか分からなくなる

今回の例で言うと、ブラウザのレンダラエンジンは Python で書かれていて、JavaScript インタプリタに DukPy、Web API として runtime.js、そしてクライアント側の JavaScriptファイル などが登場します。
Blink の場合だと C++ だと思うのですが、コードを読んでて『あれ、いまどこの世界の話だ？』と思う時があります。
本書のブラウザは最小限の実装なので、そこまで悩むことはないですが、それでも脳のスイッチが必要です。
これが、Blink という巨大プロジェクトだと、それぞれの世界が密に繋がっていると、読解力や考慮事項がすごそうだなと思いました。

Cookie

次は、Web アプリでよくあるログイン機能を実装したいです。
誰がログインしたかと言う情報を識別するために、Cookie を実装します。

ブラウザがサーバへリクエストし、そのレスポンスヘッダーに Set-Cookie: token={token} をつけるようにします。
この {token} は、リクエストヘッダーの cookie に token があればそれをそのまま使い、なければ乱数を設定します。
ブラウザは Set-Cookie: token={token} を受け取るため、ブラウザ側のグローバル変数 COOKIE_JAR に host をキーとして token を登録します。
あとは、今後ブラウザがリクエストを行う際に、COOKIE_JAR から host を key とした cookie を リクエストヘッダーにつけて送信します。

これで、基本的なCookieのやりとりを実装できました。
以下は、ログインページの画面です。
サーバ側で定義しているユーザーで、ログインできるようになります。

ログインできると、メッセージを投稿できるようになります。

ただし、さまざまなセキュリティ脆弱性が存在します。
セキュリティ関連の話は別路線なので、深堀はしません。
しかしブラウザとして考慮しないといけない事項があるため、解説がありました。
現状ではWebページへリクエストを送るとCookieが返ってくるため、同一オリジンポリシーの実装例があります。
クロスサイトでフォーム操作させないために、SameSite Cookie の実装例もあります。
ユーザー投稿されるテキストでスクリプト実行されないために、 エンコード処理や CSP の実装例もあります。

小話

本書では、補足や脚注がモリモリ書かれていて、そっちを読むのが面白いです。
むしろ、そっちがメインなのでは？と思うほどに。

例えば、Webページへのリクエストでは XMLHttpRequest が紹介されていて、その名前の由来について脚注がありました。
そういえば『なんでXML？』と思い、脚注には簡単な説明が書かれているのです。
"Outlook Web Access 機能まで遡ります" とあり、気になる状態で止まるのです。笑
そうするとネットで調べてみるじゃないですか。
調べてみると、リリースに差し迫ったエンジニアあるあるなネーミングで面白いのです。

あとは、クロスオリジン関連で canvas について補足説明がありました。
どうやら、クロスオリジンでも canvas で画像表示できるとのことで、気になって以下のMDNの記事を読みました。

• 別オリジンの画像を持つ <img> と <canvas> の使用 - HTML | MDN - developer.mozilla.org

クロスオリジンでも、 canvas で画像を描画する(drawImage)ことは可能なのです。
ただしそれは汚染と判断され、getImageData や toBlob のような取得や変換はセキュリティエラーになるようです。
それは知りませんでした...。

終わりに

HTML、CSS、JavaScript、Form、Cookie。 これらがあれば、小さなWebアプリケーションは組めるほどに最小限のブラウザができました。
ブラウザってどう作っているのか、具体的なイメージが湧いてきて良いですね。
演習を全部すっ飛ばしてるので、やってみるのも良いかもですね。

s

silverbirder

Webソフトウェアエンジニア