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.

security.sri is implemented based on Rspack's SubresourceIntegrityPlugin

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',
  },
};

After enabling security.sri, 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 Rspack and Rsbuild and will not apply to:

• The original tags in the HTML template.
• 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.