Opened 4 years ago

Last modified 16 months ago

#18273 new defect

CSS animations provide high resolution timer

Reported by: cypherpunks Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Major Keywords: tbb-fingerprinting-time-highres
Cc: Actual Points:
Parent ID: #16110 Points:
Reviewer: Sponsor:

Description

TBB supports CSS animations out of the box (even without Javascript). These animations run smoothly and likely result in at least 60Hz resolution.

All kinds of properties can be animated and can be turned into Javascript events (e.g. using change events) to create timers.

CSS animation demo:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Child Tickets

Change History (4)

comment:1 Changed 4 years ago by cypherpunks

I have the suspicion that not even disabling javascript would completely prevent this... I'm thinking of the CSS hack that allows fingerprinting the screen size, I imagine something similar could probably be done to detect the transitions of this "timer", without any need of js.

comment:2 Changed 4 years ago by gk

Keywords: tbb-fingerprinting-time-highres added

I'd like to see some PoCs if anybody has such. Until then I remain skeptical. :)

comment:3 Changed 4 years ago by cypherpunks

Type some text into the input field.

<html><body>
<p id="test_id" style="visibility:hidden;">Test.</p>
<input type="text" id="myInput" oninput="logTime()">

<script>
function logTime() {
  var time_el = document.getElementById("test_id");
  var color = getComputedStyle(time_el).getPropertyValue("color");
  document.getElementById("time").innerHTML += color + "<br>";
 }
</script>

<p id="time"></p>

<style>
p#test_id {
  animation-duration: 1s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
@keyframes slidein {
  from { color: black; }
  to { color: white; }
}
</style>
</html></body>
Last edited 4 years ago by cypherpunks (previous) (diff)

comment:4 Changed 16 months ago by mcs

Mozilla added support for CSS transition events (transitionstart, transitionrun, and transitioncancel). These events may provide additional ways to create high resolution timers. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
https://bugzilla.mozilla.org/show_bug.cgi?id=1287983
https://bugzilla.mozilla.org/show_bug.cgi?id=1264125

Note: See TracTickets for help on using tickets.