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

2nd crack at ajaxifying links and forms (made harder since some lessons produce a 2nd form and links based on earlier input

Browse Source
This commit is contained in:
Rick Lawson 2014-09-25 21:25:22 -04:00
parent 019a148c9d
commit b5c40760a6
3 changed files with 188 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/main/java/org/owasp/webgoat/session/Screen.java
View File

@ -35,8 +35,8 @@ import org.owasp.webgoat.lessons.AbstractLesson;
* *
* Getting Source ============== * Getting Source ==============
* *
* Source for this application is maintained at https://github.com/WebGoat/WebGoat, a repository * Source for this application is maintained at
* for free software projects. * https://github.com/WebGoat/WebGoat, a repository for free software projects.
* *
* For details, please see http://webgoat.github.io * For details, please see http://webgoat.github.io
* *
@ -202,12 +202,11 @@ public abstract class Screen {
} }
// TODO we could hook all forms here with javascript call to ajax forms plugin // hook all the links
public String getContent() { public String getContent() {
String makeFormsAjax = "<script> $(document).ready(function() { makeFormsAjax(); });</script>"; String makeAllAjax = "<script>goat.utils.makeFormsAjax();goat.utils.ajaxifyAttackHref();</script>";
// handle this on the page with js // need to do this here as some of the lessons render forms after submission of an ajax form
makeFormsAjax = ""; return (content == null) ? "" : content.toString() + makeAllAjax;
return (content == null) ? "" : content.toString() + makeFormsAjax;
} }
/** /**

7
src/main/webapp/WEB-INF/pages/main_new.jsp
View File

@ -115,9 +115,9 @@
<a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded--> <a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
<ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0> <ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0>
<li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}"> <li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}">
<a ng-click="renderLesson(lesson.id,lesson.link,{showSource:lesson.showSource,showHints:lesson.showHints})" id="{{lesson.id}}" class="{{lesson.selectedClass}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span> <a ng-click="renderLesson(lesson.id, lesson.link, {showSource: lesson.showSource, showHints: lesson.showHints})" id="{{lesson.id}}" class="{{lesson.selectedClass}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
<span ng-repeat="stage in lesson.children"> <span ng-repeat="stage in lesson.children">
<a ng-click="renderLesson(stage.id,stage.link,{showSource:stage.showSource,showHints:stage.showHints})" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span> <a ng-click="renderLesson(stage.id, stage.link, {showSource: stage.showSource, showHints: stage.showHints})" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
</span> </span>
</li> </li>
</ul> </ul>
@ -354,7 +354,8 @@
// make any embedded forms ajaxy // make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams(); goat.utils.showLessonCookiesAndParams();
goat.utils.makeFormsAjax(); goat.utils.makeFormsAjax();
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed // links are hooked with each lesson now (see Java class Screen.getContent())
//goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
//refresh menu //refresh menu
angular.element($('#leftside-navigation')).scope().renderMenu(); angular.element($('#leftside-navigation')).scope().renderMenu();
} }

47
src/main/webapp/js/goatControllers.js
View File

@ -8,15 +8,15 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
$scope.cookies = []; $scope.cookies = [];
$scope.params = []; $scope.params = [];
$scope.renderMenu = function() { $scope.renderMenu = function() {
goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService}) goat.data.loadMenu($http).then(//$http({method: 'GET', url: goatConstants.lessonService})
function(menuData) { function(menuData) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data)); var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
//top-tier 'categories' //top-tier 'categories'
for (var i=0;i<menuItems.length;i++) { for (var i = 0; i < menuItems.length; i++) {
menuItems[i].id = goat.utils.makeId(menuItems[i].name);//TODO move the replace routine into util function menuItems[i].id = goat.utils.makeId(menuItems[i].name);//TODO move the replace routine into util function
menuItems[i].displayClass= ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : ''; menuItems[i].displayClass = ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
if (menuItems[i].children) { if (menuItems[i].children) {
for (var j=0;j<menuItems[i].children.length;j++){ for (var j = 0; j < menuItems[i].children.length; j++) {
menuItems[i].children[j].id = goat.utils.makeId(menuItems[i].children[j].name); menuItems[i].children[j].id = goat.utils.makeId(menuItems[i].children[j].name);
//handle selected Menu state //handle selected Menu state
if (menuItems[i].children[j].id === $scope.curMenuItemSelected) { if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
@ -27,10 +27,10 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
if (menuItems[i].children[j].complete) { if (menuItems[i].children[j].complete) {
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass; menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
} else { } else {
menuItems[i].children[j].completeClass =''; menuItems[i].children[j].completeClass = '';
} }
if (menuItems[i].children[j].children) { if (menuItems[i].children[j].children) {
for (var k=0;k < menuItems[i].children[j].children.length;k++) { for (var k = 0; k < menuItems[i].children[j].children.length; k++) {
//TODO make utility function for name >> id //TODO make utility function for name >> id
menuItems[i].children[j].children[k].id = goat.utils.makeId(menuItems[i].children[j].children[k].name); menuItems[i].children[j].children[k].id = goat.utils.makeId(menuItems[i].children[j].children[k].name);
//menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,''); //menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
@ -41,9 +41,9 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
} }
//handle complete state //handle complete state
if (menuItems[i].children[j].children[k].complete) { if (menuItems[i].children[j].children[k].complete) {
menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass; menuItems[i].children[j].children[k].completeClass = goatConstants.lessonCompleteClass;
} else { } else {
menuItems[i].children[j].children[k].completeClass= '' menuItems[i].children[j].children[k].completeClass = ''
} }
} }
} }
@ -53,7 +53,7 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
$scope.menuTopics = menuItems; $scope.menuTopics = menuItems;
// //
if ($scope.openMenu) { if ($scope.openMenu) {
$('ul'+$scope.openMenu).show(); $('ul' + $scope.openMenu).show();
} }
}, },
@ -64,7 +64,7 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
); );
}; };
$scope.renderLesson = function(id,url,showControls) {//TODO convert to single object parameter $scope.renderLesson = function(id, url, showControls) {//TODO convert to single object parameter
$scope.hintIndex = 0; $scope.hintIndex = 0;
var curScope = $scope; var curScope = $scope;
$('.lessonHelp').hide(); $('.lessonHelp').hide();
@ -73,7 +73,7 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
goat.utils.highlightCurrentLessonMenu(id); goat.utils.highlightCurrentLessonMenu(id);
curScope.parameters = goat.utils.scrapeParams(url); curScope.parameters = goat.utils.scrapeParams(url);
// lesson content // lesson content
goat.data.loadLessonContent($http,url).then( goat.data.loadLessonContent($http, url).then(
function(reply) { function(reply) {
goat.data.loadLessonTitle($http).then( goat.data.loadLessonTitle($http).then(
function(reply) { function(reply) {
@ -84,42 +84,43 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
$("#lesson_content").html(reply.data); $("#lesson_content").html(reply.data);
//hook forms //hook forms
goat.utils.makeFormsAjax();// inject form? goat.utils.makeFormsAjax();// inject form?
goat.utils.ajaxifyAttackHref(); // links are hooked with each lesson now (see Java class Screen.getContent())
$('#leftside-navigation').height($('#main-content').height()+15)//TODO: get ride of fixed value (15)here //goat.utils.ajaxifyAttackHref();
$('#leftside-navigation').height($('#main-content').height() + 15)//TODO: get ride of fixed value (15)here
//notifies goatLesson Controller of the less change //notifies goatLesson Controller of the less change
$scope.$emit('lessonUpdate',{params:curScope.parameters,'showControls':showControls}); $scope.$emit('lessonUpdate', {params: curScope.parameters, 'showControls': showControls});
} }
) )
$scope.renderMenu(); $scope.renderMenu();
}; };
$scope.accordionMenu = function(id) { $scope.accordionMenu = function(id) {
if ($('ul#'+id).attr('isOpen') == 0) { if ($('ul#' + id).attr('isOpen') == 0) {
$scope.expandMe = true; $scope.expandMe = true;
} else { } else {
$('ul#'+id).slideUp(300).attr('isOpen',0); $('ul#' + id).slideUp(300).attr('isOpen', 0);
return; return;
} }
$scope.openMenu = id; $scope.openMenu = id;
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0); $('.lessonsAndStages').not('ul#' + id).slideUp(300).attr('isOpen', 0);
if ($scope.expandMe) { if ($scope.expandMe) {
$('ul#'+id).slideDown(300).attr('isOpen',1); $('ul#' + id).slideDown(300).attr('isOpen', 1);
} }
} }
$scope.renderMenu(); $scope.renderMenu();
// runs on first loadcan be augmented later to ' // runs on first loadcan be augmented later to '
// resume' for a given user ... currently kluged to start at fixed lesson // resume' for a given user ... currently kluged to start at fixed lesson
var url = 'attack?Screen=32&menu=5'; var url = 'attack?Screen=32&menu=5';
angular.element($('#leftside-navigation')).scope().renderLesson(null,url); angular.element($('#leftside-navigation')).scope().renderLesson(null, url);
} }
/* lesson controller */ /* lesson controller */
var goatLesson = function($scope,$http,$log) { var goatLesson = function($scope, $http, $log) {
$('#hintsView').hide(); $('#hintsView').hide();
// adjust menu to lessonContent size if necssary // adjust menu to lessonContent size if necssary
//cookies //cookies
$scope.$on('lessonUpdate',function(params){ $scope.$on('lessonUpdate', function(params) {
$scope.parameters = arguments[1].params; $scope.parameters = arguments[1].params;
$scope.showHints = (arguments[1].showControls && arguments[1].showControls.showHints); $scope.showHints = (arguments[1].showControls && arguments[1].showControls.showHints);
$scope.showSource = (arguments[1].showControls && arguments[1].showControls.showSource); $scope.showSource = (arguments[1].showControls && arguments[1].showControls.showSource);
@ -246,10 +247,10 @@ var goatLesson = function($scope,$http,$log) {
}; };
$scope.restartLesson = function () { $scope.restartLesson = function() {
goat.data.loadRestart($http).then( goat.data.loadRestart($http).then(
function(resp) { function(resp) {
angular.element($('#leftside-navigation')).scope().renderLesson(null,resp.data,{showSource:$scope.showSource,showHints:$scope.showHints}); angular.element($('#leftside-navigation')).scope().renderLesson(null, resp.data, {showSource: $scope.showSource, showHints: $scope.showHints});
} }
) )
} }