Adding ZAP content for HTTP Basics

webgoat-container/src/main/resources/static/css/main.css

@@ -205,6 +205,10 @@ img {
   padding:3px !important;
 }
 
+div.lesson-image img {
+    border:2px solid #aaa;
+    border-radius:8px;
+}
 /* ==========================================================================
   Buttons
    ========================================================================== */
@@ -475,6 +479,7 @@ fieldset[disabled] .btn-success.active {
   background: #f2ca27;
   border-color: #f2ca27;
 }
+
 .btn-warning.disabled,
 .btn-warning[disabled],
 fieldset[disabled] .btn-warning,
@@ -499,6 +504,7 @@ fieldset[disabled] .btn-warning.active {
   font-size: 18px;
   line-height: 1.33;
 }
+
 .btn-sm {
   padding: 5px 10px;
   font-size: 12px;
@@ -509,6 +515,7 @@ fieldset[disabled] .btn-warning.active {
   -o-border-radius: 3px;
   border-radius: 3px;
 }
+
 .btn-xs {
   padding: 1px 5px;
   font-size: 12px;
@@ -525,6 +532,7 @@ fieldset[disabled] .btn-warning.active {
 .breadcrumb {
   background: none;
 }
+
 .breadcrumb > li {
   font-size: 12px;
 }
@@ -534,6 +542,7 @@ fieldset[disabled] .btn-warning.active {
 .fa-hover {
   margin: 5px 0;
 }
+
 .fa-hover i {
   font-size: 14px;
   margin-right: 5px;
@@ -551,61 +560,74 @@ fieldset[disabled] .btn-warning.active {
   -o-border-radius: 3px;
   border-radius: 3px;
 }
+
 .panel > .panel-heading {
   font-size: 13px;
   font-weight: 400;
   text-transform: uppercase;
   padding: 15px;
 }
+
 .panel .actions {
   position: absolute;
   right: 30px;
   top: 18px;
 }
+
 .panel .actions i {
   font-size: 1em;
   margin: 0 3px;
 }
+
 .panel .actions i:hover {
   cursor: pointer;
 }
+
 .panel > .panel-footer {
   font-size: 13px;
   font-weight: 400;
   text-transform: uppercase;
   padding: 15px;
 }
+
 .panel-default > .panel-heading {
   border-color: #eff2f7;
   background: #fafafa;
   color: #767676;
 }
+
 .panel-default .actions i {
   font-size: 1em;
   color: #bdc3c7;
   margin: 0 3px;
 }
+
 .panel-default .actions i:hover {
   cursor: pointer;
   color: #767676;
 }
+
 .panel-default > .panel-footer {
   border-color: #eff2f7;
   background: #fafafa;
   color: #767676;
 }
+
 .panel-primary > .panel-heading {
   color: #fff;
   background-color: #e84c3d;
   border-color: #e84c3d;
 }
+
 .panel-primary {
   border-color: #e84c3d;
 }
+
 .panel-primary > .panel-heading a,
 .panel-primary > .panel-heading a:hover {
   color: #fff;
 }
+
 .panel-solid-default > .panel-heading,
 .panel-solid-default > .panel-body,
 .panel-solid-default > .panel-footer {
@@ -613,6 +635,7 @@ fieldset[disabled] .btn-warning.active {
   color: #fff;
   border: none;
 }
+
 .panel-solid-primary > .panel-heading,
 .panel-solid-primary > .panel-body,
 .panel-solid-primary > .panel-footer {
@@ -620,6 +643,7 @@ fieldset[disabled] .btn-warning.active {
   color: #fff;
   border: none;
 }
+
 .panel-solid-success > .panel-heading,
 .panel-solid-success > .panel-body,
 .panel-solid-success > .panel-footer {
@@ -627,6 +651,7 @@ fieldset[disabled] .btn-warning.active {
   color: #fff;
   border: none;
 }
+
 .panel-solid-warning > .panel-heading,
 .panel-solid-warning > .panel-body,
 .panel-solid-warning > .panel-footer {
@@ -634,6 +659,7 @@ fieldset[disabled] .btn-warning.active {
   color: #fff;
   border: none;
 }
+
 .panel-solid-info > .panel-heading,
 .panel-solid-info > .panel-body,
 .panel-solid-info > .panel-footer {
@@ -641,6 +667,7 @@ fieldset[disabled] .btn-warning.active {
   color: #fff;
   border: none;
 }
+
 .panel-solid-danger > .panel-heading,
 .panel-solid-danger > .panel-body,
 .panel-solid-danger > .panel-footer {
@@ -822,6 +849,7 @@ cookie-container {
 .sidebar-toggle {
   margin-left: -240px;
 }
+
 #menu-container ul,
 #menu-container ul ul {
   margin: -2px 0 0;
@@ -859,6 +887,7 @@ cookie-container {
   margin-right: 0;
   border-bottom: none;
 }
+
 #menu-container ul ul li a {
   font-size: 11px;
   padding-top: 5px;
@@ -867,19 +896,24 @@ cookie-container {
   color: #fff;
   margin-left:8px;
 }
+
 #menu-container ul li a i {
   width: 20px;
 }
+
 #menu-container ul li a i.fa-angle-right,
 #menu-container ul li a i.fa-angle-left {
   padding-top: 3px;
 }
+
 #menu-container ul ul {
   display: none;
 }
+
 #menu-container li.active ul {
   display: block;
 }
+
 #menu-container ul li a:hover,
 #menu-container ul li.active > a {
   color: #e84c3d;
@@ -971,7 +1005,6 @@ font-size: 1.3em;
 }
 
 /* ATTACK DISPLAY */
-
 .attack-container {
   background-color: #f1f1f1;
   border: 2px solid #a66;

webgoat-lessons/http-basics/src/main/resources/plugin/HttpBasics/html/HttpBasics.html

@@ -85,4 +85,25 @@
 
 		</div>
 	</div>
+
+	<div class="lesson-page-wrapper">
+		<!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
+		<!-- include content here. Content will be presented via asciidocs files,
+        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
+		<div class="adoc-content" th:replace="doc:HttpBasics_ProxyIntro1.adoc"></div>
+	</div>
+
+    <div class="lesson-page-wrapper">
+        <!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
+        <!-- include content here. Content will be presented via asciidocs files,
+        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
+        <div class="adoc-content" th:replace="doc:HttpBasics_ProxyIntro2.adoc"></div>
+    </div>
+
+	<div class="lesson-page-wrapper">
+		<!-- reuse this lesson-page-wrapper block for each 'page' of content in your lesson -->
+		<!-- include content here. Content will be presented via asciidocs files,
+        which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
+		<div class="adoc-content" th:replace="doc:HttpBasics_ProxyIntro3.adoc"></div>
+	</div>
 </html>

webgoat-lessons/http-basics/src/main/resources/plugin/HttpBasics/lessonPlans/en/HttpBasics_ProxyIntro1.adoc

@@ -0,0 +1,30 @@
+= HTTP Basics : Proxy
+ 
+== HTTP Proxy Setup
+
+HTTP Proxies are tools that allow an attacker, developer or researcher to act as a man-in-the-middle on requests and responses. Since this is an
+OWASP project, we'll be using ZAP. If you are comfortable using another proxy (e.g. Burp), you can skip this. Otherwise,
+this will show you how to set up ZAP to act as a proxy on your localhost.
+
+=== Setting up ZAP
+
+Once you have 'installed' ZAP (you don't really install it, just unpack it and run it locally), we will need to:
+
+* Start ZAP
+* Configure the local proxy port
+* Point the browser at the proxy
+
+=== Start ZAP
+When ZAP starts, you will be presented with a dialog such as the one below ...
+
+image::plugin_lessons/plugin/HttpBasics/images/zap-start.png[ZAP Start,548,256,style="lesson-image"]
+
+=== Configure Proxy's Port
+
+. Select Tools > Options from the menu
+. Select Local Proxy on the left
+. Choose an available port ... Since WebGoat is using port 8080, use something different like 8090
+. Click OK
+
+image::plugin_lessons/plugin/HttpBasics/images/zap-local-proxy.png[ZAP local proxy,800,648,style="lesson-image"]
+

webgoat-lessons/http-basics/src/main/resources/plugin/HttpBasics/lessonPlans/en/HttpBasics_ProxyIntro2.adoc

@@ -0,0 +1,31 @@
+== HTTP Proxy Setup: The Browser
+
+=== Point Browser at Proxy
+
+There are many plugins to manage this, but this will show you how to do this manually in Firefox and Chrome.
+This will send all of your traffic to the proxy. Since we haven't set up a trusted cert. yet, that may cause issues with any https requests. More on that in a bit though. Let's stick to basics for now:
+
+==== Firefox Proxy Config
+
+. Go to your Firefox Preferences (Mac, Linux) or Options (Windows) from the menu.
+. Select _Advanced_ on the left
+. Select _Network_ in the in Advanced Pane
+. Click _Settings_
+. Select _Manual proxy configuration_
+.. input *127.0.0.1* as the Proxy
+.. input *8090* as the port
+.. check the _Use this proxy server for all protocols_ checkbox
+
+image::plugin_lessons/plugin/HttpBasics/images/firefox-proxy-config.png[Firefox Proxy Config,510,634,style="lesson-image"]
+
+==== Chrome Proxy Config
+
+. Bring up Chrome's settings form the menu
+. In the _Search settings_ box type in *proxy* and hit Enter/Return. This should bring up the Network heading with a _Change proxy settings_ button.
+. Click the _Change proxy settings_ button
+. Select the _proxies_ tab
+. Select Web Proxy (HTTP)
+. Input 127..0.0.1 in the first box under _Web Proxy Server_ and your port # (8090 is what used earlier) in the second box (to the right)
+. You may also want to clear the _Bypass proxy settings for these Hosts & Domains_ text input at the bottom, but shouldn't need to
+
+image::plugin_lessons/plugin/HttpBasics/images/chrome-manual-proxy.png[Chrome Proxy Config,700,447,style="lesson-image"]

webgoat-lessons/http-basics/src/main/resources/plugin/HttpBasics/lessonPlans/en/HttpBasics_ProxyIntro3.adoc

@@ -0,0 +1,6 @@
+=== Confirm it's working
+
+You should now be able to browse somewhere. We suggest starting with a plain http host.
+If it's working, ZAP's history tab will start to look something like this.
+
+image::plugin_lessons/plugin/HttpBasics/images/zap-history.png[ZAP history tab,1269,337,style="lesson-image"]