Disable CSRF for a route in routeRules

[igorgusarov]

Is your feature request related to a problem? Please describe.

I'm using CSRF option in nuxt-security. I need to have a route handling a POST request from an external system that doesn't need CSRF protection, but getting a CSRF mismatch error for it.

It would be nice to have an option to disable CSRF in routeRules.

[igorgusarov]

I should also mention that I tried using excludedUrls, and it doesn't work for me. I created a new Nuxt project to make sure it’s not something with my code. Installed nuxt and nuxt-security, created a route, added it to excludeUrls, but still getting CSRF mismatch error. And the type checker helper says it’s not a valid option.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: [
        'nuxt-security',
    ],

    security: {
        enabled: true,

        csrf: {
            enabled: true,
            https: true,
            cookie: {
                secure: true,
            },
            addCsrfTokenToEventCtx: true,
            excludedUrls: [
                '/test',
            ],
        },
    },
})

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "nuxt-security": "^1.3.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

If I set CSRF enabled: false, the route works. Otherwise I'm getting a 403 CSRF Token Mismatch error. Maybe this should be a bug instead.

[Baroshem]

Hey, thanks for reporting this issuez

@Morgbn what are your thoughts on that? :)

[igorgusarov]

I searched through both nuxt-security and nuxt-csurf code for excludedUrls, and could only find it in nuxt-security documentation: docs/content/1.documentation/3.middleware/7.csrf.md

Does this feature exist? Was it accidentally removed at some point?

I'd appreciate any advice for a workaround. I just need to process a POST request without CSRF protection. Thanks!

[Baroshem]

Heyo, I have found the following in the nuxt csurf playground.

Could you try to add it to the nuxt.config.ts file and see if it makes a difference?

routeRules: {
    '/api/nocsrf': {
      csurf: false
    }
  },

I will be able to help end of this week as I am off for short vacations and dont have access to the computer :)

[Morgbn]

Hello ! Yes that's right, nuxt-csurf now supports configuration by route, and no longer excludedUrls. This new feature was supposed to be included only in v2, but the breaking change wasn't taken into account at release time.. apologize for the sudden change!

[Baroshem]

Thanks @Morgbn for details!

@igorgusarov could you check if it works like that? :)

[igorgusarov]

@Baroshem @Morgbn This worked, thank you both!

[Baroshem]

Awesome, closing the issue then :)

[Stf-F]

Hi @Baroshem, @Morgbn, I came across that thread as I also need to switch off CSRF for a few server routes, and also using nuxt-security v1.3.2. However, I am still facing a few issues. I have tried the following:

 security: {
    csrf: {
      routeRules: {
        "/server/route": {
          csurf: false,
        },
      },
      addCsrfTokenToEventCtx: true,
      methodsToProtect: ["POST", "PATCH"],
    }
}

I also tried this:

 export default defineNuxtConfig({
  routeRules: {
    "/server/route": {
      security: {
        csrf: false, // ts warning
      },
    },
      security: {
       csrf: {
         addCsrfTokenToEventCtx: true,
          methodsToProtect: ["POST", "PATCH"],
     },
}
  },
})

But keep getting 403s. If I remove the csrf object altogether the requests go through. Do the routeRules assume that the routes are api routes, or shall they work with server routes too? Thanks!