v150 · CSS · Cross-Origin & Integrity Demo
Cross-Origin & Integrity Demo
Apply cross-origin() and integrity() to a CSS background-image request backed by live Deno endpoints. The lab reads the actual response headers and server-computed SHA-384 hashes instead of simulating CORS or SRI decisions in the client.
Checking CSS URL request modifier support...
live CSS request lab
Native CSS background target
observed result
Run the lab to apply a CSS url() request modifier and inspect the actual server response.
server resources
| Endpoint | Purpose | Verified by the lab |
|---|---|---|
/resource.svg |
Returns the clean or tampered SVG bytes with selectable CORS response headers. | Response status, readable headers, exposed SHA-384 hash, and body hash when the selected request mode allows the bytes to be read. |
/asset-meta |
Returns the server-computed SRI hashes for both byte variants. | The CSS declaration uses these hashes; tampering compares the clean hash against the tampered bytes. |
what changes on the request
| Modifier | Request behavior | Failure mode |
|---|---|---|
cross-origin(anonymous) |
Sets the CSS resource request mode to CORS and keeps credentials to same-origin requests. | Blocked when the response lacks a matching Access-Control-Allow-Origin. |
cross-origin(use-credentials) |
Sets the request mode to CORS and credentials mode to include. | Blocked unless the response names the page origin and sends Access-Control-Allow-Credentials: true. |
integrity("sha384-...") |
Sets Fetch integrity metadata for the CSS resource request. | Blocked when the digest does not match the received bytes, even if the HTTP response is 200 OK. |
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗