HTML subresource integrity: bind a stylesheet to the bytes you reviewed

Choose the contract

The example pins a local stylesheet to the exact version included in this site's public assets. The digest is computed from its bytes, not typed as an illustrative placeholder. If the stylesheet changes, regenerate the digest in the same build step that changes the asset; otherwise the browser will reject the new file and the page may lose its intended presentation. Keep meaningful text and controls usable without that stylesheet. Integrity is especially useful when the HTML and resource come from different trust paths, but a same-origin example demonstrates the mechanism without relying on another service. It cannot protect against an attacker who can replace both the HTML and its digest.

<head>
  <title>Receipt R-47</title>
  <link rel="stylesheet" href="/fonts/fonts.css"
        integrity="sha384-i2a7Y5JGrQor3MmQLMvrlxNvE2nWYMPzOBdNt91SNYVT5gBO/yfPIe55SdtcsPG/">
</head>
<body>
  <main>
    <h1>Receipt R-47</h1>
    <p>Review the receipt without depending on a custom font.</p>
  </main>
</body>

Cost and verification

The hash check adds small verification work but no separate network request. It does not reduce CSS bytes, replace a content security policy, or guarantee that the asset itself is safe. For a cross-origin resource, the request must use CORS and the server must permit it; the local file shown here is same-origin. The content checker recomputes this sample's SHA-384 digest from the asset, so a future edit that leaves the lesson stale fails validation. Verify the final deployed bytes too, because a CDN transformation after hashing would cause a mismatch.

Common Mistakes

• Do not copy a digest from a different asset or release.
• Do not treat integrity as protection when the same attacker can rewrite the HTML.
• Do not silently remove the hash when a mismatch reveals a build or delivery error.

Connected lessons

• HTML resource hints: preload only a known critical asset
• HTML print stylesheet: declare a separate rendering context
• HTML script loading: choose ordered defer or independent async work