Spring Security CSRF Token not working with AJAX

Question

I have a problem in my spring boot app with the csrf token.

I have a form where I can edit a Person. A Person can have

Let us now imagine that the person has a car and enter this and store it. The next time he wants to delete this car and enter another one. I have created that so that there is a list of all of his cars -- he has the option to remove this from the list. Now I'm starting from these pills and want to send with the corresponding ID to the server a POST. When I try I get a 403 forbidden and I have no idea why.

If I change from POST to GET, then it works.

My JavaScript (taken from this site: http://docs.spring.io/autorepo/docs/spring-security/4.0.0.CI-SNAPSHOT/reference/htmlsingle/#the-csrfmetatags-tag)

var csrfParameter = $("meta[name='_csrf_parameter']").attr("content");
var csrfHeader = $("meta[name='_csrf_header']").attr("content");
var csrfToken = $("meta[name='_csrf']").attr("content");

// using JQuery to send a non-x-www-form-urlencoded request
var headers = {};
headers[csrfHeader] = csrfToken;
$.ajax({
    url: "./delete/car",
    type: "GET",
    headers: headers,
});

$.ajax({
     url: "./delete/car",
     type: "POST",
     headers: headers,
});

My controller methods:

@RequestMapping(value = "/{login}/delete/car", method = RequestMethod.GET)
    public ModelAndView delete(@PathVariable("login") final String login) {
        System.out.println("Stop");
        return new ModelAndView("redirect:" + WebSecurityConfig.URL_PERSONS_OVERVIEW);
    }

    @RequestMapping(value = "/{login}/delete/car", method = RequestMethod.POST)
    public ModelAndView deleteInstEmp(@PathVariable("login") final String login) {
        System.out.println("Stop");
        return new ModelAndView("redirect:" + WebSecurityConfig.URL_PERSONS_OVERVIEW);
    }

Any suggestions?

Thanks in advance.

Answer 1

OK, after strugglin with all that, I get the following result.

I added the fail method to the Ajax construct and get the following message:

"Failed to execute 'setRequestHeader' on 'XMLHttpRequest': '${_csrf.headerName}' is not a valid HTTP header field name."

the official spring site advises that you have to put this: <sec:csrfMetaTags /> or from other sources, this: <meta name="_csrf" th:content="${_csrf.token}"/> in your html file.

After this, you should be able to access these attributes in your JavaScript, but in my case I get undefined and ${_csrf.headerName}.

A last try was to take the value from the hidden value (chapter 24.5: http://docs.spring.io/autorepo/docs/spring-security/4.0.0.CI-SNAPSHOT/reference/htmlsingle/#the-csrfmetatags-tag).

Now, I have the following:

$(function () {
    var token = $("input[name='_csrf']").val();
    var header = "X-CSRF-TOKEN";
    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
});

$.ajax({
    url: "./delete/car",
    type: "POST",
    success:function(response) {
        alert(response);
    }
});

With this it works like a charm.