Was sind Client Rects?

Client Rects sind eine Reihe von APIs, die vom Browser bereitgestellt werden, um Layoutinformationen von Webseitenelementen abzurufen, einschließlich der genauen Position und Größe eines Elements auf der Seite. Diese Informationen werden in Form von “Rechtecken” (Rects) zurückgegeben und enthalten detaillierte Daten wie Oberkante, Unterkante, linke Seite, rechte Seite, Breite und Höhe des Elements.



Wie werden Client Rects zu einem Fingerprint?

Der Hauptgrund, warum Client Rects als Technik zur Browser-Fingerprint-Nachverfolgung dienen können, liegt darin: Selbst wenn zwei Geräte exakt dieselbe Webseite öffnen, können sich die letztendlich gerenderten Layoutinformationen der Webseitenelemente aufgrund von Unterschieden bei Hardwarekonfiguration, Betriebssystem, Browsertyp und -version, Bildschirmauflösung, Schrifteinstellungen und weiteren Faktoren voneinander unterscheiden.



Ein Beispiel: Derselbe Textabschnitt oder derselbe Button kann auf einem Gerät etwas größer angezeigt werden, während er auf einem anderen Gerät leicht verschoben erscheint. Diese feinen Unterschiede sind mit bloßem Auge kaum wahrnehmbar, können jedoch über die Client-Rects-API präzise erfasst werden.



Ablauf zur Erstellung eines Client-Rects-Fingerprints

Wenn eine Website über Client Rects einen Browser-Fingerprint erfasst, umfasst dies in der Regel die folgenden Schritte:



Schritt 1: Ziel-Element auswählen oder erzeugen



Zunächst muss die Website ein Element auswählen, dessen Layoutinformationen erfasst werden sollen. Dabei kann es sich um ein Textfeld, einen Button oder ein beliebiges bereits vorhandenes Element auf der Seite handeln. Um die Stabilität und Einzigartigkeit des Fingerprints zu erhöhen, kann die Website auch dynamisch ein verborgenes Element erzeugen, das speziell für die Fingerprint-Erfassung vorgesehen ist.



Schritt 2: Client Rects des Elements abrufen



Über JavaScript wird die Methode getClientRects() des Elements aufgerufen, um dessen Layoutinformationen abzurufen. Die zurückgegebenen Daten enthalten Positions- und Größeninformationen des Elements——darunter Oberkante (top), Unterkante (bottom), linke Seite (left), rechte Seite (right), Breite (width) und Höhe (height).



Schritt 3: Daten aufzeichnen oder verarbeiten



Die Website zeichnet diese Rohdaten auf oder verarbeitet sie weiter. Beispielsweise kann sie die Fläche des Elements berechnen (Breite × Höhe) oder die relative Position des Elements zu anderen Elementen bestimmen.



Schritt 4: Browser-Fingerprint erstellen



Abschließend kombiniert die Website diese Layoutinformationen mit weiteren Daten (z. B. IP-Adresse, User-Agent-String usw.) und erstellt mithilfe eines bestimmten Algorithmus einen eindeutigen Browser-Fingerprint, um Nutzer zu identifizieren und nachzuverfolgen.



Zu beachten ist, dass dies nur ein vereinfachtes Beispiel ist. In der Praxis können Websites Client-Rects-Daten mehrerer Elemente erfassen und komplexere statistische Auswertungen und Analysen durchführen, um die Einzigartigkeit und Stabilität des Fingerprints zu erhöhen.



Man kann Client Rects als eine Art “Lineal” einer Website verstehen——sie messen präzise, wie dein Browser Seitenelemente rendert und anordnet, und diese Messergebnisse weisen zwischen verschiedenen Geräten kleine, aber erkennbare Unterschiede auf.