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

Question

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 1

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