v150 · CSS · Referrer Policy Demo

Referrer Policy Demo

The referrer-policy() modifier inside url() controls what referrer information is included in the HTTP request for a CSS-referenced resource. This lab applies the modifier to a real background-image declaration and compares the expected policy result with the local echo route.

Checking CSS URL request modifier support...

capability probe

Probe has not run yet.

CSS background request lab

The CSS background request will be applied here.
No request yet.

policy values

Policy value Cross-origin request sends Same-origin request sends Downgrade behavior
no-referrer nothing nothing No referrer on any request
no-referrer-when-downgrade full URL for HTTPS to HTTPS full URL Nothing on HTTPS to HTTP downgrade
strict-origin-when-cross-origin origin only full URL Nothing on downgrade
origin origin only origin only Origin is still sent on same-protocol cross-origin requests
same-origin nothing full URL Only same-origin CSS resources receive a referrer
strict-origin origin only origin only Nothing on downgrade
unsafe-url full URL always full URL always Leaks paths and query strings; avoid for private pages

why this matters for CSS resources

Privacy leak scenario

Imagine a page at https://myapp.example/user/profile?id=1234 that uses a CDN image as a background. Without a per-resource policy, the CDN may receive the embedding page URL in the Referer header.

With referrer-policy(strict-origin) on the CSS url(), the CDN sees only the origin on same-protocol cross-origin requests and no referrer on downgrades.

code

/* Default: uses document's referrer policy */
.hero {
  background-image: url("https://cdn.example/hero.png");
}

/* Override for this specific CSS resource */
.hero {
  background-image: url("https://cdn.example/hero.png"
    referrer-policy(no-referrer));
}

/* Combined with cross-origin for authenticated font resources */
@font-face {
  font-family: "PrivateFont";
  src: url("https://fonts.corp.example/font.woff2"
    cross-origin(use-credentials)
    referrer-policy(same-origin));
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗