v149 · CSS · Security

CSS URL request modifiers

Chrome 150 lets CSS url() values carry inline fetch parameters — cross-origin(), integrity(), and referrer-policy() — bringing CSS resource loading to parity with HTML's crossorigin, integrity, and referrerpolicy attributes.

concepts

  1. Request Security Reference

    Side-by-side comparison of how to control cross-origin access, integrity, and referrer policy for resources loaded via HTML attributes versus the new CSS url() modifier syntax.

  2. HTML / CSS Loading Parity

    Interactive code builder that maps each HTML resource-loading attribute (crossorigin, integrity, referrerpolicy) to its CSS url() modifier equivalent — copy-pasteable snippets for both.

  3. Integrity Snippet Builder

    Fill in a resource URL, pick an algorithm, paste an SRI hash, and toggle the three CSS url() modifiers — integrity(), cross-origin(), referrer-policy(). Get copy-pasteable CSS, the equivalent HTML attributes, and a matching CSP header in one step.

  4. Live Playground

    Toggle each modifier (cross-origin(), integrity(), referrer-policy()) via checkboxes, choose a CSS context (background-image, @font-face src, mask-image…), and watch the generated CSS, the equivalent HTML attribute syntax, and the derived fetch() options update live. Copy any panel in one click.

  5. SRI Debugger

    Paste resource content, compute the correct SRI hash with any algorithm, then paste a declared integrity value to see whether they match. Four failure scenario buttons (content tampered, wrong algorithm prefix, truncated hash, correct hash) let you understand what the browser checks when it evaluates integrity() inside a CSS url().

  6. URL Modifier Builder

    Visual builder for CSS url() modifier syntax. Add cross-origin(), integrity(), and referrer-policy() modifiers via checkboxes, choose a CSS context, and get generated CSS and equivalent HTML attribute syntax updating live alongside a browser support matrix and CSP header snippet.

why it shipped

CSS has always been able to load external resources — fonts, images, stylesheets via @import, SVG via clip-path — but it had no way to attach security policy to those fetches. An <img> tag can declare crossorigin="anonymous" to opt into CORS, add an integrity hash for SRI verification, or narrow the referrer with referrerpolicy. Until Chrome 150, none of those controls were available inside CSS. Developers who wanted to apply SRI to a web font or enforce CORS on a background image had to use HTTP headers or workarounds. CSS URL request modifiers close that gap: each modifier is an optional keyword or function inside the url() call that is forwarded to the underlying fetch request.

references