Submit Search
Upload
Developer tools
•
0 likes
•
144 views
OWASP Nagoya
Follow
WebGoat HandsOn-Developer tools 2021.11.19
Read less
Read more
Software
Report
Share
Report
Share
1 of 28
Download now
Download to read offline
Recommended
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
flash develop
flash develop
smallworkshop
Markdown で行こう!
Markdown で行こう!
博文 斉藤
独りガラパゴス開発
独りガラパゴス開発
道化師 堂華
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
Chrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
さわってみよう Firefox OS in 福岡
さわってみよう Firefox OS in 福岡
Honma Masashi
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Recommended
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
flash develop
flash develop
smallworkshop
Markdown で行こう!
Markdown で行こう!
博文 斉藤
独りガラパゴス開発
独りガラパゴス開発
道化師 堂華
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
Chrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
さわってみよう Firefox OS in 福岡
さわってみよう Firefox OS in 福岡
Honma Masashi
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Yoshihisa Ozaki
Chromeデベロッパーツール
Chromeデベロッパーツール
Keiichi Kobayashi
パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)
Masahiro Yamada
Herlockサービス紹介
Herlockサービス紹介
SONICMOOV CO.,LTD.
Devtools.next
Devtools.next
yoshikawa_t
“debug.gem”の 利用体験・開発効率の向上
“debug.gem”の 利用体験・開発効率の向上
Naoto Ono
“debug.gem”の 利用体験・開発効率の向上.pdf
“debug.gem”の 利用体験・開発効率の向上.pdf
Naoto Ono
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Taiji Miyabe
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
Atsushi Tadokoro
開発ツールの紹介(080316)
開発ツールの紹介(080316)
柴田 篤志
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
Kintone vs Salesforce vs Google
Kintone vs Salesforce vs Google
Daisuke Sugai
Firefox DevTools
Firefox DevTools
dynamis
Build 2022 / Uno Platform
Build 2022 / Uno Platform
m ishizaki
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP Nagoya
OWASP Top 10 - 2021 Overview
OWASP Top 10 - 2021 Overview
OWASP Nagoya
More Related Content
Similar to Developer tools
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Yoshihisa Ozaki
Chromeデベロッパーツール
Chromeデベロッパーツール
Keiichi Kobayashi
パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)
Masahiro Yamada
Herlockサービス紹介
Herlockサービス紹介
SONICMOOV CO.,LTD.
Devtools.next
Devtools.next
yoshikawa_t
“debug.gem”の 利用体験・開発効率の向上
“debug.gem”の 利用体験・開発効率の向上
Naoto Ono
“debug.gem”の 利用体験・開発効率の向上.pdf
“debug.gem”の 利用体験・開発効率の向上.pdf
Naoto Ono
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Taiji Miyabe
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
Atsushi Tadokoro
開発ツールの紹介(080316)
開発ツールの紹介(080316)
柴田 篤志
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
Kintone vs Salesforce vs Google
Kintone vs Salesforce vs Google
Daisuke Sugai
Firefox DevTools
Firefox DevTools
dynamis
Build 2022 / Uno Platform
Build 2022 / Uno Platform
m ishizaki
Similar to Developer tools
(20)
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Microsoft によるオープンなweb デバッグ環境 comm tech festival-
Chromeデベロッパーツール
Chromeデベロッパーツール
パッチを書いてみよう(第17回Nseg勉強会LT)
パッチを書いてみよう(第17回Nseg勉強会LT)
Herlockサービス紹介
Herlockサービス紹介
Devtools.next
Devtools.next
“debug.gem”の 利用体験・開発効率の向上
“debug.gem”の 利用体験・開発効率の向上
“debug.gem”の 利用体験・開発効率の向上.pdf
“debug.gem”の 利用体験・開発効率の向上.pdf
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
開発ツールの紹介(080316)
開発ツールの紹介(080316)
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
Kintone vs Salesforce vs Google
Kintone vs Salesforce vs Google
Firefox DevTools
Firefox DevTools
Build 2022 / Uno Platform
Build 2022 / Uno Platform
More from OWASP Nagoya
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP Nagoya
OWASP Top 10 - 2021 Overview
OWASP Top 10 - 2021 Overview
OWASP Nagoya
(A7)cross site scripting
(A7)cross site scripting
OWASP Nagoya
#24 prepare for_hands-on
#24 prepare for_hands-on
OWASP Nagoya
(A2)broken authentication
(A2)broken authentication
OWASP Nagoya
#23 prepare for_hands-on
#23 prepare for_hands-on
OWASP Nagoya
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP Nagoya
Rethinking car security based on autonomous driving and advanced driving support
Rethinking car security based on autonomous driving and advanced driving support
OWASP Nagoya
Owasp top10 2017 a4 xxe
Owasp top10 2017 a4 xxe
OWASP Nagoya
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya
OWASP Nagoya_WordPress_Handson_2
OWASP Nagoya_WordPress_Handson_2
OWASP Nagoya
OWASP Nagoya_WordPress_Handson_1
OWASP Nagoya_WordPress_Handson_1
OWASP Nagoya
20190208 脆弱性と共生するには
20190208 脆弱性と共生するには
OWASP Nagoya
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
OWASP Nagoya
20180601 OWASP Top 10 2017の読み方
20180601 OWASP Top 10 2017の読み方
OWASP Nagoya
WPSCanによるWordPressの脆弱性スキャン
WPSCanによるWordPressの脆弱性スキャン
OWASP Nagoya
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP Nagoya
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築)
OWASP Nagoya
20170909 第13回名古屋情報セキュリティ勉強会 LT
20170909 第13回名古屋情報セキュリティ勉強会 LT
OWASP Nagoya
More from OWASP Nagoya
(19)
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP TOP10 A01:2021 – アクセス制御の不備
OWASP Top 10 - 2021 Overview
OWASP Top 10 - 2021 Overview
(A7)cross site scripting
(A7)cross site scripting
#24 prepare for_hands-on
#24 prepare for_hands-on
(A2)broken authentication
(A2)broken authentication
#23 prepare for_hands-on
#23 prepare for_hands-on
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
Rethinking car security based on autonomous driving and advanced driving support
Rethinking car security based on autonomous driving and advanced driving support
Owasp top10 2017 a4 xxe
Owasp top10 2017 a4 xxe
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_3
OWASP Nagoya_WordPress_Handson_2
OWASP Nagoya_WordPress_Handson_2
OWASP Nagoya_WordPress_Handson_1
OWASP Nagoya_WordPress_Handson_1
20190208 脆弱性と共生するには
20190208 脆弱性と共生するには
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
20181117-一般的な脆弱性の概要・対策を知り、ZAPで見つけてみよう!
20180601 OWASP Top 10 2017の読み方
20180601 OWASP Top 10 2017の読み方
WPSCanによるWordPressの脆弱性スキャン
WPSCanによるWordPressの脆弱性スキャン
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築ハンズオン手順書)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築)
OWASP WordPressセキュリティ実装ガイドライン (セキュアなWordPressの構築)
20170909 第13回名古屋情報セキュリティ勉強会 LT
20170909 第13回名古屋情報セキュリティ勉強会 LT
Developer tools
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の開き方例2) ブラウザのメニューから 「その他ツール」→「ウェブ開発ツール」の順に選択
7.
Developer Tools 1 2
3 4 5 6
8.
Developer Tools 1 2
3 4 5 6 (Developer Toolsの開き方例3) キーボードショートカットの 【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.
以上
Download now