diff --git a/webgoat-lessons/chrome-dev-tools/pom.xml b/webgoat-lessons/chrome-dev-tools/pom.xml new file mode 100644 index 000000000..e5e46255d --- /dev/null +++ b/webgoat-lessons/chrome-dev-tools/pom.xml @@ -0,0 +1,11 @@ + + 4.0.0 + chrome-dev-tools + jar + + org.owasp.webgoat.lesson + webgoat-lessons-parent + v8.0.0.SNAPSHOT + + \ No newline at end of file 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 new file mode 100644 index 000000000..d97d490e9 --- /dev/null +++ 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 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 new file mode 100644 index 000000000..008834a08 --- /dev/null +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/html/ChromeDevTools.html @@ -0,0 +1,37 @@ + + + + +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + \ No newline at end of file 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 new file mode 100644 index 000000000..526d44892 --- /dev/null +++ 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. \ No newline at end of file diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Clear.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Clear.JPG new file mode 100644 index 000000000..d0018cd6b Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Clear.JPG differ diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Ex.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Ex.JPG new file mode 100644 index 000000000..ed292b116 Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Console_Ex.JPG differ 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 new file mode 100644 index 000000000..2613837e5 Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements.JPG differ diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements_CSS.JPG b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements_CSS.JPG new file mode 100644 index 000000000..867a5769c Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Elements_CSS.JPG differ 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 new file mode 100644 index 000000000..44a916d20 Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Network.JPG differ 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 new file mode 100644 index 000000000..8d09b87b0 Binary files /dev/null and b/webgoat-lessons/chrome-dev-tools/src/main/resources/images/ChromeDev_Sources.JPG differ diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc new file mode 100644 index 000000000..2978c2568 --- /dev/null +++ b/webgoat-lessons/chrome-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/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc new file mode 100644 index 000000000..8899584ff --- /dev/null +++ b/webgoat-lessons/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"] \ No newline at end of file diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc new file mode 100644 index 000000000..5a61a76d2 --- /dev/null +++ b/webgoat-lessons/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 (

...

) 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"] \ No newline at end of file diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc new file mode 100644 index 000000000..8e72ad73f --- /dev/null +++ b/webgoat-lessons/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. \ No newline at end of file diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc new file mode 100644 index 000000000..d606e5d71 --- /dev/null +++ b/webgoat-lessons/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"] \ No newline at end of file diff --git a/webgoat-lessons/pom.xml b/webgoat-lessons/pom.xml index 7f651a3bd..878490b4e 100644 --- a/webgoat-lessons/pom.xml +++ b/webgoat-lessons/pom.xml @@ -21,6 +21,7 @@ html-tampering http-basics cia + chrome-dev-tools http-proxies insecure-login insecure-deserialization diff --git a/webgoat-server/pom.xml b/webgoat-server/pom.xml index dc7b45b7d..784d969e9 100644 --- a/webgoat-server/pom.xml +++ b/webgoat-server/pom.xml @@ -135,6 +135,11 @@ cia ${project.version} + + org.owasp.webgoat.lesson + chrome-dev-tools + ${project.version} + org.owasp.webgoat.lesson idor