"error": "csrf validation error"

[sycod-maker]

I have cloned the project, tested it and it works as I would like to implement it.

However I have a problem, because when I query the token and pass it to my header/body it is done correctly.
The problem arises when I make the POST request, because the csrf (which is generated from the first token, changes) then the first token I got (is related to the previous csrf) therefore never validates the token.

is there any way to store the csrf that is set in the cookie?

[psibean]

The problem arises when I make the POST request, because the csrf (which is generated from the first token, changes) then the first

What do you mean the token changes? Why should it change? It should only change if you're generating a new one yourself, this is completely within your control. The logic on when to generate a token is 100% up to you, so if you're generating a new token when you don't want to be, then don't?

If you're facing this issue when using the application across multiple tabs or something, this is a side effect of the double submit cookie pattern, and there are various approaches to work around that. For example, you could generate one token per user session instead of per request, you could design your frontend so that a token is requested and used right before submission as opposed to page load.

However I have a problem, because when I query the token and pass it to my header/body it is done correctly.

Header or body? By default, it's expected to be in the header. If you're putting it in the body, you'll need to customise getTokenFromRequest accordingly.

is there any way to store the csrf that is set in the cookie?

It's already stored inside the cookie. The cookie is httpOnly, so you can't access that through the frontend - this is required as that is how the double submit pattern works. Alternatively you would use csrf-sync which implements the token synchroniser pattern instead.

Can't really give much more advice without seeing your implementation, if you have a code sandbox or a repo that reproduces the problem, that would help a lot.

[sycod-maker]

Thank you for your prompt reply, let me upload my repository and share it with you.

[sycod-maker]

Hi psibean,
This is repository. I will try to explain better ---- https://github.com/sycod-maker/csrf-issue

I'm validating the requests of some forms (FE) with react and the (BE) is with Node.js
When loading the Home view it requests 1 component called Hero that in turn requests the form (this works this way because hero has the responsibility to show or not the form, for this example it will always show it).

Once the form is loaded it makes the GET/csrf-token request.
to obtain the token generated in the file csrf-backend/events-routes and when I obtain it I save it in a variable (csrfToken) that later I will use in the request POST/register headers: {
"x-csrf-token": csrfToken, // comment this line to throw an error.
"Content-Type": "application/json",
},

The POST/register request already has the configuration(doubleCsrfProtection) and validation of the generated TOKEN, but it is always invalidated.

If it is within your possibilities we could have a meeting to test and show you the error. I leave you my personal zoom room.

Edwing Antonio Rentería Garibay is inviting you to a scheduled Zoom meeting.

Topic: Edwing Antonio Rentería Garibay's personal Zoom Meeting Room

Join Zoom Meeting
https://us04web.zoom.us/j/3242692179?pwd=R1hkZ1B5VXhaazBaZmN5NFo2clBXUT09

Meeting ID: 324 269 2179
Passcode: WXKG03
-------------------------------------------- SPANISH --------------------------------

Este es repositorio. Trataré de explicarte mejor ---- https://github.com/sycod-maker/csrf-issue

Estoy validando las peticiones de unos formularios (FE) con react y el (BE) es con Node.js
Al cargar la vista Home solicita 1 componente llamado Hero que a su vez solicita el formulario (esto funciona asi porque hero tiene la responsabilidad de mostrar o no el formulario, para este ejemplo siempre lo va a mostrar)

Una vez que carga el formulario realiza la solicitud GET/csrf-token
para obtener el token generado en el archivo csrf-backend/events-routes y al obtenerlo lo guardo en una variable(csrfToken) que posteriormente utilizare en la solicitud POST/register headers: {
"x-csrf-token": csrfToken, // comment this line to throw an error.
"Content-Type": "application/json",
},

La solicitud POST/register ya tiene la configuración(doubleCsrfProtection) y validacion del TOKEN generado, pero siempre es invalido.

Si esta dentro de tus posibilidades podríamos tener una reunión para testear y mostrarte tal cual el error. Te dejo mi sala personal de zoom.

Edwing Antonio Rentería Garibay is inviting you to a scheduled Zoom meeting.

Topic: Sala de reuniones personales de Edwing Antonio Rentería Garibay

Join Zoom Meeting
https://us04web.zoom.us/j/3242692179?pwd=R1hkZ1B5VXhaazBaZmN5NFo2clBXUT09

Meeting ID: 324 269 2179
Passcode: WXKG03

[psibean]

Hey @sycod-maker I pulled down your code and took a look.

The problem is your cors configuration. In the code you have shared, you have this:

    credentials: false

What this does is, it means you're not accepting any http only cookies on requests from the configured origins. This means the cookie gets ignored. If you change this value to true, it works as expected, there is no longer a csrf error.

If you don't want to accept http only cookies, then it doesn't make sense. You only need CSRF protection if you're using http only cookies (typically sessions) for authentication. If you are not using http only cookies for authentication, then you aren't susceptible to CSRF attacks.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

However, after I changed credentials: true in the cors configuration, the csrf error went away, and a new one appeared:

/api/event/register

{"message":"Could not find this route."}

Indicating that your route isn't correct.