使用ajax和fetch API修改PHP v3 CSRF

Question

i have set up the normal CSRF stuff etc and would work well, but then when i go and use ajax using the whatwg-fetch api (https://github.com/github/fetch)

Now all seem ok and all works well to what i have. BUT! Then I add the CSRF settings as below and it fails, all the time:

So, I have used the normal, but it fails and in the header I get the message: Failed CSRF check!

        $app->add(new \Slim\Csrf\Guard);

But I wanted to add own message etc so have added the following, but still it does not pass.

      $container['csrf'] = function ($c) {
          $guard = new \Slim\Csrf\Guard;
          $guard->setFailureCallable(function ($request, $response, $next) {
              $request = $request->withAttribute("csrf_status", false);
              return $next($request, $response);
          });
          return $guard;
      };

     $app->add($container->get('csrf'));

Then in my class i check it with:

      if (false === $req->getAttribute('csrf_status')) {...}else{//all ok}

But what ever happens it always fails.

in my js i am adding the token details to the request like:

    fetch('/post/url',{
       method: 'POST',
       headers: {
               'X-CSRF-Token': {
                       'csrf_name':csrf_name,
                       'csrf_value':csrf_value
                   }
           },
       body: new FormData(theForm)

i have looked in the posted data etc and the form data is submitted including the csrf values etc. SO the require csrf data is being sent via the form as well as the header?

So how can I get the ajax functionality to work with the Slim CSRF, what am I missing?

Thanks in advance

Answer 1

well after several attempts over the last day and narrowing it down to the fetch api was using I decided to go back to the trusted jQuery aJax methods, and this seems to have worked.

Seems the following body and the new FormData() was not being picked up:

fetch('/post/url',{
   method: 'POST',
   body: new FormData(theForm)

So switched it out for

     $.ajax({
           url : '/url/to/post',
           type: "POST",
           data: {key:value, kay:value}

And all worked well.

The next issue to look into then is the keys being refreshed on first ajax call, preventing anymore calls unless page is refreshed, but thats for another day