はじめに
ブラウザ内蔵の開発者ツール（ページソース / Inspector / Debugger / Network）だけで、Web アプリの“生の”情報を掘り下げる実践ガイド。自分の手でアプリを「歩いて（walk）」見つける手法を TryHackMe の演習例に沿って整理しました。小さなヒント（コメント、隠しリンク、ディレクトリ公開、JS の挙動）から重要な情報が出てくることが多いです。
自動ツールに頼らず、ブラウザだけで手動検査を行うと、意外な情報や脆弱性の痕跡（バックアップファイルの露出、未保護の管理ページ、クライアント側のロジックの穴）が見つかります。本記事はその「歩き方」を実践ベースでまとめたものです。
用意するもの
- 最新のブラウザ（Chrome / Firefox / Edge 等）
- ブラウザの 開発者ツール（F12 または右クリック → Inspect / View page source）
- メモ（見つけた URL・要素・リクエストを残す）
手順と実例
A. ページソース（View Source）
目的
サーバーが返す「生の HTML」を確認する。コメントや静的リンク、含まれる外部リソースの一覧を探す。
やり方
- ブラウザで
右クリック → View Page Sourceまたはview-source:プレフィックスを使用。 -
<!-- ... -->コメントに注意。開発者のメモやテスト用 URL が書かれていることがある。
演習例（TryHackMe）
<!--
This page is temporary while we work on the new homepage @ /new-home-beta
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Acme IT Support - Home</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/bootstrap.min.css">
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Acme IT Support</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/news">News</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/customers">Customers</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><div class="container" style="padding-top:60px">
<h1 class="text-center">Acme IT Support</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<img src="/assets/staff.png">
<p class="welcome-msg">Our dedicated staff are ready <a href="/secret-page">to</a> assist you with your IT problems.</p>
</div>
</div>
</div>
<script src="/assets/jquery.min.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/site.js"></script>
</body>
</html>
<!--
Page Generated in 0.05656 Seconds using the THM Framework v1.2 ( https://static-labs.tryhackme.cloud/sites/thm-web-framework )
-->
Q1 — HTML コメントに書かれたフラグは何ですか？
答え: THM{HTML_COMMENTS_ARE_DANGEROUS}
HTML コメントに次の記述がありました：
This page is temporary while we work on the new homepage @ /new-home-beta
このコメントには未公開のページ /new-home-beta のパスが書かれており、未公開ページへの手掛かりになります。
https://x.x.tryhackme.com/new-home-beta にアクセスすると、HTML コメントに関するフラグ THM{HTML_COMMENTS_ARE_DANGEROUS} を取得できます。
Q2 秘密のリンクからのフラグとは何ですか?
答え: THM{NOT_A_SECRET_ANYMORE}
次のような HTML が含まれていました：
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<img src="/assets/staff.png">
<p class="welcome-msg">
Our dedicated staff are ready <a href="/secret-page">to</a> assist you with your IT problems.
</p>
</div>
</div>
このコードには href="/secret-page" という隠しリンクが含まれており、公開ページには表示されないが存在する内部ページへの手掛かりになっています。
/secret-page にアクセスすると、秘密のリンクに関するフラグ THM{NOT_A_SECRET_ANYMORE} を取得できます。
Q3 ディレクトリリストフラグとは何ですか?
答え: THM{INVALID_DIRECTORY_PERMISSIONS}
HTML の以下の記述から手掛かりが得られました：
<script src="/assets/jquery.min.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/site.js"></script>
これらはすべて同一ディレクトリ（/assets/）に配置されています。ブラウザで https://x.x.tryhackme.com/assets/ にアクセスすると、そのディレクトリの一覧が公開されている可能性があります。実際に https://x.x.tryhackme.com/assets/flag.txt を開くことで、ディレクトリリストに関するフラグ THM{INVALID_DIRECTORY_PERMISSIONS} を取得できます。
Q4 フレームワークフラグとは何ですか?
答え: THM{KEEP_YOUR_SOFTWARE_UPDATED}
HTML コメントに次の記述がありました：
Page Generated in 0.04921 Seconds using the THM Framework v1.2 ( https://static-labs.tryhackme.cloud/sites/thm-web-framework )
Current Version 1.3
https://static-labs.tryhackme.cloud/sites/thm-web-framework/changelog.html
We've had an issue where our backup process was creating a file in the web directory called /tmp.zip which potentially could of been read by website visitors. This file is now stored in an area that is unreadable by the public.
この情報から使用フレームワークが THM Framework v1.2 であることが分かります。公式サイトを確認すると現在の最新版は v1.3 であり、変更履歴（changelog）に過去に公開ディレクトリに /tmp.zip が残されてしまった旨の記載がありました。実際に以下のパスにアクセスすると問題のファイルが見つかります：
https://x.x.tryhackme.com/tmp.zip
このファイルを確認することで、フレームワークに関するフラグ THM{KEEP_YOUR_SOFTWARE_UPDATED} を取得できます。
実践メモ
コメントを軽んじるな。コメント欄にテスト用 URL、ディレクトリ公開、管理者宛のメモ、旧バージョンの参照などがあることが多い。
B. Inspector（要素検査）
目的
DOM（レンダリング後の HTML）を確認し、CSS によって隠されている要素を一時的に表示させる。表示制御（display: none 等）を書き換えれば、クライアント側の制限を解除して中身を見られる場合がある。
やり方：
- ページ上で要素（たとえば paywall のブロック）を右クリック →
Inspect。 - 該当要素（
div等）を選んで、Styles パネルでdisplay: blockをdisplay: noneに変更する、あるいはvisibility/opacityを編集する。
演習例：
ペイウォールの背後にあるフラグとは何ですか?
答え: THM{NOT_SO_HIDDEN}
手掛かりは
div.premium-customer-blocker の display: block を none に変更すると paywall が消えて記事本文を閲覧できた。
実践メモ
この操作はローカル（あなたのブラウザ）での表示を書き換えるだけ。本番サーバー側のデータに変更は加わらない。リフレッシュで元に戻る。
C. Debugger（JavaScript 実行の中断）
目的
JavaScript の流れを止めて、クライアントが自動的に行ってしまう動作（ポップアップの自動削除や自動リダイレクト）を観察・抑止する。
やり方（Chrome の場合）
- F12 →
Sources（Firefox ならDebugger）。 -
assets等のフォルダから目的の JS ファイル（例：flash.min.js）を開く。 - 「Pretty print（{}）」である程度整形して読みやすくする。
- キーワード検索（例：
remove()）で該当行を探し、行番号をクリックしてブレークポイントを仕掛ける。 - ページをリロードすると、ブレークポイントで実行が止まり、DOM の状態やローカル変数を確認できる。
演習例
-
flash['remove']();にブレークポイントを入れ、リロードすると赤いボックスが消される前に中身を読むことができた。
赤いボックス内のフラグは何ですか?
答え: THM{CATCH_ME_IF_YOU_CAN}
実践メモ
ブレークポイントは強力。DOM の変化の「タイミング」を掴めば、意図的に隠されている情報に辿り着ける。
D. Network（通信の監視）
目的
フォーム送信（AJAX）、隠れた API、静的ファイルの一覧、レスポンスヘッダ（サーバー情報）を確認する。POST/GET のペイロードも解析可能。
やり方
- F12 →
Networkタブを開く（ログをクリアしておくと良い）。 - ページ操作（フォーム送信やボタン押下）を行い、発生したリクエストを監視。
- 目的のリクエストを選んで、Headers / Payload / Response を確認。
演習例：
- コンタクトフォーム送信で
contact-msgという AJAX リクエストが発生し、レスポンスにフラグが含まれていた（THM{GOT_AJAX_FLAG}）。
contact-msg ネットワーク リクエストに表示されるフラグは何ですか?
答え: THM{GOT_AJAX_FLAG}
実践メモ
XHR / Fetch / WebSocket 等の通信を全て監視すること。API のエンドポイントは攻撃ベクトルにもなる。
実務的なチェックリスト（クイックリファレンス）
- HTML コメントにテスト用 URL / 管理用スニペットがないか確認する。
- ページに「表示されないリンク」が無いか（
display: none/hidden/aria-hidden）。 - ディレクトリリスティング（
Index of /assets/）が有効になっていないか確認する。 - 開発用ファイル（
tmp.zip/.bak/.old）が公開ディレクトリに落ちていないか確認する。 - JS によるクライアント制御（アクセス制御や Paywall）が容易に回避できないか確認する。
- Network タブで全ての API エンドポイントを列挙（未公開 API が呼ばれていないか）。
- レスポンスヘッダ（Server / X-Powered-By 等）でソフトウェアのバージョン情報が漏れていないか。
- フォーム送信の検証（クライアント側のみの検証で済んでいないか）を確認する。
まとめ
- ブラウザでできる調査は非常に強力ですが、あくまで見るだけであることを忘れないでください。データへの変更や破壊、認可されていない攻撃的操作は法律違反になることがあります。
- 開発者がコメントや未保護ファイルを残しているのはよくあるミスです。小さな手掛かりが大きな問題につながるので、必ずドキュメント化して報告に繋げましょう。
- 深掘りの際は、見つけた情報（URL、レスポンス、スクリーンショット）を再現手順付きでまとめると、報告書がグッと使いやすくなります。