WebGoat HandsOn-Developer tools 2021.11.19

1. OWASP Nagoya Chapterミーティング
第23回 / ハンズオン資料
Developer Tools
2021/11/19 ハンズオン開催

2. ～お断り～
1 2 3 4 5 6
WebGoatの説明画面ではGoogle Chromeを使用していますが、
本資料はFirefoxを使用して説明します。
そのためWebGoatの説明と異なる箇所が存在します。

3. Developer Tools
1 2 3 4 5 6
ハンズオンの問題を解く際にJavaScriptやHTMLのソースコード
を確認したり、任意のコマンドを実行する必要があります。
最近のブラウザはこれら操作を行うために「Developer Tools」が
用意されています。
現在のページを表しています

4. Developer Tools
1 2 3 4 5 6
（開発ツールの開き方例）
画面上の項目を選択し、
右クリック→「調査」を選択

5. Developer Tools
1 2 3 4 5 6

6. Developer Tools
1 2 3 4 5 6
（Developer Toolsの開き方例２）
ブラウザのメニューから
「その他ツール」→「ウェブ開発ツール」の順に選択

7. Developer Tools
1 2 3 4 5 6

8. Developer Tools
1 2 3 4 5 6
（Developer Toolsの開き方例３）
キーボードショートカットの
【Ctrl】+ 【Shift】 + 【I】を押下

9. 「インスペクター」タブ
Webサイトの定義、スタイル設定を確認できます。
1 2 3 4 5 6
HTMLソース CSSソース

10. 「インスペクター」タブ
• HTMLソース
– HTMLソースにカーソルを合わせるとブラウザの一部が青色に変わ
り、HTMLがWebサイトの特定部分を定義していることがわかりま
す。
– HTMLに対して変更を加えることが出来ます。
– HTMLタグが保持しているidやclass属性なども変更することが出来
ます。
1 2 3 4 5 6

11. 「インスペクター」タブ
1 2 3 4 5 6
カーソルを重ねる

12. 「インスペクター」タブ
1 2 3 4 5 6
値を変更

13. 「インスペクター」タブ
• CSSソース
– Webページのスタイルを定義するCSSの情報があります。
– HTMLと同様にCSSを編集（値の編集、個別スタイル設定をOFF）し
てスタイルを調整することが出来ます。
1 2 3 4 5 6

14. 「インスペクター」タブ
1 2 3 4 5 6
24px → 16pxに変更

15. 「コンソール」タブ
• ロードしたJavaScriptが出力した情報を見ることが出来ま
す。
• コンソールタブを介してJavaScriptの独自コードを実行する
ことが出来ます。
1 2 3 4 5 6

16. 「コンソール」タブ
キーボードで入力し Enter
コンソールに値が出力される
基本的な計算も可能
※呼び出したJavaScript関数が何も返さなかった場合
”undefined”と表示されます
入力
出力
1 2 3 4 5 6

17. 「コンソール」タブ
1 2 3 4 5 6
コピーしたテキストをコンソールに貼付すると上記の警告が表示されます
（初回のみ）
allow pastingとコンソールに入力後、貼付しなおしてください。

18. コンソールを使用してみよう
1. 開発ツールのコンソールを使用して次の関数を呼び出しま
す。
1 2 3 4 5 6
Try it!
webgoat.customjs.phoneHome()

19. コンソールを使用してみよう
2. コンソールの結果から、 “phoneHome Response is”以降に
出力された値を画面に入力します。
（値は毎回変わります）
1 2 3 4 5 6
Try it!

20. 「デバッガー」タブ
• Webサイトを表示するために使用しているJavaScriptファイ
ルを見ることが出来ます。
1 2 3 4 5 6

21. 「スタイルエディター」タブ
• Webサイトを表示するために使用しているCSSファイルを見
ることが出来ます。
1 2 3 4 5 6

22. 「ネットワーク」タブ
• Webサイトを表示する際に実行したリクエストとレスポンスを
見ることが出来ます。
• 詳細情報を見たい場合は、リクエストをクリックします。
1 2 3 4 5 6

23. 「ネットワーク」タブ
選択
1 2 3 4 5 6
リクエストの詳細が表示される
履歴を削除
記録を開始/終了

24. 「ネットワーク」タブ
1 2 3 4 5 6
ブラウザのリクエストを加工して再送
することが可能

25. 「ネットワーク」タブの動きを見てみよう
1. 「Go」ボタンをクリックし、生成されたHTMLリクエストを探してくださ
い。そのリクエストには"networkNum:"というフィールドが含まれて
いるはずです。
2. "networkNum:"の後ろの番号をコピーし、画面に入力して
「Check」をクリックしてください。
1 2 3 4 5 6
Try it!
1.
2.

26. 「ネットワーク」タブの動きを見てみよう
ヒント1
ネットワークタブ上で一旦履歴をクリアしてから行うとどのリクエス
トか分かりやすいです。
ヒント2
リクエストの名前は”network”です。
※WebGoatでは”dummy”とありますが、これは誤り
1 2 3 4 5 6
Try it!

27. 「ネットワーク」タブの動きを見てみよう
1 2 3 4 5 6
Try it!
この値を入力
networkリクエストをクリック

28. 以上