Fingerprinting de pantalla y ventana: rastreo

Introducción

La configuración de pantalla de tu navegador dice mucho a los sitios web sobre tu dispositivo. La resolución de pantalla, la profundidad de color, la proporción de píxeles del dispositivo, el área de pantalla disponible y las dimensiones de la ventana son accesibles a través de APIs JavaScript estándar. No se necesitan permisos. Estos valores varían entre dispositivos y configuraciones de monitor, haciéndolos componentes útiles de una huella digital del navegador. Una pantalla de 1920x1080 a 1x DPI es diferente de una pantalla de 2560x1600 a 2x DPI, que es diferente de una pantalla de 3840x2160 a 1.5x. Cuando se combinan con otras señales, las propiedades de pantalla contribuyen una entropía significativa a una huella digital de rastreo. Este artículo explica cómo funciona la huella digital de pantalla y ventana y cómo BotBrowser proporciona una identidad de pantalla controlada y consistente a través de su sistema de perfiles.

Impacto en la privacidad

Las propiedades de pantalla han sido parte de la huella digital desde los primeros scripts de rastreo. El proyecto Panopticlick de la EFF reportó que la resolución de pantalla por sí sola proporciona aproximadamente 4.8 bits de entropía, suficiente para distinguir alrededor de 28 grupos. Cuando se combina con la profundidad de color, la proporción de píxeles del dispositivo y el área de pantalla disponible (que revela el tamaño y posición de la barra de tareas), la huella digital de pantalla combinada puede contribuir más de 8 bits de entropía.

La proliferación de pantallas de alto DPI, monitores ultraanchos y configuraciones de múltiples monitores ha aumentado la diversidad de pantallas. Hace diez años, la mayoría de los usuarios de escritorio tenían pantallas de 1920x1080. Hoy, las resoluciones comunes incluyen 2560x1440, 3840x2160, 2560x1600 (MacBook), 2880x1800 y varias configuraciones ultraanchas. Los dispositivos móviles añaden aún más variedad con resoluciones y proporciones de píxeles específicas por modelo.

Una técnica particularmente efectiva combina la resolución de pantalla con las dimensiones de la ventana. La diferencia entre el tamaño de pantalla y el tamaño de ventana revela información sobre los elementos de interfaz del sistema operativo: altura de la barra de tareas, ancho del dock, decoraciones de ventana. Estos márgenes difieren entre Windows, macOS y Linux, y entre versiones del sistema operativo. Un espacio de 40 píxeles entre screen.height y screen.availHeight sugiere Windows con una barra de tareas inferior. Un espacio de 25 píxeles podría indicar macOS con un dock oculto.

Contexto técnico

Propiedades de pantalla

El objeto screen proporciona información de la pantalla:

• screen.width / screen.height - La resolución de pantalla completa en píxeles CSS.
• screen.availWidth / screen.availHeight - El área de pantalla disponible para ventanas del navegador (menos barras de tareas, docks, etc.).
• screen.colorDepth - La profundidad de color en bits por píxel. Casi universalmente 24 en sistemas modernos.
• screen.pixelDepth - Generalmente igual a colorDepth.

Propiedades de ventana

El objeto window expone dimensiones internas y externas:

• window.innerWidth / window.innerHeight - Las dimensiones del viewport, excluyendo los elementos de interfaz del navegador.
• window.outerWidth / window.outerHeight - Las dimensiones totales de la ventana, incluyendo los elementos de interfaz del navegador (barra de herramientas, pestañas, barra de desplazamiento).
• window.screenX / window.screenY - La posición de la ventana en la pantalla.

Proporción de píxeles del dispositivo

• window.devicePixelRatio - La proporción entre píxeles físicos y píxeles CSS. Un valor de 2 significa que cada píxel CSS se mapea a una cuadrícula de 2x2 de píxeles físicos (común en pantallas Retina/HiDPI).

Media queries CSS

Las media queries proporcionan acceso a características de la pantalla desde CSS:

@media (min-resolution: 2dppx) { /* HiDPI styles */ }
@media (color-gamut: p3) { /* Wide color gamut display */ }
@media (prefers-color-scheme: dark) { /* Dark mode */ }

JavaScript puede consultar estas mediante window.matchMedia(), proporcionando otra vía para leer las propiedades de pantalla.

Por qué varían estos valores

Las propiedades de pantalla dependen de varios factores:

• Hardware del monitor. La resolución física, tamaño y capacidades determinan los valores base.
• Configuración de pantalla del SO. Los ajustes de escala (100%, 125%, 150%, 200%) afectan la relación entre píxeles físicos y píxeles CSS.
• Configuración multi-monitor. Múltiples pantallas con diferentes resoluciones y escalas crean configuraciones únicas.
• Estado de la ventana del navegador. Los modos maximizado, ventana o pantalla completa afectan las dimensiones internas/externas.
• Elementos de interfaz del sistema operativo. El tamaño y posición de la barra de tareas/dock afectan el área de pantalla disponible.

La combinación de estos factores crea una señal de alta entropía. Un usuario con un monitor ultraancho de 3440x1440 a escala 1.25x, con una barra de tareas de Windows de 48 píxeles, tiene una huella digital de pantalla muy distintiva.

Enfoques comunes de protección y sus limitaciones

Las extensiones de navegador que modifican las propiedades de pantalla típicamente anulan los getters de JavaScript en los objetos screen y window. Esto tiene varios problemas. Las media queries CSS pueden leer los valores reales independientemente de JavaScript. La API visualViewport proporciona otra lectura de las dimensiones del viewport. Los getters anulados pueden ser detectados a través de la inspección del prototipo y análisis de temporización.

Usar una resolución común (configurar tu pantalla a 1920x1080) reduce la unicidad pero no aborda las dimensiones de la ventana, el área de pantalla disponible o la proporción de píxeles del dispositivo. También sacrifica la calidad de la pantalla en monitores HiDPI.

Aleatorizar los valores de pantalla crea configuraciones físicamente imposibles. Un ancho de pantalla de 1923 píxeles no corresponde a ningún monitor real. Una proporción de píxeles del dispositivo de 1.37 no corresponde a ninguna configuración real de escala de pantalla. Estos valores son detectables como sintéticos.

Ejecutar en una máquina virtual con configuraciones de pantalla controladas ayuda pero introduce señales específicas de VM. Los controladores de pantalla de VM a menudo reportan conjuntos de capacidades y combinaciones de parámetros específicos que identifican la plataforma de virtualización.

Los modos de navegador headless presentan su propio desafío. El Chromium headless por defecto usa un viewport de 800x600 con una proporción de píxeles del dispositivo de 1, lo cual es una huella digital distintiva en sí misma porque muy pocos usuarios reales navegan con esa configuración.

El enfoque a nivel de motor de BotBrowser

BotBrowser controla todas las propiedades relacionadas con la pantalla a nivel del motor de Chromium a través de su sistema de perfiles.

Perfil de pantalla completo

Cuando se carga un perfil de huella digital, BotBrowser configura:

• Dimensiones de pantalla (screen.width, screen.height, screen.availWidth, screen.availHeight) para coincidir con el dispositivo perfilado.
• Dimensiones de ventana (window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight) con márgenes realistas de interfaz del SO derivados del perfil.
• Proporción de píxeles del dispositivo que coincide con la configuración de pantalla perfilada.
• Profundidad de color y profundidad de píxeles consistentes con el dispositivo perfilado.

Alineación de media queries CSS

BotBrowser asegura que las media queries CSS devuelvan valores consistentes con las propiedades de JavaScript. matchMedia('(min-width: 1920px)') concuerda con screen.width. matchMedia('(resolution: 2dppx)') concuerda con devicePixelRatio. No hay brecha entre las consultas de pantalla basadas en CSS y basadas en JavaScript.

Simulación de interfaz del SO

La diferencia entre las dimensiones externas e internas de la ventana, y entre el tamaño de pantalla y el área de pantalla disponible, se deriva del sistema operativo objetivo del perfil. Un perfil de Windows incluye bordes y dimensiones de barra de tareas típicos de Windows. Un perfil de macOS incluye tamaños de barra de menú y decoraciones de ventana típicos de macOS.

Control del modo headless

En modo headless, BotBrowser aplica la configuración de pantalla del perfil en lugar del valor predeterminado de 800x600. Esto significa que las sesiones headless tienen propiedades de pantalla indistinguibles de las sesiones con interfaz gráfica con el mismo perfil.

Configuración y uso

Protección básica de pantalla

chrome --bot-profile="/path/to/profile.enc" \
       --user-data-dir="$(mktemp -d)"

Configuración de ventana y pantalla

# Usar la configuración de ventana del perfil (predeterminado para headless)
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=profile \
       --bot-config-screen=profile

# Especificar tamaño de ventana exacto
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=1920x1080

# Especificar tamaño de pantalla exacto
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-screen=2560x1440

# Personalización JSON completa
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window='{"innerWidth":1920,"innerHeight":1080,"devicePixelRatio":2}'

# Usar dimensiones reales del sistema (predeterminado para escritorio con interfaz gráfica)
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=real \
       --bot-config-screen=real

Control de esquema de colores

chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-color-scheme=light

Integración con Playwright

const { chromium } = require('playwright');

const browser = await chromium.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-config-window=profile',
    '--bot-config-screen=profile'
  ]
});

const page = await browser.newPage();
await page.goto('https://example.com');

const screenInfo = await page.evaluate(() => ({
  screenWidth: screen.width,
  screenHeight: screen.height,
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight,
  devicePixelRatio: window.devicePixelRatio
}));
console.log(screenInfo);

Integración con Puppeteer

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch({
  executablePath: '/path/to/botbrowser/chrome',
  defaultViewport: null,  // Importante: usar dimensiones del perfil
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-config-window=profile',
    '--bot-config-screen=profile'
  ]
});

const page = await browser.newPage();
await page.goto('https://example.com');

Nota la configuración defaultViewport: null en Puppeteer. Sin esto, Puppeteer anula el viewport con sus propios valores predeterminados, lo cual entraría en conflicto con la configuración de pantalla del perfil.

Verificación

Verificación de propiedades de pantalla. Consulta screen.width, screen.height, screen.availWidth, screen.availHeight y screen.colorDepth. Todos los valores deben coincidir con el dispositivo objetivo del perfil.

Verificación de dimensiones de ventana. Consulta window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight. Los márgenes entre interno y externo deben ser realistas para el SO perfilado.

Verificación de DPI. Verifica que window.devicePixelRatio coincida con el perfil. Comprueba que las media queries CSS de resolución concuerden.

Consistencia de media queries. Usa window.matchMedia() para consultar características de medios relacionadas con la pantalla y confirma que se alinean con los valores de las propiedades JavaScript.

Mejores prácticas

• Usa defaultViewport: null en Puppeteer. Esto evita que Puppeteer anule la configuración de pantalla del perfil.
• Usa --bot-config-window=profile en modo headless. Esto aplica las dimensiones de ventana del perfil en lugar del viewport predeterminado de headless.
• Adapta el perfil de pantalla al caso de uso. Si la IP de tu proxy ubica en una región donde la navegación móvil es común, considera usar un perfil móvil con dimensiones de pantalla apropiadas.
• No establezcas resoluciones irrealistas. Valores como 1920x1080, 2560x1440 y 1440x900 son comunes. Valores como 1919x1079 no lo son.
• Considera la proporción de píxeles del dispositivo. Los perfiles de alto DPI reportan resoluciones físicas más altas con DPR de 2 o 3. Asegúrate de que el DPR de tu perfil sea consistente con el tamaño de pantalla reportado.

Preguntas frecuentes

P: ¿BotBrowser maneja la detección de múltiples monitores? R: Los perfiles de BotBrowser describen una configuración de pantalla única. Los valores de pantalla del perfil representan el monitor principal como se reporta al contenido web. El rastreo de movimiento de ventanas entre múltiples monitores no se expone a las páginas web por defecto.

P: ¿Qué pasa si redimensiono la ventana del navegador con un perfil cargado? R: window.innerWidth y window.innerHeight se actualizan para reflejar el tamaño real de la ventana (en modo con interfaz gráfica con --bot-config-window=real). En modo headless o con --bot-config-window=profile, los valores permanecen controlados por el perfil.

P: ¿La configuración del esquema de colores afecta el renderizado? R: Sí. --bot-config-color-scheme=dark hace que prefers-color-scheme: dark sea verdadero en las media queries CSS y matchMedia(). Los sitios web que implementan modo oscuro se renderizarán en consecuencia.

P: ¿La huella digital de pantalla es la misma en modo headless y con interfaz gráfica? R: Cuando se usa --bot-config-window=profile y --bot-config-screen=profile, sí. Sin estos flags, el modo con interfaz gráfica usa por defecto las dimensiones reales de ventana/pantalla mientras que headless usa las del perfil.

P: ¿BotBrowser soporta proporciones de aspecto ultraancho o no estándar? R: Los perfiles de BotBrowser pueden incluir cualquier configuración de pantalla que exista en hardware real. Si un perfil fue capturado de un dispositivo con un monitor ultraancho, esas dimensiones están disponibles.

P: ¿Cómo interactúa la API visualViewport con la protección de BotBrowser? R: La API visualViewport devuelve valores consistentes con las dimensiones de ventana controladas. No hay brecha entre window.innerWidth y visualViewport.width.

Resumen

Las propiedades de pantalla y ventana están entre las señales de huella digital más comúnmente recopiladas porque no requieren permisos y varían ampliamente entre configuraciones de hardware. BotBrowser controla todos los valores relacionados con la pantalla a nivel del motor, incluyendo dimensiones de pantalla, dimensiones de ventana, proporción de píxeles del dispositivo, profundidad de color y media queries CSS. Al cargar un perfil de huella digital completo, todas las señales de pantalla se alinean con una configuración de dispositivo real, y las sesiones headless producen la misma huella digital de pantalla que las sesiones con interfaz gráfica.

Para temas relacionados, consulta Qué es la huella digital del navegador, Consistencia de señales CSS, Protección de propiedades del navegador y Comportamiento determinista del navegador.