Chrome DevToolsで通信を見る｜Webセキュリティ入門

このレッスンで学ぶこと

開発者ツールの Network タブは、自分のブラウザが何を送り何を受け取ったかを、そのまま並べて見せる場所です。ここまで用語で学んだものを、実物の画面で突き合わせます。

読み終えるころには、画面の裏で何が飛んでいるかを自分で確かめられます。

開発者ツールの Network タブを開いた状態でページを操作すると、飛んだ要求が一覧で並びます。ひとつ選ぶと、次が読めます。

ここまでで学んだ用語が、そのまま画面の項目名として出てきます。教材の図ではなく実物なので、ここで一度突き合わせておきます。

要求は大量に飛ぶので、絞り込みが要ります。

ログイン、検索、送信のような操作を1回だけ行って、そのとき何が飛んだかを見ると分かりやすくなります。

画面の項目とAPIの項目は一致しない

画面に3つしか入力欄が無くても、送っているボディに10項目入っていることがあります。画面から想像せず、実物を見ます。

この講座では、次の目的で使います。

開発者ツールを他人のサービスへ向けて調べ回らないでください。見るのは、自分が作ったもの、自分に許可があるものだけです。この講座で用意する演習環境は、そのために置いてあります。

このレッスンで学ぶこと

読み終えるころには、画面の裏で何が飛んでいるかを自分で確かめられます。

どこを見るか

開発者ツールの Network タブを開いた状態でページを操作すると、飛んだ要求が一覧で並びます。ひとつ選ぶと、次が読めます。

要求の1行目（メソッドとパス）

要求ヘッダー、返答ヘッダー

送ったボディ、返ってきたボディ

状態コードと、かかった時間

ここまでで学んだ用語が、そのまま画面の項目名として出てきます。教材の図ではなく実物なので、ここで一度突き合わせておきます。

見るときのこつ

要求は大量に飛ぶので、絞り込みが要ります。

Fetch/XHR に絞ると、画面の裏で呼ばれているAPIだけが残る

Preserve log を入れておくと、画面が切り替わっても消えない

Disable cache を入れると、毎回サーバーまで取りに行く

ログイン、検索、送信のような操作を1回だけ行って、そのとき何が飛んだかを見ると分かりやすくなります。

画面の項目とAPIの項目は一致しない

画面に3つしか入力欄が無くても、送っているボディに10項目入っていることがあります。画面から想像せず、実物を見ます。