Skip to content

Prevent CSS-based scriptless interaction tracking

I was trying to test https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/42828, I didn't find an example showing the hypothetical. But I found a much simpler way to track some user positions/interactions on a page without javascript.

Tested with tor browser 13.5.1:

  1. Load tor browser with the highest security level.
  2. Open the network monitor for the page (Ctrl+Shift+E).
  3. Load the local file below (maybe someone should confirm this works on https as well).
  4. Initially no image is loaded.
  5. Scroll to the blue area and place your pointer on it.
  6. Image is now loaded.

Basically, we use a CSS content rule to point to a remote url, which only activates with :hover. It similarly works with

  • :focus, :focus-within and :focus-visible.
  • :target.
  • Place the element with content: url() in <details>. Only loads when the <summary> is clicked.
  • With ESR 128, add the popover attribute to the element with content: url(), and add <button popovertarget>. Only loads when the button is clicked.

There are probably others. I couldn't get an example to work with :visited or :link, so they may be protected.

Basically, it seems the remote resource will only be fetched when the content property applies and the element is displayed (hence why the <details> example works). So any rule that can change the display or content in reaction to some user interaction can track that interaction. The main limitation is that this only fires once.

<html dir="ltr" xml:lang="en" >
  <head>
    <title>Demo Remote Image</title>
    <meta charset="UTF-8" />
    <style>
      body {
        height: 1000px;
        background-color: pink;
      }
      img {
        margin-block-start: 500px;
        height: 200px;
        width: 100%;
        background-color: lightblue;
      }

      img:hover {
        content: url("https://www.torproject.org/static/images/tor-logo@2x.png");
      }
    </style>
  </head>
  <body>
    <img alt="tor logo" />
  </body>
</html>

/cc @ma1 @morgan

Edited by henry