title: Use of Spring CSRF with ajax Rest call and HTML page with Thymeleaf
body: <p>I'm using Spring Security with CSRF and I have a problem with some POST call in my javascript. For my page I use Thymeleaf and HTML 5, for the Rest call to my controller I use jQuery.ajax.
  If I use the ajax call for my form like this:</p>
  
  <pre><code>$(function() {
      $("#saveCarButton").click(
              function() {
                  var form = $("#addCarForm");        
                  $.ajax({
                      type : "POST",
                      url : form.attr("action"),
                      data : form.serialize(),
                      // all right with rest call
                      success : function(data) {...}  
                      //error during rest call
                      error : function(data) {
                          window.location.href = "/500";
                      }
                  });
              });
  });
  </code></pre>
  
  <p>everything works fine, but when I call for example this function:</p>
  
  <pre><code>jQuery.ajax({
          url : 'upload',
          type: 'POST',
          contentType: false,
          processData: false,
          data:formData,
          beforeSend:function(xhr) {
              waitingModal.showPleaseWait();
          },  
          success: function(data,status,xhr){...}
          error: function(xhr,status,e){
          }
      }).complete(function() {
          //add timeout because otherwise user could see a too fast waiting modal
          setTimeout(function(){
              waitingModal.hidePleaseWait();
          }, 1000);
      });
  </code></pre>
  
  <p>I receive error 403.
  Maybe with form, using thymeleaf, it works fine but with the second type of request I have to add CSRF token.
  I tried with</p>
  
  <pre><code>var token = $("meta[name='_csrf']").attr("content");
  var header = $("meta[name='_csrf_header']").attr("content");
  </code></pre>
  
  <p>and in my html page I added</p>
  
  <pre><code>!--  --&gt;
  &lt;meta name="_csrf" th:content="${_csrf.token}"/&gt;
  &lt;!-- default header name is X-CSRF-TOKEN --&gt;
  &lt;meta name="_csrf_header" th:content="${_csrf.headerName}"/&gt;
  </code></pre>
  
  <p>Why does it with the form work? 
  I don't have to add nothing when I use form?
  Is it danger that _csrf and _csrf_header are visible with dev tool of browser?
  thanks</p>