Added Tutorial for Chrome Developer Tools.
This commit is contained in:
Tobias_Melzer
Nanne Baars
parent
eb29ed00ff
commit
af565b5035
11
webgoat-lessons/chrome-dev-tools/pom.xml
Normal file
11
webgoat-lessons/chrome-dev-tools/pom.xml
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
<artifactId>chrome-dev-tools</artifactId>
|
||||||
|
<packaging>jar</packaging>
|
||||||
|
<parent>
|
||||||
|
<groupId>org.owasp.webgoat.lesson</groupId>
|
||||||
|
<artifactId>webgoat-lessons-parent</artifactId>
|
||||||
|
<version>v8.0.0.SNAPSHOT</version>
|
||||||
|
</parent>
|
||||||
|
</project>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
package org.owasp.webgoat.plugin;
|
||||||
|
|
||||||
|
import com.beust.jcommander.internal.Lists;
|
||||||
|
import org.owasp.webgoat.lessons.Category;
|
||||||
|
import org.owasp.webgoat.lessons.NewLesson;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class ChromeDevTools extends NewLesson {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public Category getDefaultCategory() {
|
||||||
|
return Category.GENERAL;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public List<String> getHints() {
|
||||||
|
return Lists.newArrayList();
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public Integer getDefaultRanking() {
|
||||||
|
return 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String getTitle() {
|
||||||
|
return "chrome-dev-tools.title";
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String getId() {
|
||||||
|
return "ChromeDevTools";
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
|
<div class="lesson-page-wrapper">
|
||||||
|
<div class="adoc-content" th:replace="doc:ChromeDevTools_intro.adoc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lesson-page-wrapper">
|
||||||
|
<div class="adoc-content" th:replace="doc:ChromeDevTools_elements.adoc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lesson-page-wrapper">
|
||||||
|
<div class="adoc-content" th:replace="doc:ChromeDevTools_console.adoc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lesson-page-wrapper">
|
||||||
|
<div class="adoc-content" th:replace="doc:ChromeDevTools_Assignment.adoc"></div>
|
||||||
|
<div class="attack-container">
|
||||||
|
<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
|
||||||
|
<form class="attack-form" accept-charset="UNKNOWN"
|
||||||
|
method="POST" name="DOMFollowUp"
|
||||||
|
action="/WebGoat/CrossSiteScripting/dom-follow-up"
|
||||||
|
enctype="application/json;charset=UTF-8">
|
||||||
|
<input name="successMessage" value="" type="TEXT" />
|
||||||
|
<input name="submitMessage" value="Submit" type="SUBMIT"/>
|
||||||
|
</form>
|
||||||
|
<div class="attack-feedback"></div>
|
||||||
|
<div class="attack-output"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lesson-page-wrapper">
|
||||||
|
<div class="adoc-content" th:replace="doc:ChromeDevTools_sources.adoc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
chrome-dev-tools.title=Google Chrome Developer Tools
|
||||||
|
|
||||||
|
xss-dom-message-success=Correct!
|
||||||
|
xss-dom-message-failure=Incorrect.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@ -0,0 +1,5 @@
|
|||||||
|
== Try It! Using the Console
|
||||||
|
|
||||||
|
In this Assignment your task is to, call a Webgoat-specific JavaScript function, called
|
||||||
|
*webgoat.customjs.phoneHome()*
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
== The Console tab
|
||||||
|
|
||||||
|
In the console tab you can see anything, which a loaded JavaScript file may have printed out to it.
|
||||||
|
Don't worry if you see something in red. While that is an error, it has probably resolved itself.
|
||||||
|
Through the Console Tab, it is also possible for you to run your own line of javascript code.
|
||||||
|
|
||||||
|
Start by clearing console using the shortcut CTRL+L.
|
||||||
|
|
||||||
|
To run your own JavaScript. Simply click inside of the console, write something like:
|
||||||
|
`console.log("Hello WebGoat!");` and hit enter. Hello WebGoat should now appear in your console.
|
||||||
|
You can also do some basic arithmetic, with the console. If you type for example `1+3` and hit
|
||||||
|
enter the console should display 4.
|
||||||
|
|
||||||
|
Note: The `undefined` that may also appear in the console if you hit enter. You can safely ignore this Statement,
|
||||||
|
it does only mean, that the JavaScript function you have called did not return anything, therefor `undefined`.
|
||||||
|
|
||||||
|
image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
== The Elements Tab
|
||||||
|
|
||||||
|
The Elements Tab allows you to look at the HTML and CSS code, that are used to define and style the Website.
|
||||||
|
|
||||||
|
=== HTML Source
|
||||||
|
|
||||||
|
If you hover over one line you can see a part of the website turns blue. That means that
|
||||||
|
this particular HTML line defines this section of the Website.
|
||||||
|
The Elements tab allows you to make changes to every single HTML element. For example if you click inside
|
||||||
|
a Paragraph (<p>...</p>) Tag you can edit the content of the website. If you have made your changes and then click enter
|
||||||
|
Chrome will actually update the website to show your edits. You can also change the HTML Tag used,
|
||||||
|
the classes and id's a tag has and much more.
|
||||||
|
|
||||||
|
image::images/ChromeDev_Elements.jpg[DeveloperToolsElements,500,350,style="lesson-image"]
|
||||||
|
|
||||||
|
=== CSS Source
|
||||||
|
|
||||||
|
Underneath the HTML source, you can find information about the CSS which is used to style the
|
||||||
|
Website. Like the HTML, you can also edit the CSS and therefore adjust the styling of the website.
|
||||||
|
You can edit specific values, or turn off individual styling.
|
||||||
|
|
||||||
|
image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
== Google Chrome Developer Tools
|
||||||
|
|
||||||
|
To complete certain assignments you sometimes may have to look at the JavaScript
|
||||||
|
source code or run a JavaScript Command on your own.
|
||||||
|
To do that Google Chrome has a set of tools which allows to do that and much much more.
|
||||||
|
While these tools are not specific to Google Chrome, almost every modern browser has a set
|
||||||
|
of their own, our introduction will focus on the ones found in Google Chrome.
|
||||||
|
You can however still use the Browser of your choice, like Firefox or Safari, although some steps of this tutorial
|
||||||
|
may be different for you.
|
||||||
|
|
||||||
|
Keep in mind that the following tutorial, is not there to teach everything there is about these tools.
|
||||||
|
This tutorial will only focus on the essential knowledge you need to complete certain assignments.
|
||||||
|
Also if you are already familiar with these Tools you can safely skip these lessons.
|
||||||
|
|
||||||
|
To get started open the developer tools by right clicking anywhere and clicking "inspect"
|
||||||
|
or click the three vertical on the top right, go to more tools and then Developer tools.
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
== The Sources tab
|
||||||
|
|
||||||
|
In the sources tab you can check out the file system and view all the HTML, CSS and JavaScript files that are used, to
|
||||||
|
create the website. Simply click on a file to view its contents.
|
||||||
|
|
||||||
|
image::images/ChromeDev_Sources.jpg[DeveloperToolsSources,400,500,style="lesson-image"]
|
||||||
|
|
||||||
|
== The Network tab
|
||||||
|
|
||||||
|
In the Network tab you can view HTTP requests and responses the website has performed.
|
||||||
|
If you want more detailed information on a particular request, just click on it.
|
||||||
|
In the Timeline above the blue dots represent, when these requests and responses have been performed.
|
||||||
|
You can also see the Requests done in a specific tine frame, simply by clicking and dragging on the timeline. Now the Window
|
||||||
|
below, will only show the requests and responses done in that particular time frame.
|
||||||
|
|
||||||
|
image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]
|
||||||
@ -21,6 +21,7 @@
|
|||||||
<module>html-tampering</module>
|
<module>html-tampering</module>
|
||||||
<module>http-basics</module>
|
<module>http-basics</module>
|
||||||
<module>cia</module>
|
<module>cia</module>
|
||||||
|
<module>chrome-dev-tools</module>
|
||||||
<module>http-proxies</module>
|
<module>http-proxies</module>
|
||||||
<module>insecure-login</module>
|
<module>insecure-login</module>
|
||||||
<module>insecure-deserialization</module>
|
<module>insecure-deserialization</module>
|
||||||
|
|||||||
@ -135,6 +135,11 @@
|
|||||||
<artifactId>cia</artifactId>
|
<artifactId>cia</artifactId>
|
||||||
<version>${project.version}</version>
|
<version>${project.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.owasp.webgoat.lesson</groupId>
|
||||||
|
<artifactId>chrome-dev-tools</artifactId>
|
||||||
|
<version>${project.version}</version>
|
||||||
|
</dependency>
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.owasp.webgoat.lesson</groupId>
|
<groupId>org.owasp.webgoat.lesson</groupId>
|
||||||
<artifactId>idor</artifactId>
|
<artifactId>idor</artifactId>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user