#315 Adding UI handling and corresponding expected elements for html files for decoration. Inlucdes minor refactor

webgoat-container/src/main/java/org/owasp/webgoat/lessons/AttackResult.java

@@ -34,7 +34,7 @@ import lombok.Getter;
 @Getter
 public class AttackResult {
 
-    private boolean lessonCompleted;
+    private boolean assignmentCompleted;
     private String feedback;
     private String output;
 
@@ -48,7 +48,7 @@ public class AttackResult {
 
     public static AttackResult success(String feedback, String output) {
         AttackResult attackResult = new AttackResult();
-        attackResult.lessonCompleted = true;
+        attackResult.assignmentCompleted = true;
         attackResult.feedback = feedback;
         attackResult.output = output;
         return attackResult;
@@ -60,13 +60,13 @@ public class AttackResult {
 
     public static AttackResult failed(String feedback, String output) {
         AttackResult attackResult = new AttackResult();
-        attackResult.lessonCompleted = false;
+        attackResult.assignmentCompleted = false;
         attackResult.feedback = feedback;
         attackResult.output = output;
         return attackResult;
     }
 
     public boolean assignmentSolved() {
-        return lessonCompleted;
+        return assignmentCompleted;
     }
 }

webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js

@@ -64,8 +64,8 @@ define(['jquery',
                 this.listenTo(this.lessonContent,'content:loaded',this.onContentLoaded);
                 this.userAndInfoView = new UserAndInfoView();
                 this.menuButtonView = new MenuButtonView();
-                this.listenTo(this.lessonContentView, 'lesson:complete', this.updateMenu);
+                this.listenTo(this.lessonContentView, 'assignment:complete', this.updateMenu);
-                this.listenTo(this.lessonContentView, 'lesson:complete', this.updateLessonOverview);
+                this.listenTo(this.lessonContentView, 'assignment:complete', this.updateLessonOverview);
             };
 
             this.loadLesson = function(name,pageNum) {

webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js

@@ -114,13 +114,24 @@ define(['jquery',
             this.renderFeedback(data.feedback);
 
             this.renderOutput(data.output || "");
-            if (data.lessonCompleted) {
+            if (data.assignmentCompleted) {
-                this.curForm.reset();
+                this.markAssignmentComplete();
-                this.trigger('lesson:complete');
+                this.trigger('assignment:complete');
+            } else {
+                this.markAssignmentIncomplete();
             }
             return false;
         },
 
+        markAssignmentComplete: function () {
+            this.curForm.reset();
+            $(this.curForm).siblings('.assignment-success').find('i').removeClass('hidden');
+        },
+
+        markAssignmentIncomplete: function () {
+            $(this.curForm).siblings('.assignment-success').find('i').addClass('hidden');
+        },
+
         onErrorResponse: function (a,b,c) {
             console.error(a);
             console.error(b);

webgoat-container/src/main/resources/static/js/goatApp/view/LessonProgressView.js

@@ -16,7 +16,7 @@ define(['jquery',
                 }
             },
             render: function () {
-                if (this.model.get("lessonCompleted")) {
+                if (this.model.get("assignmentCompleted")) {
                     this.$el.html(this.model.get('successMessage'));
                 } else {
                     this.$el.html("");

webgoat-lessons/cross-site-scripting/src/main/resources/plugin/CrossSiteScripting/html/CrossSiteScripting.html

@@ -174,8 +174,8 @@
         which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
 		<div class="adoc-content" th:replace="doc:CrossSiteScripting_content6a.adoc"></div>
 		<div class="attack-container">
+			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
 			<!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
                 <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
                 <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
                 <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -193,7 +193,6 @@
 						</tr>
 					</table>
 				</form>
-			</div>
 			<!-- do not remove the two following div's, this is where your feedback/output will land -->
 			<div class="attack-feedback"></div>
 			<div class="attack-output"></div>
@@ -228,8 +227,9 @@
 		<div class="adoc-content"
 			th:replace="doc:CrossSiteScripting_content9a.adoc"></div>
 		<div class="attack-container">
+			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
 			<!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
+
 			<!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
 			<!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
 			<!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -263,7 +263,7 @@
 					</tbody>
 				</table>
 			</form>
-			</div>
+
 			<!-- do not remove the two following div's, this is where your feedback/output will land -->
 			<div class="attack-feedback"></div>
 			<div class="attack-output"></div>

webgoat-lessons/cross-site-scripting/src/main/resources/plugin/CrossSiteScripting/lessonPlans/en/CrossSiteScripting_content5b.adoc

@@ -0,0 +1,4 @@
+== Was it Really Reflected XSS?
+
+Now, was the last attack truly reflected XSS?
+

webgoat-lessons/csrf/src/main/resources/plugin/CSRF/html/CSRF.html

@@ -20,6 +20,7 @@
     <div class="adoc-content" th:replace="doc:XXE_simple.adoc"></div>
     <!-- if including attack, reuse this section, leave classes in place -->
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -69,6 +70,7 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:XXE_changing_content_type.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -128,6 +130,7 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:XXE_blind_assignment.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->

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

@@ -15,6 +15,7 @@
 		<div class="adoc-content" th:replace="doc:HttpBasics_content1.adoc"></div>
         <!-- if including attack, reuse this section, leave classes in place -->
 		<div class="attack-container">
+			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
 			<!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
             <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
             <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -44,8 +45,8 @@
         which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
 		<div class="adoc-content" th:replace="doc:HttpBasics_content2.adoc"></div>
 		<div class="attack-container">
+			<div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
 			<!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
                 <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
                 <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
                 <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -82,8 +83,6 @@
 				<div class="attack-output"></div>
 				<!-- ... of course, you can move them if you want to, but that will not look consistent to other lessons -->
 		</div>
-
-		</div>
 	</div>
 
 	<div class="lesson-page-wrapper">

webgoat-lessons/idor/src/main/resources/plugin/IDOR/html/IDOR.html

@@ -13,8 +13,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:IDOR_login.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div class="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -36,7 +36,6 @@
                 </tr>
             </table>
         </form>
-        </div>
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
@@ -50,8 +49,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:IDOR_viewDiffs.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -66,7 +65,6 @@
             <input name="View Profile" value="View Profile" type="button" onclick="onViewProfile();" />
 
         </form>
-        </div>
         <div id="idor-profile"></div>
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
@@ -75,8 +73,8 @@
     </div>
 
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div class="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -89,7 +87,6 @@
             <input name="attributes" type="text" />
             <input name="Submit Diffs" value="Submit Diffs" type="submit" />
         </form>
-        </div>
 
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
@@ -104,8 +101,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:IDOR_viewOwnAltPath.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div class="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -119,7 +116,6 @@
             <input name="url" value="WebGoat/" type="text"/>
             <input name="submit" value="Submit" type="SUBMIT"/>
         </form>
-        </div>
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
@@ -133,8 +129,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:IDOR_viewOtherProfile.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -149,7 +145,7 @@
             <input name="View Profile" value="View Profile" type="submit" />
 
         </form>
-        </div>
+
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
@@ -158,8 +154,8 @@
 
     <div class="adoc-content" th:replace="doc:IDOR_editOtherProfile.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-        <div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -174,7 +170,6 @@
             <input name="View Profile" value="View Profile" type="submit" />
 
         </form>
-        </div>
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>

webgoat-lessons/sql-injection/src/main/resources/plugin/SqlInjection/html/SqlInjection.html

@@ -45,8 +45,9 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:SqlInjection_content5a.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
+
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -63,7 +64,6 @@
                 </tr>
             </table>
         </form>
-			</div>
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
@@ -76,8 +76,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:SqlInjection_content5b.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -95,7 +95,7 @@
                 </tr>
             </table>
         </form>
-			</div>
+
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
@@ -114,8 +114,8 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:SqlInjection_content6a.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -133,15 +133,15 @@
                 </tr>
             </table>
         </form>
-			</div>
+
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>
         <!-- ... of course, you can move them if you want to, but that will not look consistent to other lessons -->
     </div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
-			<div id="lessonContent">
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -159,7 +159,7 @@
                 </tr>
             </table>
         </form>
-			</div>
+
         <!-- do not remove the two following div's, this is where your feedback/output will land -->
         <div class="attack-feedback"></div>
         <div class="attack-output"></div>

webgoat-lessons/xxe/src/main/resources/plugin/XXE/html/XXE.html

@@ -20,6 +20,8 @@
     <div class="adoc-content" th:replace="doc:XXE_simple.adoc"></div>
     <!-- if including attack, reuse this section, leave classes in place -->
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
+        <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -69,6 +71,7 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:XXE_changing_content_type.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->
@@ -128,6 +131,7 @@
     which you put in src/main/resources/plugin/lessonplans/{lang}/{fileName}.adoc -->
     <div class="adoc-content" th:replace="doc:XXE_blind_assignment.adoc"></div>
     <div class="attack-container">
+        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <!-- using attack-form class on your form will allow your request to be ajaxified and stay within the display framework for webgoat -->
         <!-- you can write your own custom forms, but standard form submission will take you to your endpoint and outside of the WebGoat framework -->
         <!-- of course, you can write your own ajax submission /handling in your own javascript if you like -->