Morgbn
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
npx nuxi@latest module add csurfGlobal 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 */, // for stateless server (like 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+4Try production on localhost (yarn preview):
NITRO_CSURF_HTTPS=false
NITRO_CSURF_COOKIE_KEY=csrfLimitations
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