feat: ✨ option to configure header name

Resolves #38

Author: Morgbn

README.md

@@ -37,7 +37,8 @@ export default defineNuxtConfig({
     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
+    addCsrfTokenToEventCtx: true, // default false, to run useCsrfFetch on server set it to true
+    headerName: 'csrf-token' // the header where the csrf token is stored
   } 
 })
 ```

playground/nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
   },
   csurf: {
     https: process.env.NODE_ENV === 'production',
-    methodsToProtect: ['POST']
+    methodsToProtect: ['POST'],
+    headerName: 'X-CSRF-TOKEN'
   }
 })

src/module.ts

@@ -17,6 +17,7 @@ export default defineNuxtModule<ModuleOptions>({
       httpOnly: true,
       sameSite: 'strict'
     },
+    headerName: 'csrf-token',
     methodsToProtect: ['POST', 'PUT', 'PATCH']
   },
   setup (options, nuxt) {
@@ -31,6 +32,7 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     nuxt.options.runtimeConfig.csurf = defuReplaceArray(nuxt.options.runtimeConfig.csurf, { ...options })
+    nuxt.options.runtimeConfig.public.csurf = { headerName: nuxt.options.runtimeConfig.csurf.headerName }
 
     if (options.enabled !== false) {
       addServerHandler({ handler: resolve('runtime/server/middleware/csrf') })
@@ -54,6 +56,9 @@ declare module 'nuxt/schema' {
   interface RuntimeConfig {
     csurf: ModuleOptions
   }
+  interface PublicRuntimeConfig {
+    csurf: Pick<ModuleOptions, 'headerName'>
+  }
 }
 
 declare module 'nitropack' {

src/runtime/composables.ts

@@ -1,5 +1,5 @@
 // Adapted from https://github.com/nuxt/nuxt/blob/7046930a677f4c987afaee5a0165841b0e0a517f/packages/nuxt/src/app/composables/fetch.ts
-import { useFetch, type FetchResult, type UseFetchOptions, useNuxtApp } from '#app'
+import { useFetch, type FetchResult, type UseFetchOptions, useNuxtApp , useRuntimeConfig } from '#app'
 import type { Ref } from 'vue'
 import type { FetchError } from 'ofetch'
 import type { NitroFetchRequest, AvailableRouterMethod as _AvailableRouterMethod } from 'nitropack'
@@ -49,9 +49,9 @@ export function useCsrfFetch<
   arg2?: string
 ) {
   const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2]
-  const { csrf } = useCsrf()
+  const { csrf, headerName } = useCsrf()
   opts.headers = (opts.headers || {}) as Record<string, string>
-  opts.headers['csrf-token'] = csrf // add csrf token to req headers
+  opts.headers[headerName] = csrf // add csrf token to req headers
   return useFetch<ResT, ErrorT, ReqT, Method, _ResT, DataT, PickKeys, DefaultT>(
     request,
     opts,
@@ -111,9 +111,10 @@ export function useLazyCsrfFetch<
 }
 
 export function useCsrf() {
+  const headerName = useRuntimeConfig().public.csurf.headerName ?? ''
   if (import.meta.server) {
-    return { csrf: useNuxtApp().ssrContext?.event?.context?.csrfToken }
+    return { csrf: useNuxtApp().ssrContext?.event?.context?.csrfToken, headerName }
   }
   const metaTag = window.document.querySelector('meta[name="csrf-token"]')
-  return { csrf: metaTag?.getAttribute('content') }
+  return { csrf: metaTag?.getAttribute('content'), headerName }
 }

src/runtime/plugin.ts

@@ -15,11 +15,11 @@ type MappedType<R extends ResponseType, JsonType = any> = R extends keyof Respon
 type $CsrfFetch = <T = any, R extends ResponseType = "json">(request: FetchRequest, options?: FetchOptions<R>, fetch?: $Fetch) => Promise<MappedType<R, T>>
 
 export default defineNuxtPlugin(() => {
-  const { csrf } = useCsrf()
+  const { csrf, headerName } = useCsrf()
   const csrfFetch: $CsrfFetch = (request, options, fetch = $fetch) => {
     if (!options) { options = {} }
     options.headers = (options.headers || {}) as Record<string, string>
-    options.headers['csrf-token'] = csrf
+    options.headers[headerName] = csrf
     return fetch(request, options)
   }
   return {

src/runtime/server/middleware/csrf.ts

@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
   if (!methodsToProtect.includes(method)) { return }
 
   const secret = getCookie(event, csrfConfig.cookieKey!) ?? ''
-  const token = getHeader(event, 'csrf-token') ?? ''
+  const token = getHeader(event, baseConfig.headerName!) ?? ''
   // verify the incoming csrf token
   const isValidToken = await csrf.verify(secret, token, await useSecretKey(csrfConfig), csrfConfig.encryptAlgorithm)
   if (!isValidToken) {

src/types.ts

@@ -23,4 +23,5 @@ export interface ModuleOptions {
   encryptAlgorithm?: EncryptAlgorithm
   addCsrfTokenToEventCtx?: boolean // to run useCsrfFetch on server
   enabled?: boolean // disabled module server middleware/plugin when `enabled` is set to `false` (you will still have access to `useCsrf`/`useCsrfFetch` client composables)
+  headerName?: string
 }