Bringen Sie Ihnen bei, wie Sie CSS verwenden, um Benutzer zu verfolgen

Was können wir damit machen?

Wir können einige grundlegende Informationen über den Benutzer sammeln, wie z. B. die Bildschirmauflösung (wenn der Browser maximiert ist) und welchen Browser (Engine) der Benutzer verwendet

Darüber hinaus können wir überwachen, ob der Benutzer auf einen Link klickt oder mit der Maus über ein Element fährt, um den Link zu verfolgen, über den der Benutzer schwebt, und sogar, wie der Benutzer die Maus bewegt (unter Verwendung unsichtbarer Felder auf der Seite), jedoch mit my Mit der aktuellen Methode kann ich nur den ersten Klick oder Hover des Benutzers verfolgen. Ich glaube, dass ich durch Ändern meiner Methode letztendlich jeden Klick des Benutzers verfolgen kann.

Schließlich können wir den Benutzer auch überwachen, ob eine spezielle Schriftart installiert ist Anhand dieser Informationen können wir das vom Benutzer verwendete Betriebssystem nachverfolgen, da sich auch die von verschiedenen Betriebssystemen verwendeten Schriftarten geringfügig unterscheiden, z. B. Calibri in Windows

Wie wird dies implementiert? 🎜>Gemeinsamer Ansatz

Mit CSS können Sie Bilder mithilfe des url("foo.bar")-Attributs hinzufügen, um auf eine externe Ressource zu verweisen. Interessanterweise wird diese Ressource nur bei Bedarf geladen (z. B. wenn auf den Link geklickt wird). )

So können wir CSS verwenden, um einen Selektor zu erstellen, der eine bestimmte UPL aufruft, wenn der Benutzer auf einen Link klickt

#link2:active::after {
  content: url('track.php?action=link2_clicked');
}

Auf der Serverseite speichert das PHP-Skript beim Aufrufen der URL einen Zeitstempel

Browserüberwachung

Die Browserüberwachung basiert auf @supports Media-Query. Wir können einige spezielle Eigenschaften des Browsers überwachen, wie zum Beispiel -webkit-appearance

@supports (-webkit-appearance: none) {
  #chrome_detect::after {
    content: url('track.php?action=browser_chrome');
  }
}

Font Monitoring

Zur Schriftartenüberwachung muss eine neue Schriftart definiert werden, der Text versucht, diese Schriftart für die Gestaltung zu verwenden. Wenn der Benutzer sie jedoch nicht auf dem System finden kann, wird die Schriftart nicht angezeigt. Die definierte Schriftart wird als Backup verwendet. In diesem Fall versucht der Browser, die definierte Schriftart zu laden und das Tracking-Skript auf dem Server aufzurufen.

/** Font detection **/
@font-face {
  font-family: Font1;
  src: url('track.php?action=font1');
}
 
#font_detection1 {
  font-family: Calibri, Font1;
}

Hover-Überwachung

Für die Hover-Überwachung ( Basierend auf Jeyroiks Idee müssen wir jedes Mal, wenn wir diesen Keyframe verwenden, eine URL anfordern

@keyframes pulsate {
  0% {
    background-image: url('track.php?duration=00');
  }
  20% {
    background-image: url('track.php?duration=20');
  }
  40% {
    background-image: url('track.php?duration=40');
  }
  60% {
    background-image: url('track.php?duration=60');
  }
  80% {
    background-image: url('track.php?duration=80');
  }
  100% {
    background-image: url('track.php?duration=100');
  }
}

Dann können wir den definierten Keyframe verwenden, um eine Animation zu erstellen die Animation, die auch die maximale Zeit ist, die wir messen

#duration:hover::after {
  -moz-animation: pulsate 5s infinite;
  -webkit-animation: pulsate 5s infinite;
  /*animation: pulsate 5s infinite;*/
  animation-name: pulsate;
  animation-duration: 10s;
  content: url('track.php?duration=-1');
}

Wir können die Auflösungsüberwachung optimieren, indem wir die Keyframe-Einstellungen ergänzen

Eingabeüberwachung

Überwachung Wenn der Benutzer eine Prüfung auswählt Im Feld können wir den von CSS bereitgestellten :selected-Selektor

#checkbox:checked {
  content: url('track.php?action=checkbox');
}

verwenden. Um die Zeichenfolge zu überwachen, haben wir das HTML-Musterattribut kombiniert, das uns bei der Lösung einiger grundlegender Eingabevalidierungen helfen kann, und dann mit :valid kombiniert Selektor, der Browser fordert unsere Tracking-Site an, wenn die Eingabe erfolgreich übereinstimmt

<input type="text" id="text_input" pattern="^test$" required=""/>
#text_input:valid {
  background: green;
  background-image: url(&#39;track.php?action=text_input&#39;);
}

Wenn nach dem Attribut kein Inhalt vorhanden ist oder eine PHP-Warnung angezeigt wird, bedeutet dies, dass der Wert dieses Attributs falsch ist oder der Benutzer dies nicht getan hat habe die Seite oder den Link besucht (das ist wirklich ärgerlich, aber Sie können die Prinzipien dieser Methoden kennen)

Darüber hinaus ist die Auflösungsüberwachung nicht besonders genau, da sie derzeit nur die am häufigsten verwendeten Bildschirmbreiten erkennen kann. . Abschließend möchte ich sagen, dass die Überwachung der tatsächlichen Bildschirmbreite des Benutzers nicht so einfach ist wie gedacht, da die von CSS überwachte Höhe der Höhe des Browserfensters entspricht und das Browserfenster normalerweise aufgrund des Systemfensters/der Taskleiste kleiner ist als Überwachen

Gibt es eine Möglichkeit, das Tracking mit der oben genannten Methode zu verhindern

Derzeit ist die einzige mir bekannte Möglichkeit, CSS vollständig zu deaktivieren (Sie können dazu ein Plugin wie uMatrix verwenden), aber Es hat seinen Preis. Ohne CSS wären Webseiten nicht mehr so ​​ansprechend wie zuvor und könnten sogar unbrauchbar werden. Daher ist das Deaktivieren von CSS keine wirkliche Option, es sei denn, Sie sind wirklich besorgt über Ihre Privatsphäre (wenn Sie beispielsweise den Tor-Browser verwenden, sollten Sie vielleicht CSS deaktivieren)

Eine bessere Lösung besteht darin, dass der Browser beim Laden der Webseite nicht die erforderlichen externen Ressourcen lädt, also Da es unmöglich ist, das persönliche Verhalten des Benutzers zu überwachen, kann diese Änderung des Ladens von Inhalten über den Browser oder über ein Plug-in (ähnlich NoScript oder uMatrix) erreicht werden.

Die obige Methode weist auch ein offensichtliches Problem auf Das heißt, es wird einen gewissen Einfluss auf die Leistung haben, da der Browser beim Initialisieren der Seite eine große Menge an Inhalten lädt (einige Inhalte werden von der Seite überhaupt nicht benötigt)

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie CSS verwenden, um Benutzer zu verfolgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!