v150 · css · security · fetch
CSS URL request modifiers
Chrome 150 extends the CSS url() function with optional request modifier keywords — cross-origin(), integrity(), and referrer-policy() — allowing authors to control CORS mode, subresource integrity, and referrer policy for CSS-fetched resources directly in the stylesheet, without HTML markup or JavaScript.
at a glance
| Shipped in | Chrome 150 (Enabled by default) |
|---|---|
| Status | Enabled by default |
| Standards position (Firefox) | No signal |
| Standards position (Safari) | Shipped/Shipping |
| ChromeStatus | 5111997147512832 — CSS URL request modifiers |
why it exists
CSS properties like background-image, @import, @font-face src, and mask-image all trigger resource fetches, but until now they offered no way to specify fetch options such as CORS mode, integrity hash, or referrer policy — information that HTML attributes like crossorigin, integrity, and referrerpolicy provide on <link>, <img>, and <script>.
CSS URL request modifiers fill this gap. They appear after the quoted URL string inside url(), separated by whitespace. This lets authors apply subresource integrity to CSS-loaded fonts or images, control CORS behavior for cross-origin resources, and set per-resource referrer policies, all without touching HTML or adding script.
shape of the API
Modifier functions are appended after the URL string inside url():
| Modifier | Values | Effect |
|---|---|---|
cross-origin() | anonymous, use-credentials | Sets CORS mode for the request; equivalent to the HTML crossorigin attribute |
integrity() | SRI hash string, e.g. sha384-abc123… | Enforces Subresource Integrity; fetch fails if the hash doesn't match |
referrer-policy() | Any valid Referrer-Policy value | Overrides the document's referrer policy for this specific resource request |
example
/* Fetch a cross-origin background image with CORS anonymous mode */
.hero {
background-image: url("https://cdn.example.com/hero.jpg" cross-origin(anonymous));
}
/* Load a font with subresource integrity */
@font-face {
font-family: 'MyFont';
src: url("https://fonts.example.com/myfont.woff2"
integrity("sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"))
format("woff2");
}
/* Import a stylesheet with a strict referrer policy */
@import url("https://cdn.example.com/theme.css" referrer-policy(no-referrer));
/* Combine modifiers */
.avatar {
background-image: url("https://api.example.com/avatar.png"
cross-origin(use-credentials)
referrer-policy(strict-origin-when-cross-origin));
}browser support
| Browser | Support | Notes |
|---|---|---|
| Chrome 150+ | Enabled by default | All platforms |
| Firefox | No signal | — |
| Safari | Shipped/Shipping | — |