CSRF token from either the request body or request headers did not match or is missing

Need Help
1

image
image1302×230 10.5 KB

Hello everyone,
In my CakePHP 5 based application I have, among other things, a FileUpload function, which is implemented via Javascript. When the function is activated, the following error message appears. See the screenshot. Under CakePHP version 4, I had no problems with the same functionality. Anyone have an idea how I can solve this problem? I would also accept switching off the CSRF function if this is possible in CakePHP5. I would be happy to hear about a solution.
Paulo

2

Well as the error implies your request doesn’t contain a CSRF token in either its HTTP Headers or its request body. Make sure to set it in your AJAX call.

Disabling CSRF for specific actions works the same in CakePHP 5 as it does in CakePHP 4.
https://book.cakephp.org/5/en/security/csrf.html#skipping-csrf-checks-for-specific-actions

If you want to disable the CSRF check for that specific action is up 2 you.

3

Hello Kevin,
Thank you very much for your hint. I decided to turn it off and it works now.
Thank you and best regards,
Paulo

4

Hello Kevin,
but I was happy a little too early. The file upload works via Javascript. See the screenshot. Of course there is also the CSRF problem here. If I implement the following (See also ScreenShot)
, then I no longer get the CSRF error message, but the file upload no longer works. I know I’m doing something wrong. But what?
Do you perhaps have another tip?
Best regards,
Paulo.

image
image675×934 48.7 KB

5

this is literally in my app and working fine

let csrfToken = document.querySelector('[name="csrfToken"]').value;
const response = await fetch('/myurl', {
  method: 'post',
  headers: {
    'X-CSRF-Token': csrfToken,
    'X-Requested-With': 'XMLHttpRequest',
  },
});

this of course doesn’t contain a body but it shouldn’t matter

6

Hello Kevin,
Thank you again in advance for your quick reply. I will test it.
Best regards,
Paulo

7

Hello Kevin,
Unfortunately my test wasn’t very successful and I’ve already spent 2 days trying to find a solution. Unfortunately without success. Now I’m hoping for another idea from you. Attached you will find a screenshot. The current test situation including the result is documented here. Note: This worked as shown under CakePHP4.
Many greetings and many thanks in advance.
Paulo

image
image1578×753 223 KB

8

The JS snippet shown will only work if you have an HTML element somewhere on the page named csrfToken, with the value of the token in it.

9

Hello Zuluru,
Thank you very much for your hint. I have tested it. Unfortunately it does not work. Or have I misunderstood something?
See the screenshot.
Thank you in advance.
Paulo

image
image1082×671 52.5 KB

10

Why would you expect this to work?
The CSRF Token needs to be something like

YBgsuhlOylZ8QWhPQVeBLpM9MIOdBbe3QYidZduy5Ml/x9hMLdRL+HNn86RrmFvM/42VzCrsztRCHcI4yVTd1erjSTdHYg41q1wHtqlm04R5v6lSuoTS+xv17npJ7S/BFVTBlw3+aKnPvPb7Ht/44g==

and is present inside any form generated by CakePHP.

image
image864×83 22.6 KB

You are selecting the button element which doesn’t have any value attribute at all, so that csrfToken variable in js is empty.

Try to adjust your selector to

let csrfToken = document.querySelector('[name="_csrfToken"]').value;

mine above was just an example because I have a custom meta tag in the header containing the CSRF token at all pages, its just not default CakePHP so of course copy-pasting my code won’t work for you.

11

Hello Kevin,
Success message.
First of all, thank you again for your help.
Now it’s working.
Many greetings and a merry Christmas,
Paulo