Que sont les Client Rects ?

Les Client Rects sont un ensemble d’API fournies par le navigateur permettant d’obtenir les informations de mise en page des éléments d’une page web, notamment leur position exacte sur la page et leurs dimensions. Ces informations sont renvoyées sous forme de “rectangles” (rects) et comprennent des données détaillées telles que le haut, le bas, la gauche, la droite, la largeur et la hauteur de l’élément.



Comment les Client Rects deviennent-ils une empreinte numérique ?

La raison principale pour laquelle les Client Rects peuvent devenir une technique de suivi par empreinte de navigateur est la suivante : même si deux appareils ouvrent exactement la même page web, les informations de mise en page des éléments finalement rendus peuvent varier en raison de différences liées à la configuration matérielle, au système d’exploitation, au type et à la version du navigateur, à la résolution de l’écran, aux paramètres de police, etc.



Par exemple : un même texte ou un même bouton peut apparaître légèrement plus grand sur un appareil, tandis que sa position peut être légèrement décalée sur un autre. Ces différences subtiles sont difficiles à percevoir à l’œil nu, mais elles peuvent être capturées avec précision grâce aux API Client Rects.



Processus de génération d’une empreinte Client Rects

Lorsqu’un site web obtient une empreinte de navigateur via les Client Rects, cela comprend généralement les étapes suivantes :



Première étape : sélectionner ou générer l’élément cible



Le site web doit d’abord choisir un élément destiné à la collecte des informations de mise en page. Il peut s’agir d’un champ de texte, d’un bouton ou de tout autre élément déjà présent sur la page. Afin d’améliorer la stabilité et l’unicité de l’empreinte, le site peut également générer dynamiquement un élément caché spécialement dédié à la collecte de l’empreinte.



Deuxième étape : obtenir les Client Rects de l’élément



En appelant la méthode getClientRects() de l’élément via JavaScript, le site obtient les informations de mise en page de cet élément. Les données renvoyées contiennent les informations de position et de dimensions de l’élément : haut (top), bas (bottom), gauche (left), droite (right), largeur (width) et hauteur (height), entre autres.



Troisième étape : enregistrer ou traiter les données



Le site web enregistre ces données brutes ou les traite davantage. Par exemple, il peut calculer la surface de l’élément (largeur × hauteur), déterminer la position relative de l’élément par rapport à d’autres éléments, etc.



Quatrième étape : générer l’empreinte du navigateur



Enfin, le site web combine ces informations de mise en page avec d’autres données (telles que l’adresse IP, la chaîne User-Agent, etc.) et génère, au moyen d’un algorithme spécifique, une empreinte de navigateur unique destinée à identifier et suivre l’utilisateur.



Il convient de noter qu’il ne s’agit ici que d’un exemple simplifié. En pratique, les sites web peuvent collecter les données Client Rects de plusieurs éléments et effectuer des analyses statistiques plus complexes afin d’améliorer l’unicité et la stabilité de l’empreinte.



On peut considérer les Client Rects comme une sorte de “règle” utilisée par les sites web : elle mesure avec précision la manière dont votre navigateur rend et dispose les éléments de la page, et ces mesures présentent, d’un appareil à l’autre, des différences infimes mais identifiables.