Configuration

The module by default will register global middlewares and route roules to make your application more secure. You can also modify or disable any of middlewares/routes or your project cannot use them (i.e. some Statically Generated websites will not be able to use middlewares).

You can add global configuration to the module like following:

nuxt.config.ts
export default defineNuxtConfig({  security: {    rateLimiter: {      tokensPerInterval: 2,      interval: 'hour',    }  }})

You can disable them from the module configuration like following:

nuxt.config.ts
export default defineNuxtConfig({  security: {    rateLimiter: false  }})

In general, the security object in nuxt configuration should be used to register functionality that will be used globally in your application. For per route configuration, check out the next section.

Per route middleware configuration

By default, middlewares are configured to work globally, but you can easily configure them per route by using routeRules:

nuxt.config.ts
export default defineNuxtConfig({  routeRules: {    '/custom-route': {      security: {        rateLimiter: {          tokensPerInterval: 2,          interval: 'hour',        }      }    }  }})

By adding this you will have global middleware for all routes (regarding rate limiting) and specific configuration to the /custom-route route.

You can also disable certain middlewares per route like following:

nuxt.config.ts
export default defineNuxtConfig({  routeRules: {    '/custom-route': {      security: {        rateLimiter: false      }    }  }})

Configuration Types

The following previous interface for registering middlewares is now deprecated due to the introduction of per-route configuration.
type MiddlewareConfiguration<MIDDLEWARE> = {  value: MIDDLEWARE;  route: string;};
Make sure to use the security object in nuxt.config.ts to register global functionality and routeRules for per-route configuration.

All module configuration is the following type:

interface ModuleOptions {  headers: SecurityHeaders | false;  requestSizeLimiter: RequestSizeLimiter | false;  rateLimiter: RateLimiter | false;  xssValidator: XssValidator | false;  corsHandler: CorsOptions | false;  allowedMethodsRestricter: AllowedHTTPMethods | false;  hidePoweredBy: boolean;  basicAuth: BasicAuth | boolean;  enabled: boolean;  csrf: CsrfOptions | boolean;}

All above ModuleOptions are explained in more details in the next chapter

Default configuration

This module will by default set the following configuration options to enable middlewares and route roules:

security: {  headers: {    crossOriginResourcePolicy: 'same-origin',    crossOriginOpenerPolicy: 'same-origin',    crossOriginEmbedderPolicy: 'require-corp',    contentSecurityPolicy: {      'base-uri': ["'self'"],      'font-src': ["'self'", 'https:', 'data:'],      'form-action': ["'self'"],      'frame-ancestors': ["'self'"],      'img-src': ["'self'", 'data:'],      'object-src': ["'none'"],      'script-src-attr': ["'none'"],      'style-src': ["'self'", 'https:', "'unsafe-inline'"],      'upgrade-insecure-requests': true    },    originAgentCluster: '?1',    referrerPolicy: 'no-referrer',    strictTransportSecurity: {      maxAge: 15552000,      includeSubdomains: true    },    xContentTypeOptions: 'nosniff',    xDNSPrefetchControl: 'off',    xDownloadOptions: 'noopen',    xFrameOptions: 'SAMEORIGIN',    xPermittedCrossDomainPolicies: 'none',    xXSSProtection:  '0',    permissionsPolicy: {      'camera': ['()'],      'display-capture': ['()'],      'fullscreen': ['()'],      'geolocation': ['()'],      'microphone': ['()'],    }  },  requestSizeLimiter: {      maxRequestSizeInBytes: 2000000,      maxUploadFileRequestInBytes: 8000000,  },  rateLimiter: {    // Twitter search rate limiting      tokensPerInterval: 150,      interval: "hour",      fireImmediately: true,  },  xssValidator: {},  corsHandler: {    origin: '*',    methods: ['GET','HEAD','PUT','PATCH','POST','DELETE'],    preflight: {      statusCode: 204    }  },  allowedMethodsRestricter: '*',  hidePoweredBy: true,  basicAuth: false,  enabled: true,  csrf: false,}

To read more about every security middleware, go to that middleware page in security section.

Using with Nuxt DevTools

In order to make this module work with Nuxt DevTools add following configuration to your projects:

nuxt.config.ts
export default defineNuxtConfig({  modules: ['nuxt-security', '@nuxt/devtools'],  security: {    headers: {      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',    },  },});

Using with tRPC Nuxt

TRPC uses POST requests for the mutation endpoints. Using the CSRF protection functionality of this module with trpc-nuxt will help you protect your mutation endpoints from CSRF.

In order to make the CSRF functionality of this module work with trpc-nuxt, we have to add the CSRF token value into a csrf-token header inside the outgoing request headers in our trpc client.

import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";import type { AppRouter } from "@/server/trpc/routers";export default defineNuxtPlugin(() => {  const headers = useRequestHeaders();  const { csrf } = useCsrf();  const client = createTRPCNuxtClient<AppRouter>({    links: [      httpBatchLink({        // Headers are called on every request        headers() {          // Add CSRF token to request headers          return { ...headers, "csrf-token": csrf };        },      }),    ],  });  return {    provide: {      client,    },  };});
Edit this page on GitHub

Getting Started

Setup

Security

Headers