はじめに

不審サイトの調査などで Chrome DevTools をよく使うので自分用メモ。
ここでは概要をつかむための簡単な解説だけ。詳細はいずれ別記事で書けたら書く。

DevTools とは

DevTools（デブツールズ）は、Webブラウザに標準搭載されている「開発者向けツール」。
画面上の要素を調べてデザイン崩れを修正したり、ネットワーク通信を確認して読み込みエラーを特定したり、
コンソールでエラーメッセージやログを確認したりできる。
名前の通り、本来は開発者向けツールだがセキュリティ調査でも補助ツールとして使われる。

今回は Chrome に搭載されている DevTools の機能を解説。

DevTools の概要

DevTools の開き方

Macの場合
Cmd + option + I

Windowsの場合
Ctrl + Shift + C もしくは F12

DevTools 画面例

DevTools のパネルメニュー

セキュリティの観点で各パネルをどのように利用するか記載。

Elements（エレメンツ）

用途：Webページの構造（HTML）やクライアント側のDOM要素¹を確認。

使用例：
悪意あるスクリプト（例：<script>タグ内のXSSペイロード）をページ内で検出できる。
inputフォームの属性（maxlengthやrequiredなど）を確認してクライアントサイド検証の甘さを見抜く。
非表示（display:none）の要素や、意図的に隠されたトークン値などもDOM上で確認可能。

Console（コンソール）

用途：ブラウザで発生しているJavaScriptエラー・警告の確認。

使用例：
脆弱なスクリプト読み込み（HTTP通信など）が警告として出る。
エラー文から内部APIのエンドポイントや認証処理の構造が推測できる場合もある。
XSSテスト時にペイロードが実行されているか確認するのにも使える。

Sources（ソース）

用途：JavaScriptやCSS、画像ファイルの確認。

使用例：
公開されている .js ファイルから機密ロジックやAPIキーのハードコーディング²を発見できる。
JSのマップファイル（.map）が残っていると難読化されたコードを簡単に復元できる。
コメント内に内部仕様やURLが書かれていないか確認できる。

Network（ネットワーク）

用途：Webページがやり取りしている通信（HTTPリクエスト・レスポンス）を確認。

使用例：
HTTPヘッダー（Cookie, Authorization, CSP, CORSなど）を確認できる。
CookieのSecure / HttpOnly / SameSite 属性の設定をチェック。
API通信のレスポンスを観察して、過剰情報漏えい（PII³や内部ID）がないか確認できる。

Performance（パフォーマンス）

用途：処理や描画のタイミングを計測し、スクリプト挙動を把握。（Webページが“どんなタイミング”で“何をしているか”を記録して、時間軸で見える化するツール）

使用例：
攻撃者が仕込んだマルウェアスクリプトや追跡コードが異常にCPUを消費していないかを確認できる。
通常とは異なるタイミングで外部通信が発生していないかを監視可能。

Memory（メモリ）

用途：Webアプリの動作中に使われるメモリの状態を分析。

使用例：
クライアント側で扱っているデータが、不要に保持・漏洩していないか確認できる。
セッション情報やトークンがメモリ上に残り続けていないかを調査。

Application（アプリケーション）

用途：ブラウザに保存されたデータ（Cookie、LocalStorageなど）を確認。

使用例：
LocalStorageやSessionStorageにアクセストークンや個人情報が保存されていないか確認。
Cookie設定（Secure / HttpOnly / SameSite）を確認して脆弱な設定を検出。
キャッシュデータやService Workerの構成から、古いリソースが残っていないか確認。

Privacy and Security（プライバシーとセキュリティ）

用途：通信の安全性と証明書状態を確認。

使用例：
SSL/TLS証明書の有効期限・暗号スイートを確認。
Mixed Content（HTTPSページ内でHTTPリソースを読み込む危険な構成）があるか検出。
Cookieの追跡情報やセキュリティポリシーの確認にも使える。

Lighthouse（ライトハウス）

用途：Webサイト全体を自動診断（パフォーマンス・セキュリティ・アクセシビリティなど）。

使用例：
HTTPSが有効か、セキュリティヘッダー（CSP、X-Frame-Optionsなど）が設定されているか自動チェック。
セキュリティ的な改善ポイントをレポート形式で提示してくれる。

Recorder（レコーダー）

用途：操作の記録・再生（Webアプリの自動テスト）。

使用例：
CSRFテストなどで再現性を保つための操作手順を自動記録できる。
ペネトレーションテスト時に攻撃パターンを再生・再現する用途でも使われる。　…かも。（ChatGPTに聞いたけど、本当にそのような使い方がされているのか調べきれなかった。）

1. DOM（ブラウザがHTMLを解析して作るページの構造モデル）内の1つ1つの部品（例：div, p, inputなど）。 ↩︎
2. 設定や機密情報をプログラムの中に直接書いてしまうこと。 ↩︎
3. 個人情報。 ↩︎

最後に

簡易調査で限られた機能しか使っていなかったので、まとめ用に調べてみると思っていたよりもできることが多そう。もう少し使いこなせるようになりたい。