使用ajax和fetch API修改PHP v3 CSRF

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

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

I was also unable to get fetch to put the tokens into the body. I decided to extend the class so I could modify the __invoke method. I have added some code to pull the csrf from the headers.

in your dependencies now use this class.

  $c['csrf'] = function ($c) {
      return new \Foo\CSRF\Guard;
  };

The extended class.

<?php
namespace MYOWN\CSRF;

use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Message\ResponseInterface;

/**
 * CSRF protection middleware.
 */
class Guard extends \Slim\Csrf\Guard
{
    public function __construct(
        $prefix = 'csrf',
        &$storage = null,
        callable $failureCallable = null,
        $storageLimit = 200,
        $strength = 16,
        $persistentTokenMode = false
    ) {
        parent::__construct(
                $prefix,
                $storage,
                $failureCallable,
                $storageLimit,
                $strength,
                $persistentTokenMode);
    }

    public function __invoke(ServerRequestInterface $request, ResponseInterface $response, callable $next)
    {

        $this->validateStorage();

        // Validate POST, PUT, DELETE, PATCH requests
        if (in_array($request->getMethod(), ['POST', 'PUT', 'DELETE', 'PATCH'])) {
            $body = $request->getParsedBody();
            $body = $body ? (array)$body : [];
            $name = isset($body[$this->prefix . '_name']) ? $body[$this->prefix . '_name'] : false;
            $value = isset($body[$this->prefix . '_value']) ? $body[$this->prefix . '_value'] : false;

            if (!empty($csrfTokens = $request->getHeader('x-csrf-token'))) {
                $csrfTokens = json_decode($csrfTokens[0], true);
                $name = isset($csrfTokens[$this->prefix . '_name']) ? $csrfTokens[$this->prefix . '_name'] : false;
                $value = isset($csrfTokens[$this->prefix . '_value']) ? $csrfTokens[$this->prefix . '_value'] : false;
            }

            if (!$name || !$value || !$this->validateToken($name, $value)) {
                // Need to regenerate a new token, as the validateToken removed the current one.
                $request = $this->generateNewToken($request);

                $failureCallable = $this->getFailureCallable();
                return $failureCallable($request, $response, $next);
            }
        }

        // Generate new CSRF token if persistentTokenMode is false, or if a valid keyPair has not yet been stored
        if (!$this->persistentTokenMode || !$this->loadLastKeyPair()) {
            $request = $this->generateNewToken($request);
        }

        // Enforce the storage limit
        $this->enforceStorageLimit();

        return $next($request, $response);
    }


}

I had another go at this after reading one of the blogs from one of the creators. So you can ignore my previous answer.

Sending the csrf in the body with these headers passes the csrf check.

const data = {
    'csrf_name': csrf_name,
    'csrf_value': csrf_value,
  };

  fetch(apiUrl, {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json, application/x-www-form-urlencoded; charset=utf-8',
    },
  }).then((response) => {
    if (response.ok) {
      return response.json();
    }
    return null;
  }).then((json) => {
    console.log(json);
  }).catch(() => {
  });

What finally helped me succeed with Slim PHP and the CSRF values while using fetch was adding credentials: 'include' to the fetch request, like:

const body = JSON.stringify({ 
    csrf_name: csrfName.value, 
    csrf_value: csrfValue.value
    // You can add more data here
});

fetch('/some/request', {
    method: 'POST',
    body: body,
    credentials: 'include',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
}).then(...)