How to define CSRF token in ajax call in Cakephp 3. Also How CSRF can be off for some ajax requests

Question

In Cakephp3 when the Csrf component is enabled. How I can use it in ajax call. In this beforeSend parameter of ajax csrf token is set in header. What is the value of csrfToken. As it gives error

csrfToken is not defined

beforeSend: function(xhr){
    xhr.setRequestHeader('X-CSRF-Token', csrfToken);
},

Also how can I disable Csrf component for some ajax calls.

Answer 1

The CSRF component writes the current token to the request parameters as _csrfToken, you can get it via the request objects param() method (or getParam() as of CakePHP 3.4):

setRequestHeader('X-CSRF-Token', <?= json_encode($this->request->param('_csrfToken')); ?>);

The CSRF component can be disabled by removing it from the controllers event manager. You'll have to figure on what condition you'd need to do that, for example for a specific action, like this:

public function beforeFilter(\Cake\Event\Event $event)
{
    parent::beforeFilter($event);

    if ($this->request->param('action') === 'actionXyz') {
        $this->eventManager()->off($this->Csrf);
    }
}

If you're using the CSRF middleware, then the token is still available as a request parameter named _csrfToken, disabling the middleware however works differently, see for example Cakephp 3.5.6 disable CSRF Middleware for controller

See also

• Cookbook > Request & Response Objects > Request Parameters
• Cookbook > Controllers > Components > CSRF > Using the CsrfComponent
• Cookbook > Controllers > Components > CSRF > Disabling the CSRF Component for Specific Actions

Answer 2

Every form has a hidden _csrfToken field that's automatically added when you have enabled the Csrf component. Now you can easily get the token of this field by jquery like $('[name="_csrfToken"]').val().

A ajax call will look like this:

$.ajax({
   url: 'someUrl',
   headers : {
      'X-CSRF-Token': $('[name="_csrfToken"]').val()
   },
   type: 'post',
   ...
});

Answer 3

CakePHP 3

Please do not unlock fields/disable CSRF security component for any particular action. This is important for the form security.

for those who are getting "The request has been black-holed." ,"form tampered error", "you are not authorized to access that location." or "unexpected field in POST data". It is mainly due to the CSRF component working as expected.

Disabling or modifying it is not a solution. Instead of disabling, please follow the right approach. In above case, please try serializing the form and that should do the magic.

var el = $("#xyzForm");

var ajaxTPCalls = el.serializeArray();
  $.ajax({
                            type: el.attr('method'),
                            async: true,
                            url:  el.attr('action'),
                            data: ajaxTPCalls,
                            dataType: "json",
                            cache: false,
                            success: function (data) {

                                toastr.success(data.message, data.title);
                            },
                            error: function (jqXHR) {
                                if (jqXHR.status == 403) {
                                    $("body").html(jqXHR.responseText);
                                }
                            }
                        });

This way you do not disable CSRF or unlock any field.