v150 · CSS · Security · demo
Integrity Chain Demo
CSS URL request modifiers in Chrome 150 let you apply SRI integrity checks directly inside url() for fonts, images, and stylesheets — extending the integrity chain that was previously only available on HTML attributes.
Checking CSS URL modifier support…
Font loading chain — @font-face with integrity()
@font-face → url() → integrity() modifier
waiting
1
Define the font face with SRI
@font-face {
font-family: "Secure Font";
src: url(
"https://fonts.gstatic.com/s/roboto/v47/KFO.woff2"
integrity("sha384-XJ+lkFxoKlXFQuAlSBfBJjSz")
cross-origin(anonymous)
) format("woff2");
}
2
Expected hash (SHA-384)
computed live: the test fetches the WOFF2 bytes and builds a SHA-256 SRI value before loading
Browser computes hash of downloaded woff2 and compares
3
Load result
Click "Test Font Load" to attempt loading with integrity() modifier.
Secure font live preview: ABC 123, punctuation, and developer docs text.
Background image with cross-origin() + integrity()
background-image → url() → cross-origin() + integrity()
1
CSS rule with modifiers
.hero {
background-image: url(
"https://images.example.com/hero.jpg"
cross-origin(anonymous)
integrity("sha256-abc123def456")
);
}
2
Integrity chain benefits for images
Without integrity(), a CDN could silently swap an image for malicious content. With it, any tampered delivery is blocked by the browser — same protection as <img integrity>.
Hash Mismatch Simulator
Enter a hash below. The simulator shows what happens when the hash is correct vs deliberately wrong.
Correct hash → resource loads
If the served resource's hash matches, the browser allows the load. The font/image renders normally.
—
—
Wrong hash → resource blocked
Browser detects hash mismatch and blocks the resource. Console shows:
Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdn.example.com/font.woff2' with computed SHA-256 integrity '…'
Enter a hash and click "Run Mismatch Simulation".
Compute a real hash
Paste a URL below and click "Compute SHA-256" to see what integrity value you'd need for that resource.
Enter a URL and click compute.
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗