CSS Tricks

October 1, 2020

CSS Tricks #

CSS can be used to trick a user into exposing information such as embedded pixel values by making visual changes that are affected by the embed.

Retrieving user’s history #

Using the CSS :visited selector, it’s possible to apply a different style for URLs that have been visited.
Previously it was possible to use getComputedStyle() to detect this difference, but now browsers prevent this by always returning values as if the link was visited and limiting what styles can be applied using the selector. ¹
So, it may be needed to trick the user into clicking an area that the CSS has affected. This can be done using mix-blend-mode. ²
There are also ways to do it without user interaction such as by abusing render timings. This works because it takes time to paint links in a different color. ³
A Proof of Concept to this attack can be found in a Chromium report ⁴ and it works by having multiple links to increase the time difference.

CSS Injection

CSS Injection #

warning

This group of XS-Leaks requires a CSS injection on the target page.

Among the different CSS injection vectors, the most noticeable one is the abuse of CSS Selectors. They can be used as an expression to match and select certain HTML elements. For example, the selector input[value^="a"] is matched if the value of an input tag starts with the character “a”. So, to detect if a CSS Selector matches the expression, attackers can trigger a callback to one of their websites using certain properties like background, @import, etc. ^{1 2}. The matching process can easily be brute-forced, and extended to the full string.