Security Headers

Understand how Nuxt Security modifies Headers

Type of resource

Nuxt Security protects your application by adding security headers on

1. HTML resources: pages rendered by your application (usually compiled from .vue files)
2. Other resources: all other assets delivered by your application (images, files, api resources, etc.)

However the headers delivered on these two types of resources are not treated equally.

HTML resources

Nuxt Security delivers all security headers on HTML resources, as defined in your configuration.

In addition, for HTML assets you can further customize headers via the nuxt-security:routeRules runtime hook.

Other resources

For non-HTML assets, Nuxt Security only delivers a restricted subset of headers, which are relevant for these resources.

In addition, the nuxt-security:routeRules hook does not modify headers on these resources.

Rendering mode

Nuxt Security protects your application in all rendering modes offered by Nuxt

• Universal Rendering (aka SSR)
• Client-side rendering (aka SSG)
• Hybrid rendering (aka SSR with routeRules)

However the headers are not delivered equally in these three modes.

Universal Rendering

In SSR mode, Nuxt Security delivers security headers via HTTP headers. This is the preferred method for delivering headers.

Client-side Rendering

In SSG mode, Nuxt Security cannot deliver security headers via HTTP headers. This is because your pages are statically generated and served by your own hosting provider. We do not control the headers delivered by your hosting provider.

As a workaround, Nuxt Security implements the following approach:

• All security headers are compatible with Nitro presets. If you deploy your site with a Nitro preset, security headers will be delivered via HTTP headers. You can disable this feature by setting the ssg: exportToPresets option to false.
• All security headers are available via the nuxt-security:prerenderedHeaders hook. If you deploy your site manually, you can use this hook to manually generate headers for your server.
• By way of fallback, CSP is delivered by default via the <meta http-equiv> HTML tag. You can disable this feature by setting the ssg: meta option to false.

Hybrid Rendering

In Hybrid mode, Nuxt Security delivers security headers via HTTP headers, including for pre-rendered routes specified with the pre-render option of routeRules.

You can disable this feature by setting the ssg: nitroHeaders option to false, either globally or on a route-level basis. Please note that in this case, security headers will not be delivered via HTTP headers anymore for these pre-rendered pages. CSP will still continue to be available via the <meta http-equiv> tag.

routeRules definitions

There are two different ways that are available with Nuxt to create rules for headers:

• Nuxt Security (this module): rules for your security headers are defined under the security field of the Nuxt routeRules.
• Native Rules : you can also modify any header natively with the header field of the Nuxt routeRules.

If you use both methods simultaneously, Nuxt Security will resolve any potential conflict by giving priority to Nuxt Security's security field.

However please note that creating conflicting rules can also have impacts on security headers depending on the Type of Resource and the Rendering Mode.