dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update documentation

Browse Source
This commit is contained in:
Nanne Baars 2021-12-13 20:20:54 +01:00 committed by Nanne Baars
parent 69a93f30d2
commit 5089c107ba
6 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc
View File

@ -1,8 +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:
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)
(Make sure you got the most recent number since it is randomly generated each time you call the function)

6
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc
View File

@ -1,6 +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 from it.
To start click the first button, this wil generate an HTTP request. Try to find the specific HTTP request.
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 which is displayed afterwards, into the input field below and click on the check button.
Copy the number displayed afterward into the input field below and click on the check button.

18
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc
View File

@ -1,17 +1,17 @@
== The Console tab
In the console tab you can see anything, which a loaded JavaScript file may have printed out to it.
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 own line of JavaScript code.
Through the console tab, it is also possible for you to run your line of JavaScript code.
Start by clearing console using the shortcut `CTRL+L`.
Start by clearing the console using the shortcut `CTRL+L.`
To run your own JavaScript, simply 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.
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`.
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"]
image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]

20
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc
View File

@ -1,22 +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.
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
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 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.
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
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.
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"]
image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]

24
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc
View File

@ -1,19 +1,19 @@
== Google Chrome Developer Tools
To complete certain assignments you sometimes may have to look at the JavaScript
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 you 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.
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 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.
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:
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"_.
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_
3. Use the keyboard shortcut _Ctrl + Shift + I_

16
webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc
View File

@ -1,16 +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.
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.
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 time 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.
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"]
image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]