Configuration
Nuxt Security is configured with sensible defaults.
The module by default will register global middleware 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).
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'"], '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: { hashScripts: true, hashStyles: false }, 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.