¿Qué es la huella ClientRects? Guía de coherencia de entornos multi-cuenta

Conclusión clave: el ClientRects que leen las páginas de detección son las cajas de maquetación de los elementos, un conjunto de anchos, altos y coordenadas con decimales. Si dos entornos no coinciden, la causa suele estar en el renderizado de fuentes, el zoom de pantalla o las diferencias del sistema. Forma parte de la coherencia del entorno y no se puede desactivar por separado; la solución es elegir el modo en los ajustes de huella y probar en la práctica.

«La revisión de coherencia llega a la capa de huella y los valores de ClientRects de los dos entornos no coinciden». O al revés: la página de detección marca la casilla en amarillo y no sabes si cuenta como problema. Estas dudas comparten un punto: el nombre suena conocido, pero no está claro qué mide ni qué implica cambiarlo.

Este artículo responde a cuatro cosas en orden de diagnóstico: qué es esta lectura, por qué dos entornos no coinciden, qué indica dentro de la coherencia del entorno y cómo configurarla y verificarla en MostMate, navegador antidetect. MostMate prepara para cada cuenta un entorno de navegador aislado, y ClientRects es uno de los puntos de los ajustes de huella.

Qué es exactamente la huella de ClientRects

En una frase: la huella de ClientRects lee las coordenadas exactas de las cajas de los elementos de la página. Llamar a getBoundingClientRect() devuelve el ancho, el alto y la posición del elemento respecto al viewport; la documentación de MDN lo define como «devuelve el tamaño del elemento y su posición respecto al viewport». Para los elementos en línea partidos en varias líneas se lee con getClientRects(), un rectángulo por línea.

Lo clave está en la forma de los valores. Las coordenadas no son enteros, sino decimales con muchos dígitos, por ejemplo 147.359375. Un sitio no necesita ningún permiso: un script crea un elemento oculto, le pone un texto fijo, lee el rectángulo y arma una firma, todo mezclado con el cálculo normal de la maquetación.

Tres razones para prestarle atención. No se puede desactivar: el cálculo de la maquetación es la base del funcionamiento normal de la web. Es estable entre sesiones: el mismo equipo da lecturas casi idénticas. Y como las fuentes o los parámetros de pantalla, forma parte de la declaración del entorno, que los sistemas de riesgo cruzan entre sí.

Por qué las lecturas no coinciden entre dos entornos

El ancho de una misma línea depende de toda la cadena de renderizado:

• Motor de composición del texto: Windows, macOS y Linux tienen el suyo; misma fuente, mismos caracteres, pero espaciados calculados distintos.
• Zoom de pantalla: las pantallas de alta resolución y el zoom del sistema cambian la granularidad del redondeo, y con ella los decimales.
• Fuente de respaldo: si la fuente pedida no está instalada, se usa otra y el ancho cambia.
• Motor del navegador y zoom de página: cada motor parte las líneas a su manera, y el zoom de página entra directo en la maquetación.

Estas diferencias son pequeñas; un número aislado no dice nada. Pero combinadas describen «qué sistema y qué pila de renderizado corre en este equipo». Es pariente cercano de la huella de fuentes: la enumeración pregunta por la lista, ClientRects mide el resultado renderizado, y ambos se corroboran. Los parámetros de tamaño a nivel de dispositivo y ventana están en el artículo sobre resolución de pantalla; ClientRects es una señal a nivel de elemento, una capa más profunda.

Qué papel juega esta lectura en la coherencia del entorno

Su mayor valor es la verificación cruzada: encontrar una referencia medida que cuadre con lo declarado por el entorno. El entorno se declara Windows con un juego de fuentes comunes, pero los anchos de texto medidos delatan el estilo de redondeo de otro sistema. Las dos señales chocan. El sistema de riesgo no necesita entender el mecanismo: le basta con detectar la contradicción.

La coherencia de la configuración importa más que la rareza de un parámetro aislado. Para saber si dos entornos serán juzgados como la misma persona, las lecturas de rectángulos deben compararse en el mismo grupo que el sistema operativo y la lista de fuentes declarados en el panel de huella; la lógica de la autoverificación de cuatro dimensiones consiste en alinear declaración y medición.

Otro uso que se suele pasar por alto: detectar el zoom. La forma de redondear los rectángulos permite deducir el nivel de zoom de la página y el zoom del sistema, información que también cruza con los parámetros de pantalla declarados. Cuando el comportamiento del zoom difiere mucho entre entornos, que las lecturas no coincidan es normal: confirma el estado del zoom antes de concluir.

Cómo configurarlo en MostMate

En el formulario de ajustes de huella de MostMate, ClientRects ocupa un punto propio, junto a Canvas, AudioContext, SpeechVoices y WebGL Image. Solo hay dos modos: el modo Real devuelve la maquetación real del equipo, y el modo Noise es el modo de ruido.

Elige el modo según el caso. Con estas dos condiciones puedes elegir Real: la configuración del equipo coincide con la del público al que te diriges, por ejemplo un Windows común con las fuentes por defecto, y tus páginas exigen precisión de maquetación, sin valores alterados. El precio del modo Real: las características reales de renderizado del equipo quedan expuestas tal cual; si el ordenador tiene muchas fuentes poco comunes, su distintividad sube con ellas.

Varios entornos sobre el mismo equipo: elige Noise. Las lecturas de cada entorno dejan de apuntar a la misma máquina, y ese es su caso de uso principal. El precio es aceptar una restricción. Los valores de los rectángulos guardan relaciones aritméticas: las coordenadas de la caja deben cuadrar con los rectángulos del texto interno, y una misma cadena debe mantener anchos proporcionales. Si el ruido solo cae sobre parte de las lecturas, esas relaciones se rompen y se crea una señal de contradicción más visible. Por eso, tras elegir el modo hay que probar de verdad, y no dar la configuración por buena.

Tras cambiar al modo Noise, la línea de ClientRects en el panel de vista previa de huella muestra un valor con un código de seis caracteres. El código solo identifica la configuración de ruido; el hash realmente expuesto solo se ve abriendo el entorno y pasando una página de detección.

Cómo verificar tras configurar

Son dos pasos: ver si cambian los valores y si quedan coherentes.

Paso 1: comparar las lecturas de los dos entornos. Crea dos entornos, uno en Real y otro en Noise, y abre la página de detección de Client Rects de BrowserLeaks en cada uno. En el mismo equipo, los rectángulos del entorno Real deberían coincidir. El entorno Noise debería diferir del Real, y dos entornos Noise también deberían distinguirse entre sí. Al anotar, fíjate sobre todo a partir del tercer decimal: la diferencia suele empezar ahí. Anota las lecturas de cada entorno como línea base de ese entorno.

Paso 2: comprobar la coherencia. Luego toca cruzar los datos:

• Vuelve a medir en otra sesión: los valores de un mismo entorno deben ser estables; lecturas que saltan ya son una anomalía.
• Contrasta con el sistema operativo y la lista de fuentes declarados en el panel de huella: el estilo de renderizado debe cuadrar, una señal no puede decir Windows y otra macOS.
• Navega con normalidad por algunas páginas de uso habitual y confirma que la maquetación no muestra fallos visibles, sobre todo en formularios, botones y texto con saltos de línea.

Si todo pasa, listo. Si no, vuelve a los ajustes y revisa el modo.

Preguntas frecuentes

La página de detección marca ClientRects en rojo: ¿el entorno tiene un problema seguro?

No necesariamente. Mira dos cosas primero: si el sistema y las fuentes declarados encajan con el estilo de las lecturas, y si el estado del zoom corresponde a los parámetros de pantalla. Si ambos están bien, un aviso aislado no debe preocupar; solo cuando el estilo de las lecturas contradice claramente la declaración toca abrir los ajustes de huella y revisar el modo.

¿Cambiar el zoom del navegador altera la huella de ClientRects?

Sí. El zoom entra directamente en la maquetación y el redondeo de los rectángulos cambia con él. Pero el zoom es un comportamiento normal de cualquier usuario. El riesgo está en otro sitio: un estado de zoom que no cuadra con los parámetros de pantalla declarados. Lo estable entre sesiones sigue determinado por la pila de renderizado.

¿Se puede desactivar ClientRects?

No. El cálculo de la maquetación es la base del funcionamiento normal de la web: la composición del texto, el posicionamiento de popups y las animaciones dependen de él. Ningún navegador ofrece un interruptor para apagarlo. La práctica del sector es reducir la precisión en vez de desactivar; Tor Browser redondea los valores medidos para reducir las diferencias identificables.

¿Por qué los navegadores headless delatan fácilmente sus tamaños de elementos?

El viewport por defecto de un entorno headless es muy fijo y la pila de renderizado de texto es uniforme. Los rectángulos medidos rara vez encajan con el equipo que la UA declarada dice ser. El sistema de riesgo cruza los rects con los demás parámetros declarados: estos entornos se detectan con facilidad.

Para terminar

El papel de ClientRects en la revisión de coherencia es concreto: poner la declaración del entorno junto a la maquetación medida; una contradicción es una señal. Ante un aviso rojo, contrasta primero los parámetros declarados con el estado del zoom, confirma que hay un hueco de coherencia y luego trátalo en los ajustes de huella.

MostMate reúne ClientRects y los demás parámetros de renderizado en un solo formulario de ajustes de huella; los modos Real y Noise controlan el origen de las lecturas. El panorama completo de funciones puedes verlo en el sitio de MostMate. Una vez creados los entornos, anotar una línea base comparando dos entornos rinde más que cualquier truco de configuración. También puedes descargar MostMate y medir tú mismo la diferencia entre Real y Noise en dos entornos.