Trying to use React/Ajax calls with Spring MVC and Thymeleaf

Question

according to the docs, I should be able to include the CSRF tokens in the header, grab them with jquery, and include them in the headers of my ajax calls.

Unfortunately, including

<html class='default' xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset='UTF-8'/>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1' />
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
...
</html>

outputs:

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="_csrf" content="${_csrf.token}">
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" content="${_csrf.headerName}">

And not the actual token so there is nothing to grab.

Has anyone had success with this way of handling ajax post/puts/deletes?

reference: http://docs.spring.io/spring-security/site/docs/3.2.0.CI-SNAPSHOT/reference/html/csrf.html

Did you see this? http://stackoverflow.com/questions/25692735/spring-security-with-thymeleaf-simple-example — salc2, Dec 17 '15 at 02:00

score 10 · Accepted Answer · edited Aug 01 '18 at 12:47

10

You forget the prefix "th". your template should look like this:

<meta id="_csrf" name="_csrf" th:content="${_csrf.token}"/>
<meta id="_csrf_header" name="_csrf_header" th:content="${_csrf.headerName}"/>

and your ajax call:

var token = $('#_csrf').attr('content');
var header = $('#_csrf_header').attr('content');

$.ajax({
    type: "POST",
    url: url,
    beforeSend: function (xhr) {
        xhr.setRequestHeader(header, token);
    },
    success: function (data, textStatus, jqXHR) {
        alert(status);
    },
    error: function (request, status, error) {
        alert(status);
    }
});

edited Aug 01 '18 at 12:47

Mahozad

18,032
13
118
133

answered Dec 17 '15 at 08:36

Manu Zi

2,300
6
33
67

That worked, it would be nice if they had that in the docs. I forgot the index is at the root so react won't complain about the namespacing! – goofiw Dec 17 '15 at 16:09
You save my life! Millionsss Thanks – Lay Leangsros Jun 29 '16 at 19:51

score 1 · Answer 2 · answered Dec 17 '15 at 02:02

1

Here is how I did my ajax csrf.

$(function() {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content"); 

$(document).ajaxSend(function (e, xhr, options) {
xhr.setRequestHeader(header, token);
}
}

I also use ajaxForm plugin to submit forms, in which case i embed the csrf into the action url.

Hope that works for you.

answered Dec 17 '15 at 02:02

Aeseir

7,754
10
58
107

The _csrf tokens are not coming through. – goofiw Dec 17 '15 at 16:02

Trying to use React/Ajax calls with Spring MVC and Thymeleaf

2 Answers2

Linked