Apprenez à utiliser CSS pour suivre les utilisateurs

Que pouvons-nous en faire

Nous pouvons collecter des informations de base sur l'utilisateur telles que la résolution de l'écran (lorsque le navigateur est maximisé) et le navigateur (moteur) que l'utilisateur utilise

De plus, nous pouvons surveiller si l'utilisateur clique sur un lien ou passe la souris sur un élément, pour suivre le lien survolé par l'utilisateur, et même comment l'utilisateur déplace la souris (en utilisant des champs invisibles sur la page), cependant, avec mon méthode actuelle, je ne peux suivre que le premier clic ou survol de l'utilisateur. Je pense que modifier ma méthode me permettra à terme de suivre chaque clic de l'utilisateur

Enfin, nous pouvons également surveiller l'utilisateur si une police spéciale est installée. . Sur la base de ces informations, nous pouvons suivre le système d'exploitation utilisé par l'utilisateur, car les polices utilisées par les différents systèmes d'exploitation sont également légèrement différentes, comme Calibri de Windows

Comment cela est-il implémenté

Approche commune

Avec CSS, vous pouvez ajouter des images en utilisant l'attribut url("foo.bar") pour référencer une ressource externe. Fait intéressant, cette ressource n'est chargée qu'en cas de besoin (par exemple, lorsque vous cliquez sur le lien). )

Ainsi, nous pouvons utiliser CSS pour créer un sélecteur qui appelle un UPL spécifique lorsque l'utilisateur clique sur un lien

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

Côté serveur, php Le script enregistrera l'horodatage lors de l'appel du URL

Surveillance du navigateur

La surveillance du navigateur est basée sur @supports Media-Query, nous pouvons surveiller certains attributs spéciaux du navigateur, tels que -webkit -apparence

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

Surveillance des polices

Pour la surveillance des polices, une nouvelle police doit être définie. Si une police existe, le texte essaiera d'utiliser cette police pour le style. Cependant, lorsque l'utilisateur ne trouvera pas la police sur le. système, la police définie sera utilisée comme sauvegarde. Dans ce cas, le navigateur tentera de charger la police définie et appellera le script de suivi sur le serveur

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

Surveillance du survol

Pour la surveillance du survol (basé sur l'idée de Jeyroik), nous devons définir une image clé. Chaque fois que nous utilisons cette image clé, nous devons demander une URL

@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');
  }
}

Ensuite, nous utilisons la définition Pour créer des animations avec des images clés. , nous pouvons définir la durée de l'animation, qui est aussi la durée maximale que nous mesurons

#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');
}

Nous pouvons optimiser le suivi de la résolution en complétant les paramètres des images clés

Surveillance des entrées

Pour détecter quand l'utilisateur coche une case, nous pouvons utiliser le sélecteur :selected fourni par CSS

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

Afin de surveiller les chaînes, nous combinons l'attribut HTML pattern, cela peut nous aider à résoudre certains problèmes de base validation de l'entrée. Combiné avec le sélecteur :valid, le navigateur demandera notre site de suivi lorsque l'entrée correspond avec succès

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

S'il n'y a pas de contenu ou de php derrière l'attribut Un avertissement apparaît, ce qui signifie que la valeur de cet attribut est faux ou l'utilisateur n'a pas visité la page ou le lien (c'est vraiment gênant, mais on peut comprendre le principe de ces méthodes)

De plus, le suivi de la résolution n'est pas particulièrement précis car actuellement seul le les largeurs d'écran les plus couramment utilisées peuvent être surveillées. Enfin, je tiens à dire que surveiller la largeur réelle de l'écran de l'utilisateur n'est pas aussi simple qu'on l'imagine, car la hauteur surveillée par CSS est la hauteur de la fenêtre du navigateur, et généralement en raison du panneau/barre des tâches du système, la fenêtre du navigateur est plus petite que Monitor

Existe-t-il un moyen d'empêcher le suivi en utilisant la méthode ci-dessus

Actuellement, le seul moyen que je connaisse est de désactiver complètement CSS (vous pouvez utiliser un plugin comme uMatrix pour ce faire), mais cela a un coût C'est également très énorme. Sans CSS, la page Web ne sera pas aussi agréable à l'œil qu'avant et peut même devenir inutilisable. Par conséquent, la désactivation de CSS n'est pas vraiment une option, sauf si vous vous inquiétez vraiment pour votre vie privée. (par exemple, lorsque vous utilisez le navigateur Tor, vous devriez peut-être désactiver CSS)

Une meilleure solution est que lorsque la page Web est chargée, le navigateur ne chargera pas les ressources externes requises, ce qui rend impossible pour surveiller le comportement personnel de l'utilisateur, cette modification du chargement du contenu peut être réalisée via le navigateur, ou via un plug-in (similaire à NoScript ou uMatrix)

La méthode ci-dessus a également un problème évident, c'est-à-dire cela aura un certain impact sur les performances Impact, car le navigateur chargera une grande quantité de contenu lors de l'initialisation de la page (certains contenus ne sont pas du tout nécessaires à la page)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!