Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.
You can learn more about CSRF here.
This functionality is based on the great module by Morgan. You can check out the full documentation and reference here
nuxt-csurf is disabled by default but you can enable it with default configuration like following:
export default defineNuxtConfig({ security: { csrf: true }})Now, you can use the auto-imported composables for handling CRSF:
// Wrapper around `useFetch` that automatically adds CSRF token in headersconst { data, pending, error, refresh } = useCsrfFetch('/api/login', { query: 'value1' })// Have access to the CSRF token valueconst { csrf } = useCsrf()Apart from just enabling it, you can pass a custom configuration to the underlying nuxt-csurf module by using the following interface:
interface ModuleOptions { https?: boolean, cookie?: CookieSerializeOptions, cookieKey?: string, methodsToProtect?: Array<string>, // the request methods we want CSRF protection for excludedUrls?: Array<string|[string, string]>, // any URLs we want to exclude from CSRF protection encryptSecret?: string, encryptAlgorithm?: string}interface CookieSerializeOptions { domain?: string | undefined; encode?(value: string): string; expires?: Date | undefined; httpOnly?: boolean | undefined; maxAge?: number | undefined; path?: string | undefined; sameSite?: true | false | 'lax' | 'strict' | 'none' | undefined; secure?: boolean | undefined;}