Configuration

Nuxt Security is configured with sensible defaults.

The module by default will register global middleware and route rules 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).

Types

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 | false;
  enabled: boolean;
  csrf: CsrfOptions | false;
  nonce: boolean;
  removeLoggers: RemoveOptions | false;
  ssg: Ssg | false;
  sri: boolean;
}

All above ModuleOptions are explained in more details in the next sections.

Default

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': ["'none'"],
      'default-src' : ["'none'"],
      'connect-src': ["'self'", 'https:'],
      'font-src': ["'self'", 'https:', 'data:'],
      'form-action': ["'self'"],
      'frame-ancestors': ["'self'"],
      'frame-src': ["'self'"],
      'img-src': ["'self'", 'data:'],
      'manifest-src': ["'self'"],
      'media-src': ["'self'"],
      'object-src': ["'none'"],
      'script-src-attr': ["'none'"],
      'style-src': ["'self'", 'https:', "'unsafe-inline'"],
      'script-src': ["'self'", 'https:', "'unsafe-inline'", "'strict-dynamic'", "'nonce-{{nonce}}'"],
      'upgrade-insecure-requests': true,
      'worker-src': ["'self'"],
    },
    originAgentCluster: '?1',
    referrerPolicy: 'no-referrer',
    strictTransportSecurity: {
      maxAge: 31536000,
      includeSubdomains: true
    },
    xContentTypeOptions: 'nosniff',
    xDNSPrefetchControl: 'off',
    xDownloadOptions: 'noopen',
    xFrameOptions: 'DENY',
    xPermittedCrossDomainPolicies: 'none',
    xXSSProtection: '0',
    permissionsPolicy: {
      accelerometer: [],
      'ambient-light-sensor':[],
      autoplay:[],
      battery:[],
      camera:[],
      'display-capture':[],
      'document-domain':[],
      'encrypted-media':[],
      fullscreen:[],
      gamepad:[],
      geolocation:[],
      gyroscope:[],
      'layout-animations':['self'],
      'legacy-image-formats':['self'],
      magnetometer:[],
      microphone:[],
      midi:[],
      'oversized-images':['self'],
      payment:[],
      'picture-in-picture':[],
      'publickey-credentials-get':[],
      'speaker-selection':[],
      'sync-xhr':['self'],
      'unoptimized-images':['self'],
      'unsized-media':['self'],
      usb:[],
      'screen-wake-lock':[],
      'web-share':[],
      'xr-spatial-tracking':[]
    }
  },
  requestSizeLimiter: {
    maxRequestSizeInBytes: 2000000,
    maxUploadFileRequestInBytes: 8000000,
    throwError: true
  },
  rateLimiter: {
    tokensPerInterval: 150,
    interval: 300000,
    headers: false,
    driver: {
      name: 'lruCache'
    },
    throwError: true
  },
  xssValidator: {
    throwError: true
  },
  corsHandler: {
    origin: serverlUrl,
    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
    preflight: {
      statusCode: 204
    },
  },
  allowedMethodsRestricter: {
    methods: '*',
    throwError: true
  },
  hidePoweredBy: true,
  basicAuth: false,
  enabled: true,
  csrf: false,
  nonce: true,
  removeLoggers: {
    external: [],
    consoleType: ['log', 'debug'],
    include: [/\.[jt]sx?$/, /\.vue\??/],
    exclude: [/node_modules/, /\.git/]
  },
  ssg: {
    meta: true,
    hashScripts: true,
    hashStyles: false,
    nitroHeaders: true,
    exportToPresets: true,
  },
  sri: true
}

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

Overriding a layer's configuration

If you extend a Nuxt Layer which adds nuxt-security, you can override that layer's nuxt-security configuration or parts of it by defining a module in your project's nuxt.config.ts. Here is an example that illustrates how to remove the 'none' value set by default for object-src:

export default defineNuxtConfig(
  {
    extends: 'some-layer-adding-nuxt-security',
    modules: [
      (_options, nuxt) => {
        const nuxtConfigSecurity = nuxt.options.security
        if (
          typeof nuxtConfigSecurity.headers !== 'boolean' &&
          nuxtConfigSecurity.headers.contentSecurityPolicy &&
          typeof nuxtConfigSecurity.headers.contentSecurityPolicy !==
            'boolean' &&
          typeof nuxtConfigSecurity.headers.contentSecurityPolicy !==
            'string' &&
          nuxtConfigSecurity.headers.contentSecurityPolicy['object-src']
        ) {
          nuxtConfigSecurity.headers.contentSecurityPolicy['object-src'] =
            nuxtConfigSecurity.headers.contentSecurityPolicy[
              'object-src'
            ].filter((x) => x !== "'none'")
        }
        console.log(nuxt.options.security)
      },
    ],
  }
)

Of course it's possible to define the module shown above using a file in the modules directory as well.

Edit this page on GitHub
Table of Contents