Utils

Subresource Integrity

Ensure that your application bundle has not been manipulated.

Subresource Integrity (SRI) is a security feature that enables the browser to verify that the static assets that your application is loading have not been altered.

Nuxt Security automatically computes the integrity hash of each static asset (scripts, stylesheets, etc.) that are bundled in your Nuxt Application, and then inserts this value in the resulting HTML file.

Read more about Subresource Integrity here.

Options

This feature is enabled globally by default. You can customize it like following:

nuxt.config.ts
export default defineNuxtConfig({
  // Global
  security: {
    sri: true
  },

  // Per route
  routeRules: {
    '/custom-route': {
      security: {
        sri: true
      },
    }
  }
})

You can disable the feature either globally or by route by setting sri: false.

Usage

Subresource Integrity is used for two important security features of your application:

1. SRI ensures that the assets that you included in your build have not been altered.

When you build your Nuxt application and deliver it to your users, a significant number of critical components are included in your final bundle.

These components are mostly scripts containing Javascript code (files such as /_nuxt/entry.b8aef440d.js), stylesheets, etc. An attacker may try to compromise your application by modifying these files.

Nuxt Security calculates the hash of each of these files at build time, therefore guaranteeing that the files that are loaded by your users are exactly the ones that you included in your bundle.

Arguably, if you host your static assets yourself, the risk that these files are modified by a malicious actor without your authorization can be rated as low.

However:

  • If you host your application on a public CDN, that CDN could become the target of an attack.
  • Even if you host your application on a private hosting service, you should be aware that most hosting providers use elaborate caching strategies to accelerate the delivery of your files (e.g. via edge CDN replication).
  • In any case, your own account (or the account of one of the members of your organization) might become compromised.

For these reasons, most modern web applications rely on SRI to reduce their attack surface.

SRI is supported by all modern browsers: caniuse

2. SRI is a critical component of Content Security Policy (CSP) in SSG mode.

For more information on the relationship between Subresource Integrity and a Strict CSP, please read our Advanced Section on Integrity Hashes for CSP

If you use CSP on a statically-generated application, you will need to enable SRI by setting sri: true.

Subresource Integrity hashes can only be inserted on <script> and <link> elements generated as part of the server bundle.
To protect your Nuxt application after client-side hydration, you must deploy a Strict CSP.

CDN Post-Build Processing

Subresource Integrity ensures that the assets that you produced at build time are delivered unchanged to your users.

If your assets are modified by an external service after build time, Subresource Integrity will prevent your site from loading.

Some hosting services give you the option to modify your assets with a Post-Build Processing step.
This is notably the case for Cloudflare and Netlify. If you use one of these hosting services, please make sure to disable post-build minification and bundling.

Note: your assets are already minified and bundled by the Vite optimizer. Re-minifying your assets will not bring benefits to your application, you can safely disable these options.

For more information, see the Nuxt documentation on CDN Proxy