Create a middleware for CSRF token creation and validation in serverless environments.
This fork is compatible with Cloudflare Workers.
yarn add nuxt3-csurf # yarn
npm i nuxt3-csurf # npm
The only thing you need to do to use the module in the default configuration is to register the module in the modules
array in nuxt.config.ts
:
// nuxt.config.js
{
modules: [
"nuxt3-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
excludedUrls: ['/nocsrf1', ['/nocsrf2/.*', 'i']], // any URLs we want to exclude from CSRF protection
encryptSecret: /** JsonWebKey object */, // random key by default
encryptAlgorithm: 'AES-CBC'
}
}
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' })
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: … })
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
- inspired by tiny-csrf and expressjs/csurf
- see OWASP CSRF cheatsheet