403 CSRF Token Mismatch Error with `nuxt-csurf` in Nuxt 3 Application

[nicokempe]

Description

I'm encountering a 403 CSRF Token Mismatch error in my Nuxt 3 application when attempting to submit a form using the nuxt-csurf module for CSRF protection. Despite correctly including the CSRF token in the request headers, the server responds with a token mismatch error.

Steps to Reproduce

1. Configured nuxt-csurf in nuxt.config.ts according to the documentation.
2. Initially tried using useCsrfFetch for CSRF token handling, then switched to manual inclusion using $fetch due to component mounting issues.
3. Despite these efforts, the server consistently returns a 403 CSRF Token Mismatch error upon form submission.

Expected Behavior

The form submission should be processed without any CSRF token mismatch errors, assuming the CSRF token provided by the client matches the server's expectations.

Actual Behavior

The server responds with a 403 CSRF Token Mismatch error, indicating a discrepancy between the provided and expected CSRF tokens.

Environment

- Operating System: Windows_NT
- Node Version: v20.8.1
- Nuxt Version: 3.10.0
- CLI Version: 3.10.0
- Nitro Version: 2.8.1
- Package Manager: pnpm@8.14.1
- User Config: preset, experimental, devtools, modules, serverMiddleware, nitro, i18n, cloudflareAnalytics, turnstile, css, postcss, mongoose, app, runtimeConfig, routeRules, image, security, csurf, content, typescript
- Runtime Modules: @nuxt/image@1.3.0, @nuxt/devtools@1.0.8, @nuxt/content@2.11.0, @nuxtjs/i18n@8.0.1, @nuxtjs/turnstile@0.6.3, @nuxtjs/tailwindcss@6.11.3, nuxt-security@1.1.0, nuxt-headlessui@1.1.5, nuxt-cloudflare-analytics@1.0.8, nuxt-csurf@1.4.0

Attempts to Resolve

• Checked client-side CSRF token retrieval and inclusion in request headers. (Even tried to include it manually)
• Reviewed server and client configurations for potential issues.

Additional Context

I have closely followed the documentation for both Nuxt 3 and nuxt-csurf and ensured my setup aligns with the recommended practices. However, the issue persists, and I'm unable to identify the cause of the CSRF token mismatch error. Any guidance or insights would be greatly appreciated.

[nandita121189]

Any update on the above? I'm also getting a similar issue.

[priyachawla11]

We are getting the same issue for the following configuration:

- Node Version: 20.5.0
- Nuxt Version:  3.7.0
- Nitro Version: 2.8.1
- Package Manager: pnpm@8.14.1

Client-side CSRF token retrieved and included in request headers are same, still getting CSRF token mismatch error.

[Morgbn]

Hello, weird, I'm using the module in a similar environment but I don't get these errors, can you provide a link to a minimal reproduction? I'm very busy at the moment so I can't investigate further.

[nicokempe]

Any update on the above? I'm also getting a similar issue.

For now I have just removed the module because I haven't got an answer. In the long run I do probably have to look for an own solution. I couldn't find a lot of Open Source projects nor resources in general.

Client-side CSRF token retrieved and included in request headers are same, still getting CSRF token mismatch error.

Yes, same. I have already tried to log the token directly using the workaround solution from the docs but there the token is undefined.

Hello, weird, I'm using the module in a similar environment but I don't get these errors, can you provide a link to a minimal reproduction? I'm very busy at the moment so I can't investigate further.

I will look for the problem again today and try to provide a minimal reproduction. Hopefully just a dumb mistake of myself

[nicokempe]

useCsrfFetch version failed: https://github.com/nicokempe/nuxt-csrf-test -> Throws 403 CSRF Token Mismatch. Request header contains the csrf-token undefined.

[nicokempe]

Cookie "csrf=ac6fd71b-8998-47c7-911a-.............." exists and is there but nothing is in the headers. There only "undefined" is given: https://github.com/nicokempe/nuxt-csrf-test/tree/test/%24fetch

I do really hope that I am just using it wrong but I am just following instructions and have read all the available documentation and I cant get it to work, maybe I am misunderstanding something but I dont know

[zhaolinlau]

same problem here

[zhaolinlau]

i've tried with the nuxt-csrf in nuxt security looks fine for me

[zhaolinlau]

i've tried with the nuxt-csrf in nuxt security looks fine for me

I take back my words, it happens sometimes.

[igorgusarov]

Same problem, using nuxt security module

[nicokempe]

any update @Morgbn?

[Morgbn]

Hello @nicokempe, I tried to run your repo (https://github.com/nicokempe/nuxt-csrf-test) It works for me, I just comment encryptAlgorithm from the configuration (you have to set 'AES-CBC' only in serveless context, it's usually better to let nuxt-csrf find the right algorithm according to context) Can you test without encryptAlgorithm set ?

excuse the late reply, last few weeks have been very busy for me

[nicokempe]

Hello @Morgbn, thank you very much for your answer! I haven't gotten around to testing that yet, I've completely disabled CSRF for now, I'm deploying to Cloudflare Pages, hence the encryption set. But if the module finds out for itself which encryption has to be used, that's even better. I'll have a look, but if it worked for you, that sounds promising, thanks for taking a look! :)

[mwilliford]

Same issue here, I include const {csrf} = useCSRF() on my login page, in my Githubissues.

Githubissues is a development platform for aggregating issues.