nuxt-csurf

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

Installation

npx nuxi@latest module add csurf

Global configuration

// nuxt.config.js
export default defineNuxtConfig({
  modules: ['nuxt-csurf'],
  csurf: { // optional
    https: false, // default true if in production
    cookieKey: '', // "__Host-csrf" if https is true otherwise just "csrf"
    cookie: { // CookieSerializeOptions from unjs/cookie-es
      path: '/',
      httpOnly: true,
      sameSite: 'strict'
    },
    methodsToProtect: ['POST', 'PUT', 'PATCH'], // the request methods we want CSRF protection for
    encryptSecret: /** a 32 bits secret */, // only for non serverless runtime, random bytes by default
    encryptAlgorithm: 'aes-256-cbc', // by default 'aes-256-cbc' (node), 'AES-CBC' (serverless)
    addCsrfTokenToEventCtx: true, // default false, to run useCsrfFetch on server set it to true
    headerName: 'csrf-token' // the header where the csrf token is stored
  } 
})

Per route configuration

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

export default defineNuxtConfig({
  routeRules: {
    '/api/nocsrf': {
      csurf: false
    },
    '/api/test': {
      csurf: {
        methodsToProtect: ['POST'] // protect POST request only
      }
    }
  }
})

useCsrfFetch

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

const { 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.

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

useCsrf

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

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

Credits

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

Changelog

1.6.2 (2024-08-20)

Bug Fixes

• :art: message on error (2e928b7)