第1回 Webアプリの構造を図解で理解する：何を見るべきか

Hello there, ('ω')ノ

Webアプリとは何か？シンプルな例で考える

• 経費精算システム
• 勤怠管理システム
• 社内ポータル

これらはすべて「Webアプリケーション（Webアプリ）」です。 見た目は普通のWebサイトでも、その裏側では以下のような構造になっています。

【基本構造図イメージ】

① ブラウザ
   ├─ HTML / CSS / JavaScript（見た目・動き）
   │
② Webサーバー
   ├─ アプリケーションロジック（処理）
   │
③ データベース
   └─ 社員情報 / 経費データなど（保存）

---

脆弱性を見つけやすいポイント3か所

1. フロントエンド（ブラウザ側） → 入力欄、ボタン、URL

2. バックエンド（Webサーバー側） → API通信、ログイン処理、ファイルアップロード

3. データベース連携部分 → 検索機能、ID指定、情報表示

実際の攻撃者もこの順番で狙うことが多いです。 「目に見えるところから → 見えない裏側へ」 という流れを意識しましょう。

---

どこを見るべきか：具体チェックリスト

① URL

• 「?id=」や「?user=」のようなパラメーター付きURL
• 例： https://intra.example.co.jp/profile?id=123
• → 数字や文字列を変えてみる（IDORチェック）

② 入力フォーム

• ログイン画面
• お問い合わせフォーム
• → JavaScriptで入力制限していても、裏側が甘いことが多いです

③ ボタンやリンク

• 「ログアウト」「設定変更」「データ削除」
• → クリックジャッキングなどのリスク

④ ファイルアップロード機能

• プロフィール画像変更など
• → 不正なファイル形式を試す

---

実際の社内システムで確認するときの流れ

1. ログイン画面から始める
2. 画面遷移（ページ移動）をすべてメモする
3. 目についたURLをメモする
4. 「これって自分以外でも触れる？」と思う機能に注目

とくにポイントは「社員番号やIDがURLに見えていないか」です。

---

シンプルなまとめ：

• Webアプリは「ブラウザ」「サーバー」「データベース」の3段構え
• 見るべきはURL・フォーム・ボタン・ファイルアップロード
• 「自分以外でも操作できてしまいそうなポイント」を探す

Best regards, (^^ゞ