I am making an ajax request with Csrf component load in my AppController
However I get the error {"message":"CSRF token mismatch.","url":"\/module_slides\/loadDeck.json","code":403}
Here is the request header
POST /module_slides/loadDeck.json HTTP/1.1 Host: www.hotelieracademy.com Connection: keep-alive Content-Length: 18 Origin: https://www.hotelieracademy.com X-XSRF-TOKEN: 3d3901b1de9c5182dce2877c9e1d9db36cdf46a6 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Accept: application/json, text/javascript, */*; q=0.01 X-Requested-With: XMLHttpRequest Referer: https://www.hotelieracademy.com/courses_employees/player/70 Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8 Cookie: csrfToken=3d3901b1de9c5182dce2877c9e1d9db36cdf46a6; CAKEPHP=3n6lpi94hrdgsg8mv4fsnp1m30; _ga=GA1.2.2010364689.1424741587
My ajax code
$.ajax({ url: '/module_slides/loadDeck.json', type: 'POST', headers: { 'X-XSRF-TOKEN' : this.csrfToken }, beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', this.csrfToken); }, dataType: 'json', data: {
I have left the beforeSend: as suggest by another post but does not seem to alter the header so I added headers:
I use a hidden input to get the CsfR token to use in my js code
<input id="csrfToken" type="hidden" value="<?= $this->request->params['_csrfToken'] ?>">
I've met the same problem. Probably, this is the answer to add "_csrfToken":"xxxxxxx" to data{}.
$.ajax({ url: '/module_slides/loadDeck.json', type: 'POST', headers: { 'X-XSRF-TOKEN' : this.csrfToken }, beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', this.csrfToken); }, dataType: 'json', data: { "_csrfToken":"3d3901b1de9c5182dce2877c9e1d9db36cdf46a6" }
This is my blog.but it's Japanese Only. http://www.tsuji75.com/?p=62
Here is my solution.
For the CSRF token, I am creating an empty cakephp form and it provides the CSRF token. Also, I do not unlock any action. instead I do unlock fields.
Ref: https://book.cakephp.org/3.0/en/controllers/components/security.html
here is my working example.
Scenario: Ajax call to add an event was failing due to cakephp 3 CSRF token mismatch issue.
Solution:
I have created an empty form in the view so it can provide CSRF token for my form and then attached the required input fields before the ajax. In the form itself, I unlocked the hidden fields. This way I do not disturb CSRF component. In VIEW
<?= $this->Form->create(false, [ 'id' => "ajaxForm", 'url' => ['controller' => 'XYZ', 'action' => 'add'], 'class'=> "addUpdateDeleteEventForm" ] ); $eventdata = []; ?> <?= $this->Form->unlockField('id'); ?> <?= $this->Form->unlockField('start'); ?> <?= $this->Form->unlockField('end'); ?> <?= $this->Form->unlockField('title'); ?> <?= $this->Form->button('Submit Form', ['type' => 'submit']);?> <?= $this->Form->end(); ?>
Ajax:
var id = $("<input>") .attr("type", "hidden") .attr("name", "id").val(id); var titleField = $("<input>") .attr("type", "hidden") .attr("name", "title").val(title); var startTime = $("<input>") .attr("type", "hidden") .attr("name", "start").val(start); var endTime = $("<input>") .attr("type", "hidden") .attr("name", "end").val(end); $('#ajaxForm').append(id); $('#ajaxForm').append(titleField); $('#ajaxForm').append(startTime); $('#ajaxForm').append(endTime); var ajaxdata = $("#ajaxForm").serializeArray(); $.ajax({ url:$("#ajaxForm").attr("action"), type:"POST", data:ajaxdata, dataType: "json", success:function(response) { toastr.success(response.message, response.title); calendar.fullCalendar("removeEvents"); calendar.fullCalendar("refetchEvents"); }, error: function(response) { toastr.error(response.message, response.title); } });
Hope this helps.
