HTML integrity Attribute

HTML integrity Attribute

The HTML integrity attribute provides cryptographic hash information that allows a browser to verify that an external resource has not been unexpectedly modified before using it.

Elements That Use the integrity Attribute

The integrity attribute can be used with the <script> and <link> elements when loading supported external resources.

How integrity Works

Subresource Integrity allows a webpage to specify the expected cryptographic hash of an external resource. After downloading the resource, the browser calculates its hash and compares it with the value provided by the integrity attribute.

If the calculated hash matches an accepted hash in the attribute, the browser can use the resource. If it does not match, the browser refuses to use the resource.

This helps protect a webpage if a hosted resource is changed without the website owner's knowledge.

integrity Values

An integrity value contains a hash algorithm followed by a hyphen and a Base64-encoded cryptographic hash.

sha384-HASH_VALUE

The supported hash algorithms are:

An integrity attribute can contain more than one hash value separated by whitespace.

Using integrity with <script>

The integrity attribute can verify an external script before the browser executes it.

<script src="https://cdn.example.com/library.js"
  integrity="sha384-HASH_VALUE"
  crossorigin="anonymous"></script>

The hash value must correspond exactly to the contents of the referenced script. If the script changes, its hash changes and the integrity value must also be updated.

Using integrity with <link>

The integrity attribute can also verify resources loaded by a <link> element when used with supported relationships such as stylesheet, preload, and modulepreload.

<link rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  integrity="sha384-HASH_VALUE"
  crossorigin="anonymous">

If the downloaded resource does not match the expected hash, the browser refuses to use it.

Cross-Origin Resources

Subresource Integrity checks for resources loaded from another origin also depend on Cross-Origin Resource Sharing (CORS). The server hosting the resource must permit the requesting origin.

When using Subresource Integrity with a cross-origin resource, the markup commonly includes crossorigin="anonymous".

<script src="https://cdn.example.com/library.js"
  integrity="sha384-HASH_VALUE"
  crossorigin="anonymous"></script>

Common Mistakes

Do not copy an integrity value from a different version of a resource. The hash must match the exact contents of the file being loaded.

Remember to update the integrity value whenever the external resource changes. Even a small change to the file produces a different cryptographic hash.

Do not use the integrity attribute on an inline classic <script>. On a <script> element, the attribute is used with an external resource specified by src.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The integrity attribute and Subresource Integrity are widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the integrity Attribute

The example shows the markup used to load an external stylesheet and script with Subresource Integrity. Placeholder hash values are used so the structure can be examined without depending on a third-party resource.

Summary

The HTML integrity attribute provides cryptographic hash information that browsers can use to verify supported external resources before using them. It is used with <script> and supported <link> resources and accepts SHA-256, SHA-384, and SHA-512 hash values. If the downloaded resource does not match an accepted hash, the browser refuses to use it.