Renamed to chromedevtools

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_Assignment.adoc

@@ -0,0 +1,8 @@
+== Try It! Using the console
+
+Let us try it. Use the console in the dev tools and call the javascript function *webgoat.customjs.phoneHome()*. +
+You should get a response in the console. Your result should look something like this:
+`phone home said
+{"lessonCompleted:true, ... ,"output":"phone home response is..."`
+Paste the random number, after that, in the text field below.
+(Make sure you got the most recent number since it is randomly generated each time you call the function)

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_Assignment_Network.adoc

@@ -0,0 +1,6 @@
+== Try It! Working with the Network tab
+
+In this assignment, you need to find a specific HTTP request and read a randomized number.
+To start, click the first button. This will generate an HTTP request. Try to find the specific HTTP request.
+The request should contain a field: `networkNum:`
+Copy the number displayed afterward into the input field below and click on the check button.

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_console.adoc

@@ -0,0 +1,17 @@
+== The Console tab
+
+In the console tab, you can see anything that a loaded JavaScript file may have printed out.
+Do not 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 line of JavaScript code.
+
+Start by clearing the console using the shortcut `CTRL+L.`
+
+To run your JavaScript, click inside of the console and write something like:
+`console.log("Hello WebGoat!");` Hit enter. `Hello WebGoat` should now appear in your console.
+The console also allows you to do some basic arithmetic. If you type, for example, `1+3` and hit
+enter, the console should display 4.
+
+Note: You may see an `undefined` in the console. You can safely  ignore this statement,
+it only means that the JavaScript function you have called did not return anything, therefore `undefined.`
+
+image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_elements.adoc

@@ -0,0 +1,22 @@
+== The Elements Tab
+
+The elements tab allows you to look at the HTML and CSS code used to define and style the website.
+
+=== HTML source
+
+If you hover over one line, you can see that 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 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
+
+You can find information about the CSS used to style the
+website under the HTML source. Like the HTML, you can also edit the CSS and, therefore, adjust the website's styling.
+You can edit specific values or turn off individual styling.
+
+image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]

src/main/resources/lessons/chromedevtools/documentation/ChromeDevTools_intro.adoc

@@ -0,0 +1,19 @@
+== 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 that allow you to do that and much more.
+While these tools are not specific to Google Chrome, almost every modern browser has a bunch
+of its 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
+maybe different for you.
+
+Keep in mind that the following tutorial is not there to teach everything about these tools.
+This tutorial will only focus on the essential knowledge to complete specific assignments.
+Also, if you are already familiar with these tools, you can safely skip these lessons.
+
+To get started: *open the developer tools*. There are multiple ways to open them:
+
+1. Right-click anywhere in the browser window and select the option _"Inspect"_.
+2. Go to the browser menu (three dots in the top right corner), then go to _"More tools"_ and select the option _"Developer tools"_.
+3. Use the keyboard shortcut _Ctrl + Shift + I_

src/main/resources/lessons/chromedevtools/documentation/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 used to
+create the website. 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.
+Just click on it if you want more detailed information on a particular request.
+The "Timeline" above the blue dots represents when these requests and responses have been performed.
+You can also see the Requests done in a specific time frame simply by clicking and dragging on the timeline. The window
+below will only show the requests and responses done in that time frame.
+
+image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]

src/main/resources/lessons/chromedevtools/html/ChromeDevTools.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<!-- 1 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/ChromeDevTools_intro.adoc"></div>
+</div>
+
+<!-- 2 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/ChromeDevTools_elements.adoc"></div>
+</div>
+
+<!-- 3 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/ChromeDevTools_console.adoc"></div>
+</div>
+
+<!-- 4 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/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/ChromeDevTools/dummy">
+            <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>
+
+<!-- 5 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/ChromeDevTools_sources.adoc"></div>
+</div>
+
+<!-- 6 -->
+<div class="lesson-page-wrapper">
+    <div class="adoc-content" th:replace="doc:lessons/chromedevtools/documentation/ChromeDevTools_Assignment_Network.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="form"
+              action="/WebGoat/ChromeDevTools/network">
+            <script>
+                // sample custom javascript in the recommended way ...
+                // a namespace has been assigned for it, but you can roll your own if you prefer
+                document.getElementById("btn").addEventListener("click", function() {
+                    document.getElementById("networkNum").value = Math.random() * 100;
+                    document.getElementById("networkNumCopy").value = document.getElementById("networkNum").value;
+                });
+            </script>
+            <input type="hidden" name="networkNum" id="networkNum" value="foo" />
+            <table>
+                <tr>
+                    <td>Click this button to make a request:</td>
+                    <td><input id="btn" name="SUBMIT" value="Go!" type="SUBMIT" /></td>
+                    <td></td>
+                </tr>
+            </table>
+        </form>
+
+        <form class="attack-form" accept-charset="UNKNOWN"
+              method="POST" name="form"
+              action="/WebGoat/ChromeDevTools/network">
+            <table>
+                <tr>
+                    <td>What is the number you found:   </td>
+                    <td><input name="number" type="text"/></td>
+                    <td><input type="submit" name="Submit" value="check"/></td>
+                    <td></td>
+                </tr>
+            </table>
+            <input type="hidden" name="network_num" id="networkNumCopy" value="foo" />
+        </form>
+        <div class="attack-feedback"></div>
+        <div class="attack-output"></div>
+    </div>
+</div>
+
+</html>

src/main/resources/lessons/chromedevtools/i18n/WebGoatLabels.properties

@@ -0,0 +1,11 @@
+3.chrome-dev-tools.title=Developer Tools
+
+xss-dom-message-success=Correct!
+xss-dom-message-failure=Incorrect.
+
+network.request=You made a HTTP Request.
+network.success=Correct, Well Done.
+network.failed=That is not correct, try again.
+
+networkHint1=Clear all Requests from the network button, then make the request. The you should be able to figure out, which request holds the data.
+networkHint2=The name of the request is "dummy"