El tamaño de la ventana del navegador es uno de los parámetros que las aplicaciones web pueden utilizar para identificar los dispositivos de los usuarios. Aunque esta información pueda parecer insignificante a primera vista, sus características únicas pueden ser una poderosa herramienta en los sistemas antifraude. Estos sistemas analizan el tamaño de las ventanas de los navegadores, incluidos los cambios en tiempo real, así como los datos transmitidos en las cabeceras HTTP para detectar actividades sospechosas e identificar intentos de falsificación de información. ###### Historia y aplicaciones del análisis del tamaño de la ventana del navegador La medición del tamaño de la ventana del navegador (viewport) se puso por primera vez a disposición de los desarrolladores a través de la API DOM a partir de las primeras versiones de JavaScript. Estos datos se utilizaban para adaptar el contenido a las pantallas de los usuarios. A medida que la tecnología evolucionó, los sistemas antifraude empezaron a utilizar el tamaño de ventana como parámetro adicional para crear una huella digital del usuario. Hoy en día, los datos de tamaño de ventana pueden incluir - Dimensiones de la ventana (window.innerWidth y window.innerHeight). - El tamaño total de la ventana del navegador. - Resoluciones de pantalla soportadas. - Frecuencia de actualización de la pantalla. Estos parámetros pueden variar según el dispositivo, el sistema operativo y el navegador, creando un conjunto único de características. ###### Tamaño de las ventanas en las cabeceras HTTP Algunos navegadores transmiten información sobre el tamaño de la ventana en cabeceras HTTP como User-Agent Client Hints (por ejemplo, Viewport-Width y Device-Width). Esto permite a los sitios web adaptar el contenido a los tamaños de pantalla, pero también permite a los sistemas antifraude utilizar estos datos para comprobar la suplantación de identidad. **Ejemplo de datos transmitidos - Ancho de pantalla: 1920 - Anchura del dispositivo: 2560 Una discrepancia entre los datos comunicados y el tamaño real de la ventana puede indicar el uso de un navegador antidetección. ###### Métodos de identificación de usuarios mediante el tamaño de las ventanas **1. Análisis de la estabilidad del tamaño** Los sistemas antifraude rastrean los cambios en el tamaño de las ventanas durante una sesión. Por ejemplo: - Los cambios bruscos de tamaño (especialmente si corresponden a resoluciones populares preestablecidas) pueden indicar suplantación de identidad. - Los valores constantes de tamaño de ventana que no son característicos del dispositivo pueden ser signos de emulación. **2. Comparación con la resolución de pantalla** El sistema comprueba si el tamaño de la ventana coincide con la resolución de pantalla declarada: - Si la resolución de pantalla es 1920×1080 y las dimensiones de la ventana son 3000×2000, puede tratarse de un intento de suplantación. **3.Uso de anomalías en el renderizado** A veces los navegadores pueden informar de tamaños de ventana incorrectos debido a peculiaridades en el procesamiento DOM o en el entorno gráfico. Estas anomalías pueden utilizarse para detectar dispositivos espurios. ###### Métodos para falsear el tamaño de las ventanas Los estafadores utilizan los siguientes métodos para el disimulo: 1. **Dimensiones ficticias:** cambiando los valores window.innerWidth y window.innerHeight mediante herramientas de desarrollador o plugins. 2. **Uso de configuraciones preestablecidas:** emulando los tamaños de dispositivos populares para evitar sospechas. 3. **Suplantación de cabeceras HTTP:** cambiando los valores Viewport-Width y Device-Width. ###### Métodos de detección de spoofing **1. Comprobación del tamaño de las ventanas** Un sistema antifraude puede crear scripts que requieran cambiar el tamaño de la ventana (por ejemplo, ventanas emergentes). Los navegadores suplantados pueden no responder adecuadamente a tales peticiones. **2. Comprobación de la coincidencia de tamaño** La comparación de los datos del DOM (por ejemplo, window.innerWidth) con los datos de las cabeceras HTTP ayuda a detectar desajustes. **3. Análisis del comportamiento del usuario Los cambios de tamaño de ventana durante la interacción con el sitio pueden ser inusualmente suaves o, por el contrario, demasiado bruscos en el caso de la emulación. Veamos ejemplos de qué tamaños del navegador de un usuario pueden recibir los sistemas antifraude. Abramos la página browserleaks.com/javascript en el navegador Chrome.  En esta página, el sitio determina el tamaño del monitor, la orientación y el ángulo de la pantalla, y las dimensiones exteriores e interiores de la ventana del navegador. Entendamos mejor qué tamaños y valores pueden obtener los recursos. Abramos nuestra página de prueba test-webapi.tech/pantalla  La página de prueba muestra los siguientes parámetros: **Tipo de orientación** Indica la orientación actual de la pantalla del dispositivo (por ejemplo, vertical-primaria, horizontal-primaria). **Ángulo de orientación** Ángulo de rotación de la pantalla respecto a su orientación natural, en grados. **Ancho disponible** Anchura de la pantalla disponible para su uso (excluyendo elementos del sistema como la barra de tareas). **Anchura exterior** La anchura total de la ventana del navegador, incluyendo las áreas fuera de la página visible, tales como barras de desplazamiento y marcos. **Ancho de pantalla** La anchura total de la pantalla del dispositivo en píxeles. **Anchura interior** La anchura del área de contenido visible de la ventana del navegador (excluyendo barras de desplazamiento y marcos). **Altura disponible** La altura de la pantalla disponible para su uso (excluyendo elementos del sistema como la barra de tareas). **Altura exterior** La altura total de la ventana del navegador, incluyendo las áreas fuera de la página visible, tales como barras de desplazamiento y marcos. **Altura de la pantalla** La altura total de la pantalla del dispositivo en píxeles. **Altura interior** La altura del área de contenido visible de la ventana del navegador (excluyendo barras de desplazamiento y marcos). **Izquierda disponible** La posición horizontal del área de pantalla disponible en relación con el inicio de la pantalla (normalmente 0). **Disponible arriba** Posición vertical del área de pantalla disponible en relación con el inicio de la pantalla (normalmente 0). **Puntos táctiles máximos** Número máximo de puntos táctiles que admite el dispositivo. **Profundidad de color** Número de bits utilizados para representar el color de un píxel de la pantalla. Por ejemplo, 24 o 32. **Profundidad del píxel** La profundidad del píxel en bits, normalmente la misma que el valor de Profundidad de Color. **Proporción de píxeles del dispositivo** La relación entre los píxeles físicos del dispositivo y los píxeles lógicos. Por ejemplo, 1,0 para pantallas estándar o 2,0 para pantallas Retina. **Ancho del cliente** La anchura del área de contenido dentro del elemento html sin barras de desplazamiento. **Altura del cliente** La altura del área de contenido dentro del elemento html sin barras de desplazamiento. **X de la pantalla** Posición horizontal de la esquina superior izquierda de la ventana del navegador respecto a la pantalla del dispositivo, en píxeles. **Pantalla Y** Posición vertical de la esquina superior izquierda de la ventana del navegador respecto a la pantalla del dispositivo, en píxeles. **Anchura de desplazamiento** La anchura total del contenido de la página, incluidas las áreas ocultas que se pueden desplazar. **Altura de desplazamiento** La altura completa del contenido de la página, incluyendo las áreas ocultas que se pueden desplazar. **Ancho de la ventana visual** Anchura del área mostrada al usuario, incluida la posible escala. **Altura de la ventana visual** Altura del área mostrada al usuario, incluyendo posibles escalados. **Desplazamiento X** Desplazamiento horizontal de la página desde el principio, en píxeles. **Desplazamiento Y** Desplazamiento vertical de la página desde el principio, en píxeles. **Diferencia de altura (exterior - interior)** Diferencia entre la altura total de la ventana del navegador y la altura visible del contenido. Se presenta para determinar el tamaño del panel administrativo del navegador. Entre los parámetros presentados hay parámetros que raramente se cambian dentro de un perfil, por ejemplo: Tipo de orientación, Tamaño de pantalla, Profundidad de color, Profundidad de píxeles, Puntos táctiles máximos, hay parámetros que sólo se pueden cambiar en ciertos tipos de dispositivos, por ejemplo: Ángulo de orientación, Pantalla X, Pantalla Y. Comparemos los datos obtenidos del navegador Chrome y del navegador antidetección:  Para la versión de escritorio, el navegador antidetect intercambia bastante bien los parámetros de tamaño de pantalla y navegador, pero los valores Screen X y Screen Y son 0, lo que corresponde a que nuestro navegador está anclado a la esquina superior izquierda de la pantalla y esta es la ubicación que obtendremos en el navegador antidetect, cada vez que abramos el perfil, mientras que por defecto se abre una nueva ventana del navegador Chrome real en el centro de la pantalla. Hay que tener en cuenta que obtendremos el mismo tamaño de navegador cada vez que utilicemos el perfil, mientras que un usuario normal cambiará a menudo el tamaño de una ventana de navegador que no sea de pantalla completa. Prestemos atención al valor de Diferencia de altura, en el navegador Chrome ocupando parte de la pantalla la altura del panel administrativo es de 95px, comprobemos este valor en el navegador Chrome con panel de marcadores:  La altura del panel administrativo en este caso es de 129px. De este modo, el recurso puede determinar con precisión la visibilidad del panel de favoritos en el navegador del usuario. Abramos nuestra página de prueba en el navegador Firefox:  En el navegador Firefox, la altura del panel administrativo es de 91px, por lo que los sistemas antifraude pueden determinar si el navegador declarado por el usuario en el User-Agent coincide o no con las dimensiones estándar del navegador original. Es importante tener en cuenta que el tamaño del panel administrativo en los navegadores a pantalla completa es diferente del tamaño del navegador que ocupa parte de la pantalla del usuario. Repitamos la prueba en un dispositivo móvil y en un navegador antidetección que intenta presentarse como un dispositivo móvil:  El navegador antidetección establece el valor de Inner Height igual al de Outer Height, mientras que en un navegador móvil real el valor de Inner Height es mayor que el de Outer Height, y esta sustitución puede ser un disparador para los sistemas antifraude. También hay que tener en cuenta que el valor del desplazamiento vertical de la página, en el modo probado del navegador antidetección, se realiza sólo mediante valores enteros de píxeles (parámetro Scroll Y). ###### Eventos de acción del navegador y su papel en los sistemas antifraude Las aplicaciones web modernas utilizan activamente los eventos del navegador para mejorar la interacción con el usuario. Sin embargo, acciones como los clics, los desplazamientos y los eventos táctiles también proporcionan datos únicos que pueden ser utilizados por los sistemas antifraude para detectar actividades sospechosas. Estos sistemas analizan el comportamiento de los usuarios para detectar bots, emulación de acciones o suplantación de datos. ###### Eventos de acciones básicas del navegador Los eventos del navegador incluyen una amplia gama de interacciones que un usuario puede realizar en una página web. Los más importantes son: - **Clicks (click, dblclick):** capturan los clicks del botón del ratón sobre elementos de la página. - **Scroll:** registra el desplazamiento del área visible de la página. - **Mouseover (mouseout, mouseout, mousemove):** registra el movimiento del cursor. - **Eventos táctiles (touchstart, touchmove, touchend):** registra acciones en dispositivos de pantalla táctil. - **Entrada de texto (keydown, keyup, input):** registra las acciones del usuario basadas en texto. - **Enfoque (focus, blur):** determina si los elementos de entrada están activados o desactivados. - **Respuestas al cambio (resize, orientationchange):** detectan cambios en el tamaño de la ventana del navegador o en la orientación del dispositivo. ###### Papel de los eventos en los sistemas antifraude Los sistemas antifraude utilizan los eventos para analizar el comportamiento real de los usuarios y compararlo con los escenarios esperados. Los aspectos clave del análisis son **1. Velocidad y ritmo de las acciones** ◦ Los bots suelen imitar las acciones de los usuarios, pero pueden mostrar un ritmo poco natural, como hacer clic o desplazarse demasiado rápido. ◦ En el caso del desplazamiento, los usuarios reales tienden a mover la página a diferentes velocidades, mientras que los bots pueden utilizar un movimiento lineal. **2. Caracterización de los eventos táctiles** ◦ Los eventos táctiles reales tienen coordenadas táctiles únicas y pueden contener datos de fuerza (si el dispositivo admite este tipo de sensores). ◦ Los eventos táctiles emulados suelen capturarse como un valor fijo o un patrón de coordenadas. **3. Comportamiento antinatural** ◦ Los sistemas antifraude rastrean comportamientos repetitivos, como el mismo tiempo entre clics o el mismo ángulo de desplazamiento. ◦ La inmovilidad del cursor durante largos periodos de tiempo también puede ser un signo de automatización. ###### Técnicas de suplantación de eventos Los atacantes pueden utilizar varios enfoques para emular eventos: **1. Scripts automatizados**. Utilizando librerías de automatización como Puppeteer o Selenium para crear eventos artificiales (por ejemplo document.dispatchEvent). **2. Simulación de eventos táctiles**. Las herramientas para desarrolladores permiten ejecutar toques simulados en dispositivos inexistentes. **3. Sustitución de datos de eventos** Modificación de las propiedades de los eventos, como las coordenadas o el tiempo de ejecución, para ocultar la automatización. ###### Métodos para detectar la suplantación de identidad Los sistemas antifraude utilizan diferentes enfoques para detectar el spoofing: **1. Análisis de marcas de tiempo** Comparación de las marcas de tiempo de los eventos con el tiempo real: los eventos artificiales pueden mostrar velocidades poco realistas. **2. Verificación de coordenadas** Los sistemas analizan la distribución de coordenadas de los clics o eventos táctiles. Los patrones sospechosos (por ejemplo, la concentración en un solo lugar) pueden indicar suplantación de identidad. **3. Uso de captcha** Las pruebas interactivas requieren acciones difíciles de emular (por ejemplo, arrastrar y soltar elementos). **4. Comparación de los datos del navegador** Los parámetros de los eventos (por ejemplo, datos de puntos táctiles o de desplazamiento) se comparan con los datos del dispositivo para identificar incoherencias. Ejemplos: Abramos la página de prueba test-webapi.tech/touch en el navegador Chrome e introduzcamos texto en el cuadro de entrada de texto:  Hagamos clic en el botón:  Observa que se registran las coordenadas de movimiento del ratón y el evento de pulsar el botón y pulsar el campo de entrada antes de escribir el texto, estos valores corresponden a las coordenadas de movimiento del ratón. También se registran los eventos de desplazamiento de página  Para los sistemas antifraude parecerá sospechoso hacer clic en un botón, si antes del clic, el ratón no se movió a las coordenadas del botón en la página, o cerrar una pestaña en el navegador sin mover el ratón a la barra del navegador. Comprobemos los eventos en un dispositivo móvil y en un navegador antidetección con un navegador móvil simulado. Comparemos los eventos de introducción de texto en el campo  En este ejemplo, podemos ver diferencias significativas: 1. el evento Tocar se realiza sobre coordenadas enteras en el navegador antidetección. 2. El radio del evento Touch en el navegador antidetect es de 11,5px, que es más de 10 veces el dispositivo móvil real. 3. En el navegador antidetect, la parte visible de la pantalla no se reduce, no simula la aparición de un teclado virtual en la pantalla del dispositivo, a diferencia del dispositivo real. Tenga en cuenta que el tamaño de la parte visible de la pantalla en los dispositivos móviles cambia no sólo cuando el teclado aparece en la pantalla del dispositivo, sino también en otros eventos, por ejemplo, cuando se desplaza hacia abajo en la página, la barra de direcciones en la versión móvil del navegador se oculta y el tamaño de la parte visible de la pantalla aumenta. Comparemos los eventos que se producen al desplazarse por la página:  En esta prueba, podemos ver que el registro de acciones de desplazamiento por la página en el navegador antidetección es diferente del registro en el dispositivo móvil. Además de ver sólo valores enteros de coordenadas, también obtenemos un registro de eventos táctiles cada vez que la página se desplaza hacia abajo un pequeño valor de píxel. Hoy en día muchos sistemas antifraude rastrean eventos en el navegador, si abrimos el sitio de amazon podemos ver que este sitio rastrea un gran número de eventos como: tiempo de carga de la página, cambio de tamaño de la página, acciones del usuario en la página.  #### Salida Los eventos de acción del navegador y los valores de los tamaños de pantalla y navegador de los usuarios proporcionan un gran conjunto de datos para los sistemas antifraude. El análisis del tamaño del navegador permite identificar a los usuarios de forma inequívoca, mientras que el análisis del comportamiento de los usuarios permite detectar bots, emulaciones u otros intentos de engaño. Para mejorar la precisión, estos sistemas utilizan enfoques combinados, comparando los datos de los eventos con las características de los dispositivos y los escenarios previstos. *Bannykh M.V.*