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 {
  owaspDefaults: 'compatibility' | 'security'
  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.

Defaults

This module will automatically set default values for each option. These values are chosen based on the OWASP recommendations, based on the owaspDefaults option.

We provide two base sets of defaults that you can choose from:

  • compatibility: these defaults ensure minimum disruption of your existing application. In most cases, these defaults will ensure that you can use Nuxt-Security without further customization.
  • security: these defaults prioritize maximum security. You will likely need to customize Nuxt-Security options in order to ensure that your application can run smoothly.

By default, this module uses the compatibility mode and will set the following configuration options:

security: {
  headers: {
    crossOriginResourcePolicy: 'same-origin',
    crossOriginOpenerPolicy: 'same-origin',
    crossOriginEmbedderPolicy: 'credentialless',
    contentSecurityPolicy: {
      'base-uri': ["'none'"],
      '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'"],
      'script-src': ["'self'", 'https:', "'unsafe-inline'", "'strict-dynamic'", "'nonce-{{nonce}}'"],
      '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,
    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 the security mode for owaspDefaults, see Strenthening your application

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