security.sri#

• Type:

type SriOptions = {
  enable?: 'auto' | boolean;
  algorithm?: 'sha256' | 'sha384' | 'sha512';
};

• Default: undefined

Adding an integrity attribute to <script> and <link> tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.

What is SRI#

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.

For <script> tags, the result is to refuse to execute the code; for CSS links, the result is not to load the styles.

For more on subresource integrity, see Subresource Integrity - MDN.

Example#

When using SRI, you need to enable html.crossorigin, which ensures that resources can be properly validated with SRI during cross-origin loading.

export default {
  security: {
    sri: {
      enable: 'auto',
    },
  },
  html: {
    crossorigin: 'anonymous',
  },
};

The <script> and <link> tags generated by Rsbuild will include the integrity and crossorigin attributes:

<script
  defer
  src="https://cdn.com/static/js/index.js"
  crossorigin="anonymous"
  integrity="sha384-d8fhhhTWXaPPIEMw+POJ9hqCIRvsFbegq/oef7k9R8Rpb8Dy95B2THPOECdZoLDF"
></script>

<link
  href="https://cdn.com/static/css/index.css"
  rel="stylesheet"
  crossorigin="anonymous"
  integrity="sha384-8U9HYzsHbf55cFZyiWIE29+QPYQ9WO+U5uT/ViFw0TOwM2Fbbb74ZegzRV/nvwrD"
/>

Note#

The security.sri in Rsbuild will only apply to the tags generated by Rsbuild and will not apply to:

• The original tags in the HTML template.
• The tags injected asynchronously by Rspack.
• The tags inserted through client JavaScript code.

Rsbuild will handle the following <link> tags:

• <link rel="preload">
• <link rel="stylesheet">
• <link rel="modulepreload">

Options#

enable#

• Type: 'auto' | boolean
• Default: false

Whether to enable SRI. 'auto' means it's enabled in production mode and disabled in development mode.

export default {
  security: {
    sri: {
      enable: 'auto',
    },
  },
};

Typically, you do not need to enable SRI in development mode.

algorithm#

• Type: 'sha256' | 'sha384' | 'sha512'
• Default: 'sha384'

Specifies the algorithm used to compute the integrity hash.

For example, set to sha512:

export default {
  security: {
    sri: {
      algorithm: 'sha512',
    },
  },
};

The generated value of integrity attribute will be prefixed with sha512-:

<script
  defer
  src="https://cdn.com/static/js/index.js"
  crossorigin="anonymous"
  integrity="sha512-ShExVSs5q/j3ZBI/PeS0niJ4mBxh6tc08QN1uofI1dmGAx7ETMh8/VDddGRewxXQhjCgdgAnaiY3BfnWrUSmZA=="
></script>

Reference: Cryptographic hash functions.