CSS URL request modifiers

concepts

1. Cross-Origin & Integrity Demo

   Use cross-origin() to control CORS mode and integrity() to specify a Subresource Integrity hash for a CSS-referenced resource. The demo fetches real server resources, verifies the exposed SHA-384 hashes, and shows rejection paths for missing CORS headers or tampered bytes.

2. Referrer Policy Demo

   Control what referrer information is sent with CSS resource requests using referrer-policy() inside url(). Demonstrates each policy value and its effect on the Referer header.

3. Modifier Builder

   An interactive tool: enter a URL, toggle cross-origin(), integrity(), and referrer-policy() on and off, and instantly see the generated CSS. Switch between background-image, @font-face src, and @import contexts to see how each modifier applies across different CSS resource references.

4. Integrity Chain Demo

   Build a chain of CSS-loaded resources (font → background image → mask) each with an integrity() modifier. A hash verification table shows pass/fail for each resource, a tamper button flips the content to trigger a hash mismatch, and a "cascade failure" mode shows how an integrity failure in one resource affects dependent layers.

5. CORS Header Playground

   Interactive table showing exactly which HTTP headers are added or suppressed by each URL request modifier — cross-origin(), referrer-policy(), and integrity(). Toggle combinations to see how Origin, Cookie, Referer, Sec-Fetch-Mode, and Integrity headers interact, with live generated CSS output.

6. @font-face Modifiers

   Web fonts are high-value supply-chain targets. Chrome 150 lets @font-face src carry integrity(), cross-origin(), and referrer-policy() modifiers. Step through the browser's SRI verification process, compare safe vs. tampered font bytes, and see how a hash mismatch silently falls back to the next source in the font stack.

why it shipped

CSS background-image, @font-face src, cursor, and other properties that reference external resources have always been limited to a plain URL. Fetch-related metadata — CORS mode, SRI integrity, referrer policy — could only be set via JavaScript or HTML attributes. Chrome 150 brings these controls to CSS so that resource security and privacy policies can be set where the resource reference lives, without requiring HTML wrapper elements or JavaScript.

the API

/* cross-origin(): set CORS mode for the request */
.element {
  background-image: url("https://cdn.example/image.png" cross-origin(use-credentials));
  /* values: anonymous | use-credentials */
}

/* integrity(): Subresource Integrity hash */
@font-face {
  font-family: 'MyFont';
  src: url("https://cdn.example/font.woff2" integrity("sha256-ABC123..."));
}

/* referrer-policy(): control Referer header */
.element {
  background-image: url("https://cdn.example/img.png" referrer-policy(no-referrer));
  /* values: no-referrer | no-referrer-when-downgrade | origin |
             origin-when-cross-origin | same-origin | strict-origin |
             strict-origin-when-cross-origin | unsafe-url */
}

/* Multiple modifiers can be combined */
.element {
  background-image: url("https://cdn.example/img.png"
    cross-origin(anonymous)
    integrity("sha384-...")
    referrer-policy(strict-origin));
}

references

• ChromeStatus entry
• MDN — url() function
• MDN — Subresource Integrity
• CSS Values Level 5 - request URL modifiers