¿Qué son los Client Rects?
Client Rects es un conjunto de API proporcionadas por el navegador para obtener información de diseño de los elementos de una página web, incluida la posición exacta y el tamaño de los elementos en la página. Esta información se devuelve en forma de “rectángulos” (rects) e incluye datos detallados como la parte superior, inferior, izquierda, derecha, el ancho y la altura del elemento.
¿Cómo se convierten los Client Rects en una huella digital?
La razón principal por la que Client Rects puede convertirse en una tecnología de seguimiento mediante huella digital del navegador es que, incluso si dos dispositivos abren exactamente la misma página web, debido a diferencias en la configuración de hardware, el sistema operativo, el tipo y la versión del navegador, la resolución de pantalla, la configuración de fuentes y otros factores, la información de diseño de los elementos finalmente renderizados en la página puede ser diferente.
Por ejemplo: el mismo fragmento de texto o el mismo botón puede mostrarse ligeramente más grande en un dispositivo, mientras que en otro puede aparecer con una posición ligeramente desplazada. Estas diferencias sutiles son difíciles de percibir a simple vista, pero pueden capturarse con precisión mediante la API Client Rects.
Proceso de generación de una huella digital mediante Client Rects
Cuando un sitio web obtiene una huella digital del navegador mediante Client Rects, normalmente sigue estos pasos:
Paso 1: Seleccionar o generar el elemento objetivo
Primero, el sitio web debe seleccionar un elemento para recopilar información de diseño. Puede ser un cuadro de texto, un botón o cualquier elemento existente en la página. Para mejorar la estabilidad y singularidad de la huella digital, el sitio web también puede generar dinámicamente un elemento oculto dedicado específicamente a la recopilación de la huella.
Paso 2: Obtener los Client Rects del elemento
Mediante JavaScript, se llama al método getClientRects() del elemento para obtener su información de diseño. Los datos devueltos incluyen la posición y el tamaño del elemento——parte superior (top), parte inferior (bottom), izquierda (left), derecha (right), ancho (width) y altura (height), entre otros.
Paso 3: Registrar o procesar los datos
El sitio web registra estos datos sin procesar o los procesa posteriormente. Por ejemplo, puede calcular el área del elemento (ancho × altura) o calcular la relación de posición relativa entre el elemento y otros elementos.
Paso 4: Generar la huella digital del navegador
Por último, el sitio web combina esta información de diseño con otros datos (como la dirección IP, la cadena de agente de usuario, etc.) y, mediante un algoritmo específico, genera una huella digital del navegador única para identificar y rastrear al usuario.
Cabe señalar que este es solo un ejemplo simplificado. En la práctica, un sitio web puede recopilar datos de Client Rects de múltiples elementos y realizar análisis estadísticos más complejos para mejorar la unicidad y la estabilidad de la huella digital.
Client Rects puede entenderse como una “regla” del sitio web——mide con precisión cómo tu navegador renderiza y distribuye los elementos de la página, y esos resultados de medición presentan diferencias pequeñas pero identificables entre distintos dispositivos.