---
title: Security Headers
description: 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.

::callout
Full list of headers applicable to HTML resources
- crossOriginResourcePolicy
- crossOriginOpenerPolicy
- crossOriginEmbedderPolicy
- contentSecurityPolicy
- originAgentCluster
- referrerPolicy
- strictTransportSecurity
- xContentTypeOptions
- xDNSPrefetchControl
- xDownloadOptions
- xFrameOptions
- xPermittedCrossDomainPolicies
- xXSSProtection
- permissionsPolicy
::

### 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.

::callout
Restricted list of headers applicable to non-HTML resources
- referrerPolicy
- strictTransportSecurity
- xContentTypeOptions
- xDownloadOptions
- xFrameOptions
- xPermittedCrossDomainPolicies
- xXSSProtection
::


## 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](#type-of-resource) and the [Rendering Mode](#rendering-mode).

::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
Therefore our recommendation is to avoid creating conflicts:
- Always define security headers with Nuxt Security `security` rules exclusively.
- Define all other headers with Nuxt native `headers` rules
::

::callout
Full list of security headers that should be only defined with Nuxt Security
- crossOriginResourcePolicy
- crossOriginOpenerPolicy
- crossOriginEmbedderPolicy
- contentSecurityPolicy
- originAgentCluster
- referrerPolicy
- strictTransportSecurity
- xContentTypeOptions
- xDNSPrefetchControl
- xDownloadOptions
- xFrameOptions
- xPermittedCrossDomainPolicies
- xXSSProtection
- permissionsPolicy
::