Nuxt Csurf

Cross-Site Request Forgery (CSRF) prevention.
Create a middleware for CSRF token creation and validation.

✅ Supports Node.js server & serverless environments
✅ Supports both universal and client-side rendering (ssr: true|false)
✅ Per-route configuration
✅ TypeScript
❌ Don't support static hosting and nitro prerender due to certain limitations *

Installation

1npx nuxi@latest module add csurf

Global configuration

1// nuxt.config.js
2export default defineNuxtConfig({
3  modules: ['nuxt-csurf'],
4  csurf: { // optional
5    https: false, // default true if in production
6    cookieKey: '', // "__Host-csrf" if https is true otherwise just "csrf"
7    cookie: { // CookieSerializeOptions from unjs/cookie-es
8      path: '/',
9      httpOnly: true,
10      sameSite: 'strict'
11    },
12    methodsToProtect: ['POST', 'PUT', 'PATCH'], // the request methods we want CSRF protection for
13    encryptSecret: /** a 32 bits secret */, // for stateless server (like serverless runtime), random bytes by default
14    encryptAlgorithm: 'aes-256-cbc', // by default 'aes-256-cbc' (node), 'AES-CBC' (serverless)
15    addCsrfTokenToEventCtx: true, // default false, to run useCsrfFetch on server set it to true
16    headerName: 'csrf-token' // the header where the csrf token is stored
17  } 
18})

Per route configuration

To enable per-route configuration, use the routeRules like following:

1export default defineNuxtConfig({
2  routeRules: {
3    '/api/nocsrf': {
4      csurf: false
5    },
6    '/api/test': {
7      csurf: {
8        methodsToProtect: ['POST'] // protect POST request only
9      }
10    }
11  }
12})

useCsrfFetch

This composable provides a convenient wrapper around useFetch. It automatically adds the CSRF token in headers.

1const { data, pending, error, refresh } = useCsrfFetch('/api/login', { query: param1: 'value1' })

$csrfFetch

This helper provides a convenient wrapper around $fetch. It automatically adds the CSRF token in headers.

1const { $csrfFetch } = useNuxtApp()
2const { data } = await $csrfFetch('/api/login', { method: 'POST', body: …, headers: … })

useCsrf

Use this composable if you need to access to the CSRF token value.

1const { csrf } = useCsrf()
2console.log(csrf) // something like: mo4+MrFaeXP7fhAie0o2qw==:tLUaqtHW6evx/coGQVAhtGAR+v6cxgFtrqmkOsuAMag8PHRnMwpbGGUO0TPJjL+4

Try production on localhost (yarn preview):

NITRO_CSURF_HTTPS=false
NITRO_CSURF_COOKIE_KEY=csrf

Limitations

The CSRF Token value is stored in the DOM as described in Owasp's CSRF cheatsheet. So the DOM has to be generated for each new page request, which is not the case with a static site (or prerendered routes). See error #42

Credits

• inspired by tiny-csrf and expressjs/csurf
• see OWASP CSRF cheatsheet