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

Clean up javascript in main_new (move ajax functions to goatUtil)

Browse Source 
Make ajaxify links safe to call multiple times
This commit is contained in:
Rick Lawson
2014-09-26 08:12:44 -04:00
parent 7ebb354200
commit 92b317b2c9
4 changed files with 98 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/java/org/owasp/webgoat/lessons/AbstractLesson.java
View File

@ -19,9 +19,7 @@ import org.apache.ecs.Element;
import org.apache.ecs.ElementContainer; import org.apache.ecs.ElementContainer;
import org.apache.ecs.StringElement; import org.apache.ecs.StringElement;
import org.apache.ecs.html.Body; import org.apache.ecs.html.Body;
import org.apache.ecs.html.Center;
import org.apache.ecs.html.Form; import org.apache.ecs.html.Form;
import org.apache.ecs.html.H1;
import org.apache.ecs.html.Head; import org.apache.ecs.html.Head;
import org.apache.ecs.html.Html; import org.apache.ecs.html.Html;
import org.apache.ecs.html.IMG; import org.apache.ecs.html.IMG;

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

@ -287,80 +287,14 @@
<!--main content end--> <!--main content end-->
</section> </section>
<script> <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() { $(document).ready(function() {
//TODO merge appliction.js code into other js files //TODO merge appliction.js code into other js files
app.init(); 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();
// 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
angular.element($('#leftside-navigation')).scope().renderMenu();
}
</script> </script>
<!-- About WebGoat Modal --> <!-- About WebGoat Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <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-dialog modal-lg">

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

@ -82,10 +82,10 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
); );
//TODO encode html or get angular js portion working //TODO encode html or get angular js portion working
$("#lesson_content").html(reply.data); $("#lesson_content").html(reply.data);
//hook forms //hook forms and links (safe to call twice)
goat.utils.makeFormsAjax();// inject form?
// links are hooked with each lesson now (see Java class Screen.getContent()) // links are hooked with each lesson now (see Java class Screen.getContent())
//goat.utils.ajaxifyAttackHref(); goat.utils.makeFormsAjax();// inject form?
goat.utils.ajaxifyAttackHref();
$('#leftside-navigation').height($('#main-content').height() + 15)//TODO: get ride of fixed value (15)here $('#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});

124
src/main/webapp/js/goatUtil.js
View File

@ -11,16 +11,76 @@ goat.utils = {
} }
return arr; return arr;
}, },
debugFormSubmission: false,
// pre-submit callback
showRequest: function(formData, jqForm, options) {
if (goat.utils.debugFormSubmission) {
// 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
showResponse: function(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 (goat.utils.debugFormSubmission) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
// update lesson cookies and params
// make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams();
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
// but these are safe to call twice
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
//refresh menu
angular.element($('#leftside-navigation')).scope().renderMenu();
},
makeFormsAjax: function() { makeFormsAjax: function() {
// make all forms ajax forms
var options = {
target: '#lesson_content', // target element(s) to be updated with server response
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
success: goat.utils.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
};
//console.log("Hooking any lesson forms to make them ajax"); //console.log("Hooking any lesson forms to make them ajax");
$("form").ajaxForm(options); $("form").ajaxForm(options);
}, },
displayButton: function(id,show) { displayButton: function(id, show) {
if ($('#'+id)) { if ($('#' + id)) {
if (show) { if (show) {
$('#'+id).show(); $('#' + id).show();
} else { } else {
$('#'+id).hide(); $('#' + id).hide();
} }
} }
}, },
@ -52,17 +112,17 @@ goat.utils = {
$('#lesson_plan_row').show(); $('#lesson_plan_row').show();
goat.utils.scrollToHelp(); goat.utils.scrollToHelp();
}, },
scrollToHelp:function() { scrollToHelp: function() {
$('#leftside-navigation').height($('#main-content').height()+15) $('#leftside-navigation').height($('#main-content').height() + 15)
var target = $('#lessonHelpsWrapper'); var target = $('#lessonHelpsWrapper');
goat.utils.scrollEasy(target); goat.utils.scrollEasy(target);
}, },
scrollToTop: function() { scrollToTop: function() {
$('.lessonHelp').hide(); $('.lessonHelp').hide();
var target= $('#container'); var target = $('#container');
goat.utils.scrollEasy(target); goat.utils.scrollEasy(target);
}, },
scrollEasy:function(target) { scrollEasy: function(target) {
$('html,body').animate({ $('html,body').animate({
scrollTop: target.offset().top scrollTop: target.offset().top
}, 1000); }, 1000);
@ -73,7 +133,7 @@ goat.utils = {
} }
var params = url.split('?')[1].split('&'); var params = url.split('?')[1].split('&');
var paramsArr = []; var paramsArr = [];
for (var i=0;i< params.length;i++) { for (var i = 0; i < params.length; i++) {
var paramObj = {}; var paramObj = {};
paramObj.name = params[i].split('=')[0]; paramObj.name = params[i].split('=')[0];
paramObj.value = params[i].split('=')[1]; paramObj.value = params[i].split('=')[1];
@ -84,33 +144,35 @@ goat.utils = {
highlightCurrentLessonMenu: function(id) { highlightCurrentLessonMenu: function(id) {
//TODO: move selectors in first two lines into goatConstants //TODO: move selectors in first two lines into goatConstants
$('ul li.selected').removeClass(goatConstants.selectedMenuClass) $('ul li.selected').removeClass(goatConstants.selectedMenuClass)
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass) $('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
$('#'+id).addClass(goatConstants.selectedMenuClass); $('#' + id).addClass(goatConstants.selectedMenuClass);
$('#'+id).parent().addClass(goatConstants.selectedMenuClass); $('#' + id).parent().addClass(goatConstants.selectedMenuClass);
}, },
makeId: function (lessonName) { makeId: function(lessonName) {
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g,'');//TODO move the replace routine into util function return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');//TODO move the replace routine into util function
}, },
ajaxifyAttackHref: function () { ajaxifyAttackHref: function() {
/* Jason I commented this implementation out /* Jason I commented this implementation out
* I think we should show the attack link on the lessons that need it by modifying the lesson * I think we should show the attack link on the lessons that need it by modifying the lesson
* itself or we could add a new button up top for "show lesson link" * itself or we could add a new button up top for "show lesson link"
$.each($('a[href^="attack?"]'), $.each($('a[href^="attack?"]'),
function(i,el) { function(i,el) {
var url = $(el).attr('href'); var url = $(el).attr('href');
$(el).attr('href','#'); $(el).attr('href','#');
$(el).attr('link',url); $(el).attr('link',url);
//TODO pull currentMenuId //TODO pull currentMenuId
$(el).click( $(el).click(
function() { function() {
var _url = $(el).attr('link'); var _url = $(el).attr('link');
$.get(_url, {success:showResponse}); $.get(_url, {success:showResponse});
} }
) )
} }
); );
*/ */
// alternate implementation // alternate implementation
// unbind any bound events so we are safe to be called twice
$('#lesson_content a').unbind('click');
$('#lesson_content a').bind('click', function(event) { $('#lesson_content a').bind('click', function(event) {
event.preventDefault(); event.preventDefault();
$.get(this.href, {}, function(response) { $.get(this.href, {}, function(response) {