How to check CSRF token using AJAX and CakePHP 3 when user is not logged in?

Question

So I made my site live and I am entering into the public realm where people aren't always nice. I just started learning about CSRF and saw that it was something I needed when I made my cakephp 3 site live. As seen here!

I added the csrf component and the security component to my site, but I have 1 major problem. Now, when users want to sign up they can't. I use a custom form for stripe to send payment, but also add a user using ajax to my database. The user gets added first and then the payment is processed and saves the order to the database as well.

According to stripe docs I add the token in a hidden value to the form after I click the submit button and can't help but notice that my new security is not allowing this to happen.

Since I am using ajax to send the post data to my users controller and adding a form input on submit,

How do I check the csrf token and make sure there isn't a security leak without disabling the security for the actions involved?

An example of how this is to be done would be greatly appreciated since examples seem to be lacking for doing this in cakephp 3. It is also hard for me to figure out how everything works since the cakephp 3 automagic adds the tokens to the forms and cookie. I am unsure how/where/what to check.

Answer 1

For pass X-CSRF-Token, use beforeSend parameter in your Ajax request, and define csrfToken value of cookie.

$.ajax({
    url: '/foo/bar',
    type: 'POST',
    dataType: 'HTML',
    data: data,
    beforeSend: function(xhr){
        xhr.setRequestHeader('X-CSRF-Token', csrfToken);
    },
})
.done(function(data) {
    alert('done !');
});

Answer 2

According to stripe docs I add the token in a hidden value to the form after I click the submit button and can't help but notice that my new security is not allowing this to happen.

Cake's CSRF token would have no effect when POSTing to another site.

Since I am using ajax to send the post data to my users controller and adding a form input on submit,

How do I check the csrf token and make sure there isn't a security leak without disabling the security for the actions involved?

The CSRF token is available in cookie named csrfToken, so read that token in your javascript and set X-CSRF-Token header for your AJAX request. The CsrfCompoment will do the checking.

Answer 3

using js function:

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}
...
then
$.ajax
        ({
            type: "Post",
            url: "URL_HERE",
            data: {some_data},
            beforeSend: function(xhr){
                xhr.setRequestHeader('X-CSRF-Token', getCookie('csrfToken'));
            },
            success: function (e) {
            },
            errors: function () {
            }
        });