v149 · CSS · demo
Request Security Reference
Each row shows the HTML attribute that controls a fetch parameter alongside its new CSS url() modifier equivalent — the mechanisms are parallel and now available in both contexts.
Side-by-side comparison
HTML — via element attributes
crossorigin
Sets CORS mode for cross-origin fetches. Values:
anonymous (no credentials) or use-credentials.<img
crossorigin="anonymous"
src="https://cdn.example/photo.jpg">
<link rel="stylesheet"
crossorigin="anonymous"
href="https://cdn.example/style.css">
integrity
integrity
Subresource Integrity (SRI) — browser verifies the hash before using the resource.
<script
integrity="sha256-abc123..."
src="https://cdn.example/app.js"></script>
<link rel="preload" as="font"
integrity="sha256-abc123..."
href="https://cdn.example/font.woff2">
referrerpolicy
referrerpolicy
Controls how much referrer information is sent with the request.
<img
referrerpolicy="no-referrer"
src="https://cdn.example/photo.jpg">
CSS url() — Chrome 149 modifiers
cross-origin()
Same CORS control, inline in the CSS
url() call..hero {
background-image: url(
"https://cdn.example/photo.jpg"
cross-origin(anonymous)
);
}
@font-face {
src: url(
"https://cdn.example/font.woff2"
cross-origin(anonymous)
) format("woff2");
}
integrity()
integrity()
SRI for CSS-loaded resources — fonts, images, imported stylesheets.
@font-face {
src: url(
"https://cdn.example/font.woff2"
integrity("sha256-abc123...")
) format("woff2");
}
.hero {
background-image: url(
"https://cdn.example/photo.jpg"
integrity("sha256-abc123...")
);
}
referrer-policy()
referrer-policy()
Per-resource referrer control for CSS-loaded assets.
.hero {
background-image: url(
"https://cdn.example/photo.jpg"
referrer-policy(no-referrer)
);
}
Modifier summary
| CSS modifier | HTML equivalent | Controls |
|---|---|---|
cross-origin(anonymous) |
crossorigin="anonymous" |
CORS mode — no credentials sent |
cross-origin(use-credentials) |
crossorigin="use-credentials" |
CORS mode — cookies / auth included |
integrity("sha256-…") |
integrity="sha256-…" |
Subresource Integrity hash check |
referrer-policy(no-referrer) |
referrerpolicy="no-referrer" |
Suppresses Referer header entirely |
referrer-policy(origin) |
referrerpolicy="origin" |
Sends only origin, not full URL |
see also
- HTML / CSS Loading Parity — interactive code builder
- Back to feature index
- ChromeStatus entry
scenario focus
Select a scenario to focus its rendered example and summary.