CSS-basierte Fingerprinting

Fingerabdrücke sind schlecht. Es ist ein Begriff, der sich darauf bezieht, genügend Metadaten über einen Benutzer zu sammeln, um ihn im Wesentlichen identifizieren zu können. JavaScript hat Zugriff auf alle möglichen Fingerabdruck-Möglichkeiten, was dann in Kombination mit der IP-Adresse, auf die der Server zugreifen kann, bedeutet, dass Fingerabdrücke allzu häufig vorkommen.

Man denkt normalerweise nicht an CSS als Vektor für Fingerabdrücke und somit als "sicher" in dieser Hinsicht. Aber Oliver Brotchie hat eine Idee dokumentiert , die ein gewisses Maß an Fingerabdrücken nur mit CSS ermöglicht.

Denken Sie an all die @media Abfragen, die wir haben. Wir können den Zeigertyp mit any-pointer testen. Stellen Sie sich vor, wir fordern für jeden Wert ein völlig einzigartiges background-image von einem Server an. Wenn dieses Bild angefordert wurde, wissen wir, dass diese @media Abfragen wahr waren. Wir können damit beginnen, Fingerabdrücke zu erstellen, etwas wie dieses

.pointer {
  background-image: url('/unique-id/pointer=none')
}

@media (any-pointer: coarse) {
  .pointer {
    background-image: url('/unique-id/pointer=coarse')
  }
}

@media (any-pointer: fine) {
  .pointer {
    background-image: url('/unique-id/pointer=fine')
  }
}

Kombinieren Sie das mit der Tatsache, dass wir eine Präferenz für den Dunkelmodus mit prefers-color-scheme testen können, wird der Fingerabdruck etwas klarer. Tatsächlich ist es der aktuelle Entwurf für CSS-Benutzerpräferenz-Medienabfragen, der Oliver am meisten beunruhigt

Der kommende Entwurf wird diese Methode nicht nur skalierbar machen, sondern auch ihre Genauigkeit erhöhen. Derzeit ist es ohne alternative Mittel schwierig, jede Anfrage schlüssig mit einem bestimmten Besucher zu verknüpfen, da die einzige praktikable Möglichkeit, deren Herkunft zu bestimmen, darin besteht, die Anfragen nach der IP-Adresse der Verbindung zu gruppieren. Mit dem neuen Entwurf können wir jedoch durch Generieren eines zufälligen Strings und dessen Interpolation in das URL-Tag für jeden Besucher alle Anfragen dieses Besuchers genau identifizieren.

Davon gibt es noch viel mehr. Wir können Medienabfragen mit einem Abstand von 1px erstellen und für jede eine Hintergrundgrafik anfordern, um die Fenstergröße des Besuchers perfekt zu erraten. Es gibt wahrscheinlich ein Dutzend oder mehr exotische Medienabfragen, die selten verwendet werden, aber speziell für Fingerabdrücke mit CSS nützlich sind. Kombinieren Sie das mit @supports-Abfragen für alle möglichen Dinge, um im Wesentlichen den genauen Browser zu erraten. *Und kombinieren Sie das* mit der klassischen Technik des Testens auf die Installation bestimmter lokaler Schriftarten, und Sie haben eine halbwegs brauchbare Fingerabdruckmaschine.

@font-face {
  font-family: 'some-font';
  src: local(some font), url('/unique-id/some-font');
}

.some-font {
  font-family:'some-font';
}

Der generierte CSS-Code dafür ist riesig (hier ist der Sass zur Generierung), aber anscheinend wird er stark reduziert, sobald wir benutzerdefinierte Eigenschaften in URLs verwenden können.

Ich mache mir darüber keine großen Sorgen, vor allem, weil ich JavaScript nicht deaktiviere und JavaScript bereits viel mehr Fingerabdruckmöglichkeiten bietet. Außerdem gibt es bereits andere Arten von CSS-Sicherheitslücken, vom Lesen besuchter Links (was Browser behoben haben), Keylogging und benutzergenerierten Inline-Stilen, neben anderen, die von Leuten in einem anderen Artikel zum Thema hervorgehoben wurden.

Aber Olivers Forschung zum Thema Fingerabdrücke ist wirklich gut und es wert, von jedem, der mehr über Web-Sicherheit weiß als ich, angeschaut zu werden.