<%@ page contentType="text/html; charset=ISO-8859-1" language="java" errorPage=""%> <%@page import="org.owasp.webgoat.session.WebSession"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% WebSession webSession = ((WebSession) session.getAttribute(WebSession.SESSION)); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <!-- CSS --> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/> <!-- Fonts from Font Awsome --> <link rel="stylesheet" href="css/font-awesome.min.css"/> <!-- CSS Animate --> <link rel="stylesheet" href="css/animate.css"/> <!-- Custom styles for this theme --> <link rel="stylesheet" href="css/main.css"/> <!-- end of CSS --> <!-- JS --> <script src="js/angular/angular.min.js"></script> <!-- angular modules --> <script src="js/angular/angular-animate.min.js"></script> <script src="js/angular/ui-bootstrap-tpls-0.11.0.min.js"></script> <!-- Feature detection --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <!--Global JS--> <script src="js/jquery/jquery-1.10.2.min.js"></script> <script src="js/jquery_form/jquery.form.js"></script> <script src="plugins/bootstrap/js/bootstrap.min.js"></script> <script src="js/application.js"></script> <script type="text/javascript"> var goat = angular.module("goatApp", ['ngAnimate', 'ui.bootstrap']); </script> <script type="text/javascript" src="js/goatConstants.js"></script> <script type="text/javascript" src="js/goatUtil.js"></script> <script type="text/javascript" src="js/goatData.js"></script> <script type="text/javascript" src="js/goatLesson.js"></script> <script type="text/javascript" src="js/goatControllers.js"></script> <!-- end of JS --> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>WebGoat</title> </head> <body class="animated fadeIn" ng-app="goatApp"> <section id="container" ng-controller="goatLesson"> <header id="header"> <!--logo start--> <div class="brand"> <a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a> </div> <!--logo end--> <div class="toggle-navigation toggle-left"> <button type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation"> <i class="fa fa-bars"></i> </button> </div><!--toggle navigation end--> <div class="lessonTitle" > <h1 id="lessonTitle"></h1> </div><!--lesson title end--> <div class="user-nav pull-right" style="margin-right: 75px;"> <div class="dropdown" style="display:inline"> <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> <i class="fa fa-user"></i> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="<c:url value="j_spring_security_logout" />">Logout</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">User: ${user}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Role: ${role}</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">${version}</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Build: ${build}</a></li> </ul> </div> <button type="button" class="btn btn-default right_nav_button" ng-click="showAbout()" data-toggle="tooltip" title="About WebGoat"> <i class="fa fa-info"></i> </button> <a href="mailto:${contactEmail}?Subject=Webgoat%20feedback" target="_top"> <button type="button" class="btn btn-default right_nav_button"data-toggle="tooltip" title="Contact Us"> <i class="fa fa-envelope"></i> </button> </a> </div> </header> <!--sidebar left start--> <aside class="sidebar" > <div id="leftside-navigation" ng-controller="goatMenu" class="nano"> <ul class="nano-content"> <li class="sub-menu" ng-repeat="item in menuTopics"> <a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded--> <ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0> <li ng-repeat="lesson in item.children"> <a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a> <span ng-repeat="stage in lesson.children" > <a ng-click="renderLesson(stage.link)" title="link to {{stage.name}}" href="">{{stage.name}}</a> </span> </li> </ul> </li> </ul> </div> </aside> <!--sidebar left end--> <!--main content start--> <section class="main-content-wrapper"> <section id="main-content" > <!--ng-controller="goatLesson"--> <div class="row"> <div class="col-md-8"> <div class="col-md-12" align="left"> <div class="panel"> <div class="panel-body"> <button type="button" id="showSourceBtn" class="btn btn-primary btn-xs" ng-click="showLessonSource()">Java [Source]</button> <button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs" ng-click="showLessonSolution()">Solution</button> <button type="button" id="showPlanBtn" class="btn btn-primary btn-xs" ng-click="showLessonPlan()">Lesson Plan</button> <button type="button" id="showHintsBtn" class="btn btn-primary btn-xs" ng-click="viewHints()">Hints</button> </div> </div> <div class="lessonHelp" id="lesson_hint_row"> <h4>Hints</h4> <div class="panel" > <div class="panel-body" id="lesson_hint"> <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" ng-click="viewPrevHint()"></span> <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" ng-click="viewNextHint()"></span> <br/> <span id="curHintContainer"></span><!--{{curHint}}--> </div> </div> </div> </div> <div class="col-md-12"> <div class="panel" > <div class="panel-body" id="lesson_content"> <b>This should default to the "How to Work with Webgoat" lesson</b> </div> </div> </div> </div><!--col-md-8 end--> <div class="col-md-4"> <div class="col-md-12"> <div class="panel"> <div class="panel-body"> <div align="left"> <h3>Cookies / Parameters</h3> </div> <hr /> <div id="cookiesAndParamsView"> <div class="cookiesView"> <h4>Cookies</h4> <table class="cookieTable table-striped table-nonfluid" ng-repeat="cookie in cookies"> <thead> <tr><th>Field</th><th>Value</th></tr> </thead> <tbody> <tr ng-repeat="(key, value) in cookie"> <td>{{key}}</td> <td>{{value}}</td> </tr> </tbody> <!--<li ng-repeat="(key, value) in cookie">{{key}} :: {{ value}} </td>--> <!--</ul>--> </table> </div> <div id="paramsView"> <!--class="paramsView"--> <h4>Params</h4> <table class="paramsTable table-striped table-nonfluid" id="paramsTable"> <thead> <tr><th>Param</th><th>Value</th></tr> </thead> <tbody> <tr ng-repeat="param in parameters"> <td>{{param.name}}</td> <td>{{param.value}}</td> </tr> </tbody> </table> </ul> </div> </div> </div> </div> </div> </div><!--col-md-4 end--> </div> <div id="lessonHelpsWrapper"> <!--div class="row lessonHelp" id="lesson_hint_row"> <div class="col-md-12"> <h4>Hints</h4> <div class="panel" > <div class="panel-body" id="lesson_hint"> <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" ng-click="viewPrevHint()"></span> <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" ng-click="viewNextHint()"></span> <br/> {{curHint}} </div> </div> </div> </div--> <div class="row lessonHelp" id="lesson_cookies_row"> <div class="col-md-12"> <h4>Lesson Parameters and Cookies</h4> <div class="panel" > <div class="panel-body" id="lesson_cookies"> </div> </div> </div> </div> <div class="row lessonHelp" id="lesson_hint_row"> <div class="col-md-12"> <h4>Lesson Hints</h4> <div class="panel" > <div class="panel-body" id="lesson_hint"> </div> </div> </div> </div> <div class="row lessonHelp" id="lesson_plan_row"> <div class="col-md-12"> <h4>Lesson Plan</h4> <div class="panel" > <div class="panel-body" id="lesson_plan"> <!-- allowing jQuery to handle this one --> </div> </div> </div> </div> <div class="row lessonHelp" id="lesson_solution_row"> <div class="col-md-12"> <h4>Lesson Solution</h4> <div class="panel"> <div class="panel-body" id="lesson_solution"> </div> </div> </div> </div> <div class="row lessonHelp" id="lesson_source_row"> <div class="col-md-12"> <h4>Lesson Source Code</h4> <div class="panel"> <div class="panel-body" id="lesson_source"> <pre>{{source}}</pre> </div> </div> </div> </div> </div> </section> </section> <!--main content end--> </section> <!--main content end--> </section> <script> //Load global functions // set this to true if you want to see form submissions // set to false once we get all the kinks worked out var DEBUG_FORM_SUBMISSION = false; $(document).ready(function() { //TODO merge appliction.js code into other js files app.init(); }); // make all forms ajax forms var options = { target: '#lesson_content', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback, comment out after debugging success: showResponse // post-submit callback, comment out after debugging // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; // pre-submit callback function showRequest(formData, jqForm, options) { if (DEBUG_FORM_SUBMISSION) { // formData is an array; here we use $.param to convert it to a string to display it // but the form plugin does this for you automatically when it submits the data var queryString = $.param(formData); // jqForm is a jQuery object encapsulating the form element. To access the // DOM element for the form do this: // var formElement = jqForm[0]; alert('About to submit: \n\n' + queryString); } // here we could return false to prevent the form from being submitted; // returning anything other than false will allow the form submit to continue return true; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { // for normal html responses, the first argument to the success callback // is the XMLHttpRequest object's responseText property // if the ajaxForm method was passed an Options Object with the dataType // property set to 'xml' then the first argument to the success callback // is the XMLHttpRequest object's responseXML property // if the ajaxForm method was passed an Options Object with the dataType // property set to 'json' then the first argument to the success callback // is the json data object returned by the server if (DEBUG_FORM_SUBMISSION) { alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); } // JASON - SEE THIS HOOK // update lesson cookies and params // make any embedded forms ajaxy goat.utils.showLessonCookiesAndParams(); goat.utils.makeFormsAjax(); } </script> <!-- About WebGoat Modal --> <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <jsp:include page="../pages/about.jsp"/> </div> </div> </div> </body> </html>