Networkタブ入門｜通信を「盗み見る」
開発者ツールのNetworkタブでブラウザとサーバーの通信を監視し、隠されたAPIレスポンスからフラグを見つけるCTFの基本技術を体験します。
📋 目次
🌐 Networkタブとは？通信を「見える化」するツール
ブラウザが送受信するすべての通信を記録する
Networkタブ = ブラウザ↔サーバー間の通信記録帳
開発者ツール（F12）の「Network」タブを開くと、そのページが行ったすべてのHTTPリクエストとレスポンスが一覧で表示されます。HTML・CSS・JavaScript・画像・APIの返答……それらすべての「通信履歴」をリアルタイムで確認できるのがNetworkタブです。
CTFのWeb問題でNetworkタブが活躍するのは主に2つのシナリオです。「APIのレスポンスにフラグが含まれている」ケースと、「リクエスト・レスポンスヘッダーにフラグが含まれている」ケースです。どちらもページ上に表示されないため、Networkタブで確認する必要があります。
Networkタブはページを開く前から記録を開始する必要がある
Networkタブを開いている間だけ記録されます。すでに読み込まれたページで起動すると過去の通信は見えません。CTFでは『先にNetworkタブを開いてから操作』が基本です。
📡 リクエストとレスポンスの仕組みを理解する
「頼む」と「答える」の往復が通信の本質
HTTPの通信はシンプルな往復構造です。ブラウザが「リクエスト（Request）」をサーバーへ送り、サーバーが「レスポンス（Response）」を返します。Networkタブはこの往復を両方記録します。
リクエストに含まれる主な情報：URL・HTTPメソッド（GET/POST等）・リクエストヘッダー（Cookie・Authorization等）。レスポンスに含まれる主な情報：ステータスコード（200/404等）・レスポンスヘッダー・レスポンスボディ（HTML・JSON等）。
CTFではレスポンスボディのJSONの中にフラグが埋め込まれているケースが非常に多いです。JavaScriptがAPIを叹いてデータを受け取っているのに、そのデータを画面に表示しないパターンです。Networkタブを開けば、JavaScriptが何を受け取ったかを生のまま確認できます。
🔍 Networkタブの各列・各パネルを読む
どこを見ればフラグが見つかるか
| パネル名 | 内容 | CTFでの使いどころ |
|---|---|---|
| Headers | リクエスト・レスポンスの両ヘッダー一覧 | カスタムヘッダー（X-Flag等）にフラグが隐れていることがある |
| Response | サーバーが返したレスポンスボディ（生データ） | JSONやHTMLの中にフラグが含まれているケースが最多 |
| Preview | レスポンスボディを整形・プレビュー表示 | JSONを見やすいツリー表示で確認できる |
| Payload | POSTリクエストで送ったデータ | 送信データの確認・改筄の証拠を探るときに使う |
「Fetch/XHR」フィルターを活用しよう
Networkタブには大量のリクエストが記録されるため、目的の通信を探しにくいことがあります。タブ上部の「Fetch/XHR」ボタンをクリックすると、JavaScriptが行ったAPIリクエストだけに絞り込めます。CTFではこのフィルターを最初に使うのがおすすめです。
🧩 CTFで使う「通信監視」テクニック4選
Networkタブを武器にするパターン
① レスポンスボディのJSON・HTMLを読む
最も基本的なパターン。APIの返答（JSON）やリダイレクト先のHTMLにフラグが含まれています。リクエストをクリック→ Responseタブ または Previewタブで確認。flag・CTF{・secretといったキーワードで検索（Ctrl+F）が有効です。
② カスタムレスポンスヘッダーを探す
サーバーが X-CTF-Flag や X-Secret-Token といったカスタムヘッダーを返すパターンです。リクエストをクリック→ Headersタブ→ Response Headersセクションをスクロールして確認。
③ リダイレクト先の通信を確認する
301/302リダイレクトが発生する際、リダイレクト元のレスポンスボディ（ブラウザには表示されない）にフラグが入っているケースがあります。ステータス列で「3xx」を探しましょう。
④ POSTデータ（送信内容）を確認・改筄する
ログインフォームやフラグ送信フォームで送っているデータを Payloadタブで確認できます。さらにBurp Suiteなどを使えばリクエストを途中でキャプチャして値を書き換えてから送信（インターセプト）できます。
🧩 5分CTFチャレンジ：APIのレスポンスを跞け！
Networkタブを開いてからボタンを押せ
下のボタンを押すと、このページがバックグラウンドでCTFチャレンジ用のAPIを呼び出します。そのAPIのレスポンス（JSONデータ）の中にフラグが隐れています。必ずNetworkタブを開いてからボタンを押してください。
チャレンジの手順
① F12 で開発者ツールを開く → ② Networkタブをクリック → ③ タブ上部の Fetch/XHR フィルターをクリック → ④ 下の「CTFチャレンジ APIを叹く」ボタンを押す → ⑤ 現れたリクエストをクリック → ⑥ 右パネルの Response タブを開く → ⑦ JSONの flag フィールドを読んで入力！
上のボタンを押し、Networkタブに表示されたリクエストの「Response」タブで見つけたflagを入力してください。
NetworkタブのFetch/XHRフィルターをオンにしてからボタンを押すと、APIのリクエストだけが表示されて見つけやすくなります。「blob:」で始まるURLのリクエストを探してください。
リクエストをクリックすると右パネルが開きます。「Response」タブをクリックすると、サーバーが返したJSONが表示されます。その中に "flag": "CTF{...}" というフィールドがあります。
📝 まとめ+FAQ+次回予告
今回のポイントを振り返ろう
第6話では、Networkタブを使ってブラウザとサーバーの通信を監視し、APIレスポンスのJSONからフラグを見つける方法を体験しました。HTTPの「リクエスト/レスポンス」の構造を理解し、NetworkタブのHeaders・Response・Previewパネルの使い分けを覚えると、Web問題の攻略幅が大きく広がります。
・Networkタブ = ブラウザが行ったすべての通信をリアルタイムで記録するツール
・HTTPはリクエスト（ブラウザ→サーバー）とレスポンス（サーバー→ブラウザ）の往復
・「Fetch/XHR」フィルターでAPIリクエストだけに絞り込める
・Response/Previewタブでレスポンスボディ、Headersタブでヘッダーを確認
・フラグはJSON・カスタムヘッダー・リダイレクト前のレスポンス等に隐れていることがある
Q. ページを読み込む前にNetworkタブを開かないと記録されませんか？
はい、基本的にNetworkタブを開いている間だけ記録されます。ただし、Chromeでは「Preserve log」オプションをオンにすると、ページ遷移をまたいでも記録を保持できます。CTFではまずNetworkタブを開いてから操作するのが確実です。
Q. HTTPSの通信もNetworkタブで見られますか？
はい。Networkタブはブラウザの内側で動作するため、HTTPSで暗号化された通信も復号された状態で確認できます。ブラウザが通信を暗号化する前・復号した後のデータを扱っているためです。
Q. Fetch/XHRとXHRの違いは何ですか？
XHR（XMLHttpRequest）は古いブラウザAPIで、Fetch APIはより新しいAPIです。どちらもJavaScriptからHTTPリクエストを行う方法で、Networkタブでは「Fetch/XHR」フィルターにまとめて表示されます。
Q. Burp Suiteとの違いは何ですか？
Networkタブは「読み取り専用の監視ツール」で通信内容を変更して再送信することはできません。Burp Suiteはリクエストを途中でキャプチャして書き換えてから送信できる「改筄ツール」です。CTFではまずNetworkタブで通信を把握し、必要に応じてBurpで改筄攻撃を試みるという使い分けが一般的です。
Cookieとセッションを操る
Applicationタブを応用し、CookieやSessionStorageの値を書き換えて認証を迂回するCTFテクニックを体験します。
📚 参考情報
- Chrome DevTools — Network パネル公式ドキュメント（Google）
- MDN Web Docs「Fetch API」（Mozilla）
- RFC 9110 — HTTP Semantics（HTTPの仕様書）
コメント