この記事でやること

Chromium ベースの Microsoft Edge の net-export という機能でネットワークログをキャプチャし、専用のビューアーの netlog-viewer で確認するところをご紹介します。なお、QUIC や HTTP/3、 net-export のパラメータ等の詳細には触れません。

※ 本投稿では通信のキャプチャと言いつつ、あくまで Chromium 側で出力可能な NET_EXPORT の NetLog によるログを取得し閲覧する形となるので、いわゆるOSの標準コマンドのnetshによる取得やパケットキャプチャドライバ等によるパケットキャプチャとは仕組みも異なり、取得できるレイヤーや粒度も異なりますのでご注意ください。

背景

今年 2021 年に新しいトランスポートプロトコルとして QUIC が IETF にて標準化されました。(RFC 9000)

ちなみに、ざっくりですが当初の Google QUIC はアプリケーションプロトコルも含めてひとまとめにしたもので、その後 HTTP over QUIC としても議論され、最終的にアプリケーションプロトコルの部分と切り離されて、今回標準化されたトランスポートプロトコルの QUIC と現在標準化を議論中のアプリケーションプロトコルの HTTP/3 でそれぞれ分離されたわけです。

今回は QUIC をトランスポートプロトコルとして利用する HTTP/3 のキャプチャを Chromium Edge 標準で搭載の net-export のログ機能を利用し、確認していこうと思います。そもそも Chromium の機能なので Google Chrome でも同様の方法で勿論可能です。ちなみに、今回は HTTP/3 のキャプチャと書いてますが、Google QUIC もキャプチャ可能です。

今回の検証

Windows 10 21H1 の Chromium ベースの New Microsoft Edge を利用
https://www.google.co.jp/ にアクセスして検証します

事前準備 : キャッシュ削除

ブラウザの Inprivate モードで検証してもいいですが、通常のモードで開く場合には念の為キャッシュを削除しておきましょう。以下の手順で削除可能です。

edge://settings/privacy を開き、[時間の範囲] は [すべての期間] を選択し、[閲覧データをクリア] 内の [クリアするデータの選択] のボタンを押し、[Cookie] と [キャッシュ] の欄にチェックを入れ、[今すぐクリア] を押します。

1. キャプチャ -> Viewer で開く

具体的な手順をここに書いていきたいところですが、既に画像付きで net-export の使い方 (Japan Developer Support Internet Team Blog) に書いてあるため、こちらは省略します。

この Blog の "ログの取得方法" にあるように edge://net-export/ (Chrome の場合は chrome://net-export/) を開き、net-export の Network Log を取得開始・https://www.google.co.jp/ (Google の検索サイト) にアクセス再現・取得終了まで行います。

取得後、保存された JSON ファイルを netlog-viewer - https://netlog-viewer.appspot.com/ で開きます。

2. netlog-viewer : Alt-Svc タブ

まず最初に netlog-viewer の左パネルの Alt-Svc タブから見ていきましょう。

HTTP/3 で通信するためにはサーバー側が HTTP/3 に対応しているかを知る必要がありますが、これは Alt-Svc レスポンスヘッダ (RFC 7838) にて確認が可能です。

また、Alt-Svc (MDN Web) にあるように ma にて max-age を指定することでこの期間まで確認を省略できます。その確認したマッピングの情報がここで見れるわけです。

一般的には HTTP/3 の QUIC では通常 UDP の 443 ポートを利用する事が多いようなのですが、特に仕様でポート番号が決まってはいないため、h3=":443"; や h3-29=":443"; のように、Alt-Svc レスポンスヘッダで指定がされています。こちらのポート番号もこの Alt-Svc タブで、サーバー側のどのポート番号にマッピングされたかを確認することが可能です。Chromium はどのサイトが QUIC をサポートしているかをこのヘッダーを基に記憶しておくことで、Alt-Svc による事前確認のオーバーヘッドを緩和しています。

参考 : Alt-Svc ヘッダによる事前確認について

例えば、HTTP3 対応がされている nginx のデモサイトの https://quic.nginx.org/ にアクセスしてみます。
そうすると、最初の方のリソース読み込みのアクセスは以下のように HTTP/2 のプロトコルでアクセスされています。

そして応答ヘッダーの中に alt-svc ヘッダーがあります。

一部、同サイト内でも後続では HTTP/3 のアクセスがあります。

そして、デモサイトの https://quic.nginx.org/ に DevTools でキャッシュを無効化した上で再度アクセスしてみます。そうすると、先ほどは HTTP/2 のアクセスだったリクエストが HTTP/3 でのアクセスに変わっています。これは上述したブラウザ側で事前の Alt-svc ヘッダーの内容を記憶しており、max-age 以内であったために最初から HTTP/3 アクセスを行う事が可能であったためです。

3. netlog-viewer : QUIC タブ

次に netlog-viewer の左パネルの QUIC タブを開きます。
上部では Supported Versions などの QUIC に関する情報が閲覧できます。

今回はキャプチャを確認したいため、下部の QUIC sessions を利用します。
例えば、Version の部分が h3-Q050 の場合は前述の Google QUIC を示し、draft29 となっているのは h3-29 と呼ばれる草案 29 版ベースの HTTP/3 を指します。他にも Peer address や Connection ID が確認できます。

View live QUIC sessions のリンクをクリックすると、表示されている各 QUIC のネットワークログが見れますが、今回は、そこではなく、表の中の 1 つの Connection ID のリンクを試しに開いてみてください。
具体的には 1 つの www.google.co.jp:443 の Connection ID のリンクをクリックしてみます。

4. netlog-viewer : 上記 Connection ID で絞った Events タブ

そうすると、Events タブに上記クリックした Connection ID でフィルターした状態で遷移します。

具体的には、以下のように type:QUIC_SESSION の選択した Connection ID の QUIC セッションに関する詳細なネットワークログが右側で確認できるはずです。スクロールして眺めてみてください。

例えば、HTTP3_HEADERS_SENT イベントや HTTP3_HEADERS_DECODED イベントで各リクエストやデコード後のレスポンスヘッダーも確認可能です。また上部のフィルター "type:QUIC_SESSION " を解除すれば、他の様々なイベントも確認でき、UDP_SOCKET、QUIC_STREAM_FACTORY_JOB、HTTP_STREAM_JOB、HTTP_STREAM_JOB_CONTROLLER、URL_REQUEST など様々なソースタイプがあります。ぜひ色々なソースをポチポチしてみてください。

なお、今回特に深追いしませんが、例えばソースやイベントの状況によっては os_error や net_error も簡易的なエラーコードだけではありますが確認が可能です。

ちなみに、左側に表示されている各ログのソースタイプの一覧は Chromium リポジトリ内の net_log_source_type_list.h、右側に表示されている各イベントタイプの一覧は net_log_event_type_list.h で見れます。

5. netlog-viewer 以外でも実は見れる net-export の NetLog

① edge://net-export や chrome://net-export の NetLog は実は Fiddler Classic でも拡張の機能をダウンロードすることで見ることが可能です。

Fiddler でも実は見れる edge://net-export の NetLog

② また、NetLog は qlog のフォーマットに対応しているため QUIC や HTTP/3 の qlog の可視化ツールである qvis でも確認することが可能です。

qvis のサイト https://qvis.quictools.info/#/files を開きます。
net-export で取得しておいた NetLog の json を Option 2 の Upload file 欄から Import することで確認可能です。

その他の方法の紹介

A. 開発者ツールのネットワークタブ

他にキャプチャする方法として、Edge や Chrome の DevTools (開発者ツール) の Network パネルによる確認があります。

B. SSLKEYLOGFILE を用いた Wireshark での閲覧

さらに他にも、SSLKEYLOGFILE の環境変数と Wireshark を用いた方法があります。

SSLKEYLOGFILE の環境変数を事前にキャプチャ前に指定して、Microsoft Edge や Google Chrome の通信をキャプチャ後に、出力したキーを含むファイルを用いて Wireshark で復号する方法です。TLS 1.3 を前提とした QUIC 関連の復号はサーバーの秘密鍵だけあっても復号できないので取得する Edge クラインアント側で出力した SSLKEYLOGFILE を利用してパケットを復号し確認します。

なお、事前準備から復号までの具体的な手順は Wireshark による New Microsoft Edge のトレース取得方法 (Japan Developer Support Internet Team Blog) にあるので、ご興味があればぜひそちらの方法でもお試しください。

ご参考

冒頭に述べたように特に今回は QUIC や HTTP/3 の詳細等には全く触れてません。もし興味があれば様々な方が書いてくださっている良記事や講演等をご参照ください。一部かもしれませんがご参考までにいくつか載せておきます。

https://www.youtube.com/watch?v=2nefATBHs1o
https://github.com/flano-yuki/http3-note
https://gihyo.jp/magazine/wdpress/archive/2021/vol123
https://eng-blog.iij.ad.jp/archives/10039