Hello there, ('ω')ノ
開発者ツールとは？
Google Chrome や Microsoft Edge に標準で入っている機能です。
起動方法：
- Windows：F12キー
- Mac：Command + Option + I
- 右クリック →「検証」でもOK
よく使うタブと目的
| タブ名 | 主な用途 |
|---|---|
| Elements | 画面上のHTML/CSS確認 |
| Network | 通信内容（APIやリクエスト）観察 |
| Console | エラーやデバッグ情報確認 |
| Application | Cookieやローカルストレージ確認 |
この中でも、脆弱性チェックに特に使うのはNetworkとApplicationタブです。
実務でのチェック手順① Networkタブ
① F12キーを押す → Networkタブを開く
② 画面を通常操作しながら通信内容を確認
③ 見るべきポイント：
- URL
- メソッド（GET / POST / PUT など）
- ステータスコード（200 / 403 / 500など）
- レスポンス内容
✅ 観察例：
- 不要な情報（社員番号やメールアドレス）が含まれていないか？
- 認証なしでアクセスできるAPIがないか？
- 画面上に出ていないデータがレスポンスに含まれていないか？
実務でのチェック手順② Applicationタブ
① Applicationタブを開く
② Cookiesを確認
見るべき項目：
- セッションIDの有無
- HttpOnly、Secure属性が付いているか
- 意味ありげなCookieがないか（user=admin など）
③ Local Storage / Session Storage も確認
ここに秘密情報や社員データが入っていると要注意です。
実務でのチェック手順③ Consoleタブ
① Consoleタブを開く
② エラーメッセージを確認
特に注意すべき表示：
- JavaScriptエラー → セキュリティミスのヒント
- 404 Not Found → 存在しないページが指定されている可能性
- API通信失敗時のメッセージ → バックエンド設定漏れ
社内システムチェック例
例：社内ポータルサイトの場合
- ログイン後のNetworkタブ → 勤怠や経費データがどのAPIでやりとりされているか確認
- Applicationタブ → CookieにセッションID以外のデータがないか確認
- Consoleタブ → JSエラーで開発用コメントやサーバー情報が漏れていないか確認
まとめチェックリスト
- [ ] Networkタブで通信内容とレスポンスデータを確認
- [ ] ApplicationタブでCookieやStorageの中身を確認
- [ ] Consoleタブでエラーやデバッグ情報を確認
- [ ] 目に見えないデータがやりとりされていないか観察
Best reagards, (^^ゞ
