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:
$(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";
}
});
});
});
everything works fine, but when I call for example this function:
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);
});
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
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
and in my html page I added
!-- -->
<meta name="_csrf" th:content="${_csrf.token}"/>
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
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
This solution worked for me Trying to use React/Ajax calls with Spring MVC and Thymeleaf
<meta id="_csrf" name="_csrf" th:content="${_csrf.token}"/>
<meta id="_csrf_header" name="_csrf_header" th:content="${_csrf.headerName}"/>
Ajax:
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);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With