HTML integrity Attribute

Introduction

The integrity attribute enables Subresource Integrity (SRI)—a security feature that lets the browser verify an external resource (such as a JavaScript file or stylesheet) has not been tampered with. You provide a cryptographic hash of the expected file content; if the downloaded bytes do not match, the browser blocks the resource instead of running or applying it.

What You’ll Learn

Purpose of integrity Attribute

The primary purpose of the integrity attribute is to verify that external resources fetched by the browser match the content you expect. This protects users if a CDN is compromised, a man-in-the-middle attack alters a file, or a cached copy differs from the version you audited.

Without SRI, the browser blindly trusts whatever file the URL returns. With integrity, a hash mismatch causes the browser to reject the script or stylesheet—preventing injected or modified code from executing on your page.

📝 Syntax

Add integrity to a <script> or <link> element that loads an external file:

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"></script>

Syntax Rules

• Value format: algorithm-base64Hash (e.g. sha384-..., sha256-...).
• Supported on <script src="..."> and <link href="..." rel="stylesheet"> (and some preload links).
• Multiple hashes can be space-separated; the browser uses the first algorithm it supports.
• The hash must match the exact bytes of the fetched file—whitespace or version changes break SRI.
• Use crossorigin="anonymous" for cross-origin resources so the browser can hash the response body.
• Regenerate and update the hash whenever you change the external file or CDN version.

💎 Values

The integrity attribute accepts a cryptographic hash representing the expected content of the referenced resource:

• sha256-... — SHA-256 hash, base64-encoded (common choice).
• sha384-... — SHA-384 hash, base64-encoded (recommended balance of strength and size).
• sha512-... — SHA-512 hash, base64-encoded (strongest, longer value).
• Multiple values — integrity="sha384-abc... sha256-def..." provides algorithm fallbacks.

Generate a hash from the file bytes, then prefix with the algorithm name and a hyphen. Example using OpenSSL for a local file:

openssl dgst -sha384 -binary lib.js | openssl base64 -A

Prepend sha384- to the output and use it as the integrity attribute value.

Applicable Elements

integrity + crossorigin Together

Examples Gallery

Secure external scripts, stylesheets, and setting integrity with JavaScript before fetch.

<script
  src="https://cdn.example.com/example.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"></script>

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

<script id="exampleScript" src="example.js" crossorigin="anonymous"></script>

<script>
  const hashValue = generateHash(exampleScriptContent);
  document.getElementById("exampleScript")
    .setAttribute("integrity", "sha256-" + hashValue);
</script>

♿ Accessibility

• Blocked scripts can break functionality — If SRI rejects a critical script, interactive features may fail. Monitor the console and provide fallbacks for essential UI.
• Do not block required styles silently — A failed stylesheet can harm layout and readability. Test after every hash update.
• Security benefits all users — SRI helps protect everyone, including assistive technology users, from injected malicious content.
• Document CDN dependencies — Keep a list of external assets with hashes so updates remain accessible to the whole team.

💡 Best Practices