はじめに

不審サイトの調査などで 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. 個人情報。 ↩︎

最後に

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

awkコマンドとは

awk（オーク）はテキストを1行ずつ読みながら、1行をくつかの列（フィールド）に分けて読む・抜き出す・加工するためのコマンド。
たとえば、ログの「3列目だけ取りたい」時にawkが便利。

awkの基本構文

awk の基本構文は以下。

awk 'パターン { アクション }' ファイル名

パターン＝どんな行を選ぶか
アクション＝その行で何をするか

ざっくり言うと 「ファイルの中で、〇〇な行があったら、△△をする」。

awkの基本をサンプルから覚える

サンプル

サンプルとして使用するファイルの内容。
各行は「名前・年齢・都市・職業」の4つのフィールドで構成されている。

# sample.txt
Alice   25  Tokyo     Engineer
Bob     30  Osaka     Manager
Charlie 28  Nagoya    Designer
David   35  Fukuoka   Engineer
Eve     22  Tokyo     Intern

サンプルファイルの分解

タブやスペースごとに awk が自動で以下表のように読み込んでくれる。

実際に動かしてみる

行全体を表示

print で出力し、$0 でその行全体（すべてのフィールド）を指定。

$ awk '{print $0}' sample.txt

ファイル全体を見たいなら cat でいい気がするので、実務では使わないかも。

# sample.txt
Alice   25  Tokyo     Engineer
Bob     30  Osaka     Manager
Charlie 28  Nagoya    Designer
David   35  Fukuoka   Engineer
Eve     22  Tokyo     Intern

1列目（名前）だけ表示

$1 で名前フィールドを出力。

$ awk '{print $1}' sample.txt

これだけだとコメント（#）まで出力されてしまうので、実務ではもう少し条件を絞った方がよさそう。

#
Alice
Bob
Charlie
David
Eve

コメント（#）を除外

! = ～でない、/文字列/ = 正規表現の始まりと終わりを示す囲み記号、^ = 先頭行 の意味。
先頭行がコメント（#）でない名前フィールドを出力。

$ awk '!/^#/ {print $1}' sample.txt

コメント（#）が除外され、名前のフィールドだけが出力される。

Alice
Bob
Charlie
David
Eve

名前と都市を表示

$1 で名前フィールド、$3 で都市フィールドを指定。

$ awk '{print $1, $3}' sample.txt

それぞれのフィールドが正しく抽出されている。

# 
Alice Tokyo
Bob Osaka
Charlie Nagoya
David Fukuoka
Eve Tokyo

Tokyo に住んでいる人だけ表示

$3 を == で Tokyo 指定。

$ awk '$3 == "Tokyo" {print $0}' sample.txt

Tokyo に住んでいる人だけが抽出される。

Alice   25  Tokyo     Engineer
Eve     22  Tokyo     Intern

年齢が30歳以上の人だけ表示

$2 >= 30 で指定。ついでにコメントも && でつなげて除外しておく。

$ awk '!/^#/ && $2 >= 30 {print $1, $2}' sample.txt

30歳以上の人だけが抽出される。

Bob 30
David 35

Engineerの人数を数える

$4 == “Engineer” で エンジニアを指定、{count++} で条件が真なら count を 1 増やす、END {print count} でファイルを全部読み終わったあとに出力。

$ awk '$4 == "Engineer" {count++} END {print count}' sample.txt

きちんとカウントされている。

2

平均年齢を計算

{sum += $2; count++} で 2 列目（年齢）の値を合計し、行数を 1 増やす。
END {print sum/count} でファイルをすべて読み終えたあとに平均を出力する。
※今回はカウント処理を行うため、コメント（#）のスキップが必須。

; は改行と同じ意味。

$ awk '!/^#/ {sum += $2; count++} END {print sum/count}' sample.txt

平均年齢が出力される。

28

このコマンドの動きは以下の通り。

都市ごとの人数を集計

{city[$3]++} で 3 列目（都市名）をキーとしてカウントする。
END { … } はファイルをすべて読み終えたあとに 1 回だけ実行される処理。
for (c in city) ですべての都市（キー）を順に処理し、
print c, city[c] で都市名と人数を出力する。
※今回はカウントをしているのでコメントのスキップは必須。

$ awk '!/^#/ {city[$3]++} END {for (c in city) print c, city[c]}' sample.txt 

都市ごとの人数が出力される。

Osaka 1
Fukuoka 1
Nagoya 1
Tokyo 2

このコマンドの動きは以下の通り。

疑問に思ったこと

文章ベースのファイルにはawkコマンドは使えないのか

たとえば、

Aliceは東京で働いています。
Bobは大阪に住んでいます。
Charlieは28歳です。

という文章ファイルがあった場合、awk の使いどころがあるのか気になった。

awk の動きとしては「スペースやタブで明確に区切られていない」文章だと、

$1 Aliceは東京で働いています。
$1 Bobは大阪に住んでいます。
$1 Charlieは28歳です。

となり、すべて $1 になるのでフィールド分けができず、awk の長所は活かせない。

一応、grep のように抽出することは可能。

$ awk '/東京/ {print $0}' sample_text.txt
Aliceは東京で働いています。

$ awk '/[0-9]+歳/ {print $0}' sample_text.txt
Charlieは28歳です。

行番号を付けることもできる。

$ awk '{print NR, $0}' sample_text.txt
1 Aliceは東京で働いています。
2 Bobは大阪に住んでいます。
3 Charlieは28歳です。

結論としては、awk でも文章ファイルの操作はある程度できるけど、本来の用途とは離れており、わざわざ awk で文章ファイルを操作する必要はなさそう。