Rajkiran Rajkiran - 5 months ago 87
jQuery Question

How to inject CSRFGuard security tokens using jQuery using $.ajax

I am using CSRFGuard 3.1.0
I have configured the servlet in web.xml

<servlet>
<servlet-name>JavaScriptServlet</servlet-name>
<servlet-class>org.owasp.csrfguard.servlet.JavaScriptServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>JavaScriptServlet</servlet-name>
<url-pattern>/JavaScriptServlet</url-pattern>
</servlet-mapping>


Now I have a JSP file userProfile.jsp
1) I have configured the script for injecting the tokens like

<script src="/JavaScriptServlet"></script>


2) Now I include the jQuery script file dedicated for this JSP file

<script src="../js/userProfile.js" type="text/javascript">
</script>


3) I have text box 1 - for original password
4) I have text box 2 - for new password
5) I have text box 3 - for confirm password
6) I have a change password button which makes AJAX call to the server

<button type="button" name="changePswd" id="changePswd">Change password</button>


7) On click of this button a $.ajax (jQuery) function is called which is in a js file. The function is as below:

$("#changePswd").click(
function() {

$.ajax({
url: location.protocol + "//" +location.host + '/my-project/secure/changePassword.html',

data: {
username : $('#userName').val(),
oldPassword : $('#oldPassword').val(),
newPassword : $('#newPassword').val(),
retypeNewPassword : $('#retypeNewPassword').val()

},
success: function(data) {
$("#dialog").dialog('close');
$('#dialog-6').dialog('open');

$('#displayResult-6').html(data);
},
error: function(xhr,status,error) {
$('#displayResult').html('�V');
}
})
});


8) And this call is being blocked by CSRFGuard by saying

WARNING: potential cross-site request forgery (CSRF) attack thwarted (user:, ip:10.48.5.88, method:GET, uri:/my-project/secure/changePassword.html,
error:required token is missing from the request)

And the when the browser load the userProfile.jsp file where the /JavaScriptServlet is expected to inject tokens, the browser is showing me 404 not found for this particular html call

I am using:
JDK 1.6
CSRFGuard 3.1.0
Weblogic 10.3.6 & jQuery-1.7.1-min.js
Please guide me how to inejct these tokens in this AJAX call!!
Thanks in advance!!

Answer

To make ajax call work you need to do the following steps:

1) On jsp page a. include the tag lib

<%@ taglib uri="http://www.owasp.org/index.php/Category:OWASP_CSRFGuard_Project/Owasp.CsrfGuard.tld" prefix="csrf" %>

2) inject the security token name & value in the meta tags like

<meta name="_csrf_header" content="<csrf:tokenname/>"/> 
    <meta name="_csrf" content="<csrf:tokenvalue/>"/>

3) on the .js page inject this values in the headers like

var csrfHeader = $("meta[name='_csrf_header']").attr("content");
                    var csrfToken = $("meta[name='_csrf']").attr("content");
                    var headers = {};
                    headers[csrfHeader] = csrfToken;
    $.ajaxSetup({
  headers: headers
});

And your ajax call should pass the test of CSRFGuard :)

4) /JavascriptServlet is not working or sending 404 in its response but it is not relevent to make the ajax call work

Thanks