Framing Protections

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. 1
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. 2
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. 3
A Proof of Concept to this attack can be found in a Chromium report 4 and it works by having multiple links to increase the time difference.

...

Frame Counting

October 1, 2020

Window references allow cross-origin pages to get access to some of the attributes of other pages. These references become available when using or allowing iframe and window.open. The references provide (limited) information about the window as they still respect the same-origin policy.

One of the accessible attributes is window.length which provides the number of frames in the window. This attribute can provide valuable information about a page to an attacker.

...

Navigations

October 1, 2020

Detecting if a cross-site page triggered a navigation (or didn’t) can be useful to an attacker. For example, a website may trigger a navigation in a certain endpoint depending on the status of the user.

To detect if any kind of navigation occurred, an attacker can:

  • Use an iframe and count the number of times the onload event is triggered.
  • Check the value of history.length, which is accessible through any window reference. This provides the number of entries in the history of a victim that were either changed by history.pushState or by regular navigations. To get the value of history.length, an attacker changes the location of the window reference to the target website, then changes back to same-origin, and finally reads the value. Run demo

Download Trigger #

When an endpoint sets the Content-Disposition: attachment header, it instructs the browser to download the response as an attachment instead of navigating to it. Detecting if this behavior occurred might allow attackers to leak private information if the outcome depends on the state of the victim’s account.

...

Network Timing

October 1, 2020

Network Timing side-channels have been present on the web since its inception 1 2. These attacks have had different levels of impact over time, gaining new attention when browsers started shipping high-precision timers like performance.now().

To obtain timing measurements, attackers must use a clock, either an implicit or an explicit one. These clocks are usually interchangeable for the purposes of XS-Leaks and only vary in accuracy and availability. For simplicity, this article assumes the use of the performance.now() API, an explicit clock present in all modern browsers.

...

Execution Timing

October 1, 2020

Measuring the time of JavaScript execution in a browser can give attackers information on when certain events are triggered, and how long some operations take.

Timing the Event Loop #

JavaScript’s concurrency model is based on a single-threaded event loop which means it can only run one task at a time. If, for example, some time-consuming task blocks the event loop, the user can perceive a freeze on a page as a result of the UI thread being starved. Other tasks must wait until the blocking task finishes. Each browser implements different process models, which means some web sites might run in different threads (and event loops) depending on their relations.

...

ID Attribute

October 1, 2020

The id attribute is widely used to identify HTML elements. Unfortunately, cross-origin websites can determine whether a given id is set anywhere on a page by leveraging the focus event and URL fragments. If https://example.com/foo#bar is loaded, the browser attempts to scroll to the element with id="bar". This can be detected cross-origin by loading https://example.com/foo#bar in an iframe; if there is an element with id="bar", the focus event fires. The blur event can also be used for the same purpose 1.

...