Added Tutorial for Chrome Developer Tools.

guoqingz · Mar 26, 2019 · af565b5 · af565b5
1 parent eb29ed0
commit af565b5
Show file tree

Hide file tree

Showing 17 changed files with 169 additions and 0 deletions.
diff --git a/webgoat-lessons/chrome-dev-tools/pom.xml b/webgoat-lessons/chrome-dev-tools/pom.xml
@@ -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>
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/java/org/owasp/webgoat/plugin/ChromeDevTools.java b/webgoat-lessons/chrome-dev-tools/src/main/java/org/owasp/webgoat/plugin/ChromeDevTools.java
@@ -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";
+    }
+  }
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/html/ChromeDevTools.html b/webgoat-lessons/chrome-dev-tools/src/main/resources/html/ChromeDevTools.html
@@ -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>
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/i18n/WebGoatLabels.properties b/webgoat-lessons/chrome-dev-tools/src/main/resources/i18n/WebGoatLabels.properties
@@ -0,0 +1,4 @@
+chrome-dev-tools.title=Google Chrome Developer Tools
+
+xss-dom-message-success=Correct!
+xss-dom-message-failure=Incorrect.
diff --git a/...-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Clear.JPG b/...-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Clear.JPG
diff --git a/...oat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Ex.JPG b/...oat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Ex.JPG
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements.JPG
diff --git a/...t-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements_CSS.JPG b/...t-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements_CSS.JPG
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Network.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Network.JPG
diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Sources.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Sources.JPG
diff --git a/...rome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc b/...rome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc
@@ -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()*
+
diff --git a/.../chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc b/.../chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc
@@ -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"]
diff --git a/...chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc b/...chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc
@@ -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"]
diff --git a/...ns/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc b/...ns/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc
@@ -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.
diff --git a/.../chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc b/.../chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc
@@ -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"]
diff --git a/webgoat-lessons/pom.xml b/webgoat-lessons/pom.xml
@@ -21,6 +21,7 @@
         <module>html-tampering</module>
         <module>http-basics</module>
         <module>cia</module>
+        <module>chrome-dev-tools</module>
         <module>http-proxies</module>
         <module>insecure-login</module>
         <module>insecure-deserialization</module>

diff --git a/webgoat-server/pom.xml b/webgoat-server/pom.xml
@@ -135,6 +135,11 @@
             <artifactId>cia</artifactId>
             <version>${project.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.owasp.webgoat.lesson</groupId>
+            <artifactId>chrome-dev-tools</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <dependency>
             <groupId>org.owasp.webgoat.lesson</groupId>
             <artifactId>idor</artifactId>