Tecnología Canvas en sistemas antifraude y métodos de identificación de usuarios.

26.10.24

Canvas es una de las herramientas más potentes para el desarrollo web, proporcionando capacidades para trabajar con gráficos directamente en el navegador. En la base de Canvas está la capacidad de dibujar y manipular imágenes con JavaScript, lo que lo hace indispensable para crear aplicaciones web dinámicas. Canvas se utiliza activamente no solo para efectos visuales, juegos y animación, sino también en sistemas antifraude, donde sus capacidades ayudan a identificar a los usuarios de forma única.

## Historia y propósito de Canvas

La tecnología Canvas apareció por primera vez en la especificación HTML5, desarrollada a principios de la década de 2000. Apple introdujo la primera implementación de Canvas en 2004 en su navegador Safari. La idea inicial era crear un método para mostrar gráficos sin usar complementos externos como Flash, lo que mejoraría el rendimiento y la seguridad de las páginas web. En 2014, HTML5 se convirtió en el estándar oficial, y Canvas se consolidó como una tecnología clave para los gráficos web.
    
Canvas permite a los programadores trabajar con datos de píxeles, lo que abre un amplio espectro de aplicaciones en el diseño web, desarrollo de juegos y animación. Pero una de las áreas de uso más inesperadas es en sistemas antifraude, donde Canvas ayuda a combatir el fraude al identificar de manera única a los usuarios mediante una huella digital.
   
## Capacidades tecnológicas de Canvas

Canvas ofrece a los desarrolladores una rica gama de funciones para trabajar con gráficos:

- **Dibujo de formas y líneas**. Canvas admite formas simples como rectángulos, círculos y líneas.
    
- **Trabajo con imágenes**. Permite cargar imágenes, cambiar su tamaño, superponerlas y manipular cada píxel de la imagen.
    
- **Animación**. Canvas se utiliza activamente para crear gráficos interactivos y efectos visuales dinámicos.

Estas capacidades hacen de Canvas una herramienta versátil para el desarrollo web, aplicable en una amplia variedad de campos, desde el diseño de sitios web hasta aplicaciones interactivas complejas y juegos.

### Canvas y antifraude: protección contra los estafadores

Los sistemas antifraude, al intentar identificar los dispositivos de los usuarios, enfrentan el problema de la suplantación de identidad y datos. Para una identificación más precisa, se ha comenzado a utilizar la singularización de dispositivos mediante la llamada huella Canvas (Canvas fingerprinting). Esta permite crear una huella digital para cada dispositivo.

**¿Cómo ayuda Canvas a identificar al usuario?**

Cuando el navegador renderiza una imagen en Canvas, los dispositivos lo hacen de forma ligeramente diferente. En esto influyen los procesadores gráficos, controladores, sistemas operativos e incluso las fuentes. Como resultado, la imagen que parece idéntica en diferentes dispositivos puede contener diferencias únicas a nivel de píxeles al analizarla detalladamente.

Los sistemas antifraude utilizan esta característica para crear huellas. Canvas dibuja una imagen y luego, mediante JavaScript, analiza sus píxeles, revelando pequeñas diferencias. En combinación con otros factores como la versión del navegador, el sistema operativo y la resolución de la pantalla, la huella ayuda a identificar el dispositivo del usuario.

## Métodos para suplantar las huellas de Canvas

Los estafadores, al intentar evadir los sistemas antifraude, desarrollan métodos para falsificar las huellas de Canvas. Entre los métodos comunes de suplantación se destacan:

1. **Agregar ruido**. Los programas pueden añadir pequeñas distorsiones al renderizado de Canvas, como cambiar píxeles, añadir ruido o desviaciones artificiales. Esto puede alterar la huella, enmascarando el dispositivo real.
    
2. **Uso de resultados pre-preparados**. Este método permite suplantar la huella de Canvas, imitando el funcionamiento de equipos reales. En lugar de calcular el renderizado en tiempo real, los programas insertan datos guardados previamente que corresponden a huellas de dispositivos reales. Este enfoque dificulta la detección de la suplantación, ya que los sistemas antifraude reciben datos que parecen genuinos pero no reflejan las características reales del dispositivo.

## Cómo los sistemas antifraude detectan la suplantación de huellas de Canvas

Los sistemas antifraude emplean diversos métodos para detectar la suplantación de huellas de Canvas, teniendo en cuenta tanto los aspectos estáticos como dinámicos del renderizado. Los enfoques principales incluyen:

1. **Análisis de ruido en las imágenes**:
    
    Para determinar la presencia de ruido en el renderizado, los sistemas antifraude comparan los resultados en varias imágenes similares. Esta comparación permite detectar anomalías que pueden indicar una falsificación. Por ejemplo, comparando partes de los resultados o utilizando diferentes métodos para obtener resultados en imágenes idénticas.
    
2. **Uso de Canvas dinámicos**:
    
    Los Canvas dinámicos representan un caso más complicado para la suplantación, ya que requieren un cambio constante de datos en tiempo real. Esto dificulta la suplantación de los resultados de manera que coincidan con el comportamiento de un dispositivo real. Los sistemas antifraude pueden generar Canvas dinámicos para evaluar el rendimiento del dispositivo en tiempo real y comparar los resultados obtenidos con los esperados. Sin embargo, los resultados de los Canvas dinámicos son difíciles de comparar entre sí debido a su variabilidad y dependencia de múltiples factores.
    
De esta manera, la combinación del análisis de ruido y los renderizados dinámicos permite a los sistemas antifraude detectar suplantaciones de manera más efectiva y determinar si las huellas de Canvas son genuinas o falsificadas.

## Ejemplos de uso de Canvas en sistemas antifraude

Veamos el principio de obtención de datos para una huella de Canvas, comenzando con un ejemplo de un Canvas de 9 píxeles (3x3 px).

Colores de los píxeles (Hex):

- ff0000
    
- 00ff00
    
- 0000ff
    
- ffff00
    
- ff00ff
    
- 00ffff
    
- ffffff
    
- 000000
    
- 808080

**Cadena Base64:**
iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAElFTkSuQmCC

**Cadena Hex:**
6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343

El proceso de codificación en hex incluye varios pasos: usualmente, los colores de los píxeles se codifican primero en base64, y luego la cadena base64 se convierte en formato hexadecimal (hex), el cual se envía al servidor para cálculos adicionales.

Ahora que entendemos cómo se realiza el renderizado de la imagen en el navegador, exploremos cómo funciona la adición de ruido en los navegadores de anti-detección.

Para una tarea de renderizado más compleja, usaremos un ejemplo de Canvas de un verificador de navegadores conocido y realizaremos varias pruebas. Compararemos la longitud del resultado Hex, que se envía al servidor después del renderizado y la codificación, y compararemos los valores si es necesario.

**Resultados para el navegador Chrome:**
- Longitud de la cadena Base64: 15452
- Longitud de la cadena Hex: 30948

**Resultados para un navegador anti-detección sin ruido:**
- Longitud de la cadena Base64: 15452
- Longitud de la cadena Hex: 30948

**Resultados para un navegador anti-detección con ruido:**
- Longitud de la cadena Base64: 15936
- Longitud de la cadena Hex: 31916

Al usar ruido, la longitud de la cadena Base64 aumentó en 484 caracteres, mientras que en los demás casos, los valores Hex coinciden.

En este sencillo ejemplo, hemos visto cómo los resultados cambian al usar ruido en Canvas en navegadores de anti-detección.

### Ejemplo de huella de Canvas en Amazon

En la página de registro, Amazon proporciona 3 tareas de renderizado en Canvas.

La primera y la segunda tareas son idénticas, diferenciándose solo en el método de obtención y registro del resultado.

En la primera tarea, el Hex se calcula codificando un conjunto de colores de píxeles, mientras que en la segunda, el conjunto de colores se codifica primero en base64 y luego en hex.

La tercera tarea es ligeramente diferente, ya que carece de una pequeña parte encargada de renderizar "NOT AVAILABLE", lo cual se puede notar en las imágenes.

Cabe destacar que el usuario recibirá exactamente el mismo conjunto de tareas de renderizado al intentar iniciar sesión en su cuenta de Amazon.

Con este conjunto de valores obtenidos a partir del renderizado, el recurso web puede determinar cuántos dispositivos están accediendo a la cuenta, aplicar verificaciones adicionales al acceder desde otros dispositivos, y, además, el recurso web puede distinguir dispositivos con gran precisión, por ejemplo, varios ordenadores idénticos sin tarjeta gráfica discreta con el mismo procesador en las mismas versiones de navegador muestran resultados diferentes entre sí.

Esta alta precisión en la identificación de dispositivos se logra gracias a varios parámetros: diferentes sistemas renderizan tonos semitransparentes de manera distinta, se utilizan fuentes para las tareas de renderizado y, a menudo, también se incluyen símbolos emoji en el Canvas.

En los ejemplos de Canvas analizados anteriormente, Amazon verifica cómo se renderizará la fuente Arial, ya que el texto de las imágenes utiliza precisamente esta fuente, y esto se debe a que Arial no está presente en muchos dispositivos móviles, donde será reemplazada por una fuente del sistema o una similar, lo que resultará en diferencias significativas en los dispositivos de escritorio. En las tareas, en combinación con la fuente Arial, a menudo se pueden encontrar fuentes inexistentes; para realizar tal tarea, el dispositivo del usuario seleccionará otra fuente del sistema, lo cual permite identificar a los usuarios con aún mayor precisión. Lo mismo ocurre con los emojis; dependiendo del dispositivo y el sistema operativo, la renderización de emojis en el Canvas también producirá resultados diferentes.

A la izquierda, emoji en el navegador Chrome en un dispositivo de escritorio; a la derecha, en el navegador Chrome en un dispositivo móvil Android. Veamos ejemplos de resultados de renderizado de emojis. Compare la longitud de las cadenas Base64 y Hex:

**Resultados para el navegador Chrome**

- Longitud de la cadena Base64: 1480
- Longitud de la cadena Hex: 3004

**Resultados para el navegador anti-detección sin ruido**

- Longitud de la cadena Base64: 1480
- Longitud de la cadena Hex: 3004

**Resultados para el navegador anti-detección con ruido**

- Longitud de la cadena Base64: 1708
- Longitud de la cadena Hex: 3460

**Resultados para Samsung**

- Longitud de la cadena Base64: 2240
- Longitud de la cadena Hex: 4556

**Resultados para Xiaomi**

- Longitud de la cadena Base64: 1780
- Longitud de la cadena Hex: 3604

En el ejemplo del renderizado de emojis en Canvas, podemos observar que los resultados en dispositivos de escritorio son significativamente diferentes de los resultados en dispositivos móviles.

## Verificación de la unicidad de la huella de Canvas

Probemos los resultados de renderizado de Canvas en el sitio <a href="https://browserleaks.com/canvas" target="_blank">Browserleaks</a>

En un navegador anti-detección sin ruido, obtuvimos los siguientes resultados:

Nuestra huella de Canvas coincide con las huellas de 142 dispositivos en la base de datos de Browserleaks. El tamaño de la huella es de 4666 bytes.

Probemos a activar el ruido y repetir la verificación:

Con el ruido activado, nuestra huella se vuelve 100% única en Browserleaks. El tamaño de la huella aumentó a 4718 bytes.

Muchas grandes plataformas de antifraude verifican la unicidad de la huella de Canvas y consideran sospechosos a los usuarios con huellas raras.

Probemos hasta qué punto es posible identificar usuarios mediante la huella de Canvas. Para la prueba, utilizaremos servidores alquilados con procesadores Ryzen 5 3600, Ryzen 7 3700X y Ryzen 9 5950X sin tarjeta gráfica y el navegador Chromium versión 131.

**Resultados de las pruebas:**

En el navegador Chromium 131, obtuvimos resultados idénticos en todos los dispositivos.

Verificamos la huella de Canvas en otras versiones del navegador Chromium:

Chromium v130

Chromium v129

Chromium v128

Chromium v126

Chromium v125

Chromium v123

Los resultados muestran diferencias en la huella de Canvas entre las versiones del navegador Chromium.

Para determinar cómo cambia la huella de Canvas en diferentes navegadores, realizaremos una última verificación y abriremos el sitio en el navegador:

Chrome v130

Las huellas en los navegadores Chrome v130 y Chromium v130-131 coinciden completamente.

Como podemos ver, el Canvas presentado en el sitio no puede diferenciar a los usuarios con alta precisión.

## Conclusión

Como resultado de las pruebas realizadas, podemos concluir sobre el impacto de la adición de ruido en el renderizado de imágenes en diferentes navegadores. Los navegadores que utilizan diferentes fuentes y no admiten ciertos símbolos pueden producir resultados distintos.

El uso de ruido provoca cambios significativos en la cadena Hex, lo que puede ser una señal para los sistemas antifraude.

La tecnología Canvas en sí misma no tiene un valor significativo para los sistemas antifraude. Los resultados efectivos solo pueden lograrse en combinación con otros métodos utilizados en antifraude. Sin embargo, actualmente existe una cantidad considerable de tráfico fraudulento que utiliza ruido en Canvas, y la detección de dicho tráfico desde las primeras visitas a un recurso web facilita significativamente las tareas de los sistemas antifraude.

Veamos un método para la detección de ruido que requiere un mínimo de cálculos. La idea de este enfoque me llegó hace bastante tiempo y no he encontrado su aplicación en sistemas antifraude.

El método consiste en comparar los resultados del renderizado de una imagen original y su versión invertida. Para evitar el uso de valores predefinidos en el renderizado, utilizamos un Canvas dinámico, donde cada nueva imagen contiene elementos cambiantes.

El proceso de detección de ruido y suplantación incluye la comparación de cada píxel de la imagen original con el píxel correspondiente en la imagen invertida. Si el renderizado se realiza correctamente y sin manipulaciones, ambas imágenes deben ser idénticas. De lo contrario, se deben esperar discrepancias, lo que podría indicar una posible suplantación u otras violaciones de la integridad de los datos.

## Resultados de las pruebas:

Navegador Chrome:

Navegador anti-detección sin ruido:

Navegador anti-detección con ruido:

Samsung Chrome:

Xiaomi Chrome:

Este enfoque permite detectar el uso de ruido en la huella de Canvas con alta precisión.

En este artículo, hemos analizado cómo los sistemas antifraude pueden utilizar la tecnología Canvas para detectar tráfico fraudulento. Sin embargo, no debemos olvidar que la tarea de un sistema antifraude no es solo detectar la adición de ruido, sino también identificar discrepancias entre la huella de Canvas y el navegador o sistema operativo declarado.

En el próximo artículo, continuaremos analizando las tecnologías del navegador utilizadas en sistemas antifraude.

*Bannykh M.V.*

¿Aún no estás con nosotros?

Regístrate para acceder a todas las funciones del sitio.

Registrarse