Canvas Fingerprinting: qué es y cómo evitarla

¿Qué es Canvas Fingerprinting?

Los navegadores web recopilan diferentes tipos de información mientras realizan sus funciones. Cuando parte de esta información se recopila para identificar a un usuario de un sitio web, se llama huella digital del navegador.

La huella digital del navegador incluye la siguiente información del navegador: modelo del dispositivo, tipo y versión del navegador, sistema operativo (OS), resolución de pantalla, zona horaria, identificador de formato de archivo p0p, marca de tiempo, cadena del agente de usuario (UA), configuración de idioma, complementos y extensiones.

Canvas fingerprinting es una de estas tecnologías de huellas digitales del navegador. Se basa en el elemento Canvas del código HTML5 de la Web.

¿Cómo funciona Canvas Fingerprinting?

Canvas fingerprinting utiliza la API Canvas del navegador para dibujar imágenes invisibles y extraer huellas digitales persistentes a largo plazo sin el conocimiento del usuario.

A continuación se presenta un desglose rápido de los pasos necesarios para generar una huella digital de canvas para un sitio web:

1. Un usuario visita un sitio web.
2. El sitio web activa un script de huella digital de canvas basado en JS.
3. HTML genera una imagen invisible en el navegador.
4. El script crea una representación en Base64 de la imagen basada en el sistema operativo, el navegador y la GPU del cliente.
5. Luego se calcula un hash de esa representación.

¿Frustrado porque el scraping web es bloqueado una y otra vez?
Nstbrowser gratuito maneja la rotación de direcciones IP y el desbloqueo web por ti.
¡Prueba GRATIS!
¿Tienes ideas y dudas interesantes sobre el web scraping y el Browserless?
¡Veamos qué comparten otros desarrolladores en Discord y Telegram!

Canvas Fingerprinting vs. Huella Digital del Navegador: ¿Cuál es la diferencia?

Canvas Fingerprinting

Metodología:

1. Elemento canvas de HTML5: Canvas fingerprinting se basa en el elemento canvas de HTML5 para renderizar gráficos.
2. Renderización de Gráficos: Un script renderiza un gráfico (por ejemplo, texto, formas) en el canvas.
3. Captura de Datos de Imagen: Los datos de píxeles del gráfico renderizado se capturan utilizando el método toDataURL.
4. Características Únicas: Las diferencias en la renderización debido a factores como el navegador, el sistema operativo, la tarjeta gráfica y las fuentes instaladas dan como resultado una imagen única.
5. Hashing: Los datos de la imagen se someten a hashing para generar una huella digital única.

Huella Digital del Navegador

Metodología:

1. Múltiples Atributos: La huella digital del navegador utiliza una combinación de muchos atributos para crear un identificador único.
2. Atributos Recopilados: Los atributos comunes incluyen:

• Cadena del Agente de Usuario: Información sobre el navegador, la versión y el sistema operativo.
• Resolución de Pantalla: Tamaño y profundidad de color de la pantalla del dispositivo.
• Complementos Instalados: Lista de complementos del navegador y sus versiones.
• Fuentes: Fuentes instaladas en el dispositivo.
• Zona Horaria: La zona horaria del dispositivo.
• Idioma: Configuración de idioma preferida.
• Cookies y Almacenamiento: Capacidad para almacenar y recuperar cookies, almacenamiento local y almacenamiento de sesión.
• WebGL y Canvas: Capacidades y rendimiento de renderización.
• Contexto de Audio: Características del hardware de audio.

Canvas Fingerprinting vs. Cookies: ¿Cuál es la diferencia?

Canvas Fingerprinting

Metodología:

1. Elemento canvas de HTML5: Utiliza el elemento canvas de HTML5 para renderizar gráficos.
2. Renderización de Gráficos: Un script dibuja un gráfico en el canvas.
3. Datos de Imagen: Los datos de píxeles del gráfico renderizado se capturan utilizando el método toDataURL.
4. Hashing: Los datos de la imagen se someten a hashing para crear un identificador único o huella digital basada en variaciones sutiles en la renderización.

Cookies

Metodología:

1. Almacenamiento de Datos: Pequeños fragmentos de datos almacenados en el dispositivo del usuario por el navegador web a solicitud de un servidor web.
2. Tipos de Cookies:

• Cookies de Sesión: Temporales y eliminadas cuando se cierra el navegador.
• Cookies Persistentes: Almacenadas hasta que expiran o son eliminadas por el usuario.
• Cookies de Terceros: Configuradas por dominios distintos a los que visita el usuario, a menudo utilizadas por anunciantes y herramientas de análisis.

¿Cómo eludir Canvas Fingerprinting con Nstbrowser?

Canvas Noise es una técnica para prevenir la detección de huellas digitales añadiendo ruido aleatorio a los elementos Canvas de HTML5. Si dos imágenes son diferentes, tendrán valores de hash diferentes.

Por lo tanto, al introducir ruido aleatorio en una imagen, usualmente modificando los datos de la imagen renderizada por Canvas, es posible prevenir la generación de huellas digitales consistentes haciendo que el valor de hash de la imagen de Canvas sea ligeramente diferente cada vez, lo cual es difícil de detectar para el ojo humano, pero el valor de hash generado será diferente.

Aquí hay una implementación simple de Canvas Noise:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de Ruido en Canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
    // Obtener el elemento canvas y su contexto de renderizado 2D
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    // Paso 1: Dibujar la imagen original
    // Configurar la línea base del texto y la fuente
    ctx.textBaseline = 'top';
    ctx.font = '14px Arial';
    ctx.textBaseline = 'alphabetic';
    
    // Dibujar un rectángulo relleno
    ctx.fillStyle = '#f60';
    ctx.fillRect(125, 1, 62, 20);
    
    // Dibujar el primer texto
    ctx.fillStyle = '#069';
    ctx.fillText('¡Hola, mundo!', 2, 15);
    
    // Dibujar el segundo texto con transparencia
    ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
    ctx.fillText('¡Hola, mundo!', 4, 17);
    
    // Paso 2: Añadir ruido aleatorio a la imagen
    // Obtener los datos de la imagen del canvas
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    
    // Recorrer cada píxel y añadir ruido aleatorio
    for (var i = 0; i < data.length; i += 4) {
        // Añadir ruido al canal rojo
        data[i] += Math.floor(Math.random() * 10) - 5;     // Rojo
        // Añadir ruido al canal verde
        data[i+1] += Math.floor(Math.random() * 10) - 5;   // Verde
        // Añadir ruido al canal azul
        data[i+2] += Math.floor(Math.random() * 10) - 5;   // Azul
    }
    
    // Colocar los datos de imagen modificados de nuevo en el canvas
    ctx.putImageData(imageData, 0, 0);
    
    // Convertir el canvas a una URL de datos y registrarlo
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    
    // Generar un hash SHA-256 de la URL de datos y registrarlo
    sha256(dataURL).then(hash => console.log(hash));
    
    // Función para generar un hash SHA-256
    function sha256(str) {
        return crypto.subtle.digest('SHA-256', new TextEncoder().encode(str)).then(buffer => {
            return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
        });
    }
</script>
</body>
</html>

Nstbrowser es un excelente navegador de huellas digitales que admite la configuración de huellas digitales de Canvas. Al crear un perfil, la huella digital de Canvas predeterminada es el modo Ruido, que añade ruido aleatorio al Canvas, pero también admite el modo Real, que es consistente con la huella digital de Canvas del navegador real:

A continuación, creamos 9 huellas digitales de Canvas para los perfiles en modo Ruido y Real utilizando Nstbrowser, y luego comparamos las huellas digitales de Canvas de mi navegador real local accediendo a Browserleaks Canvas fingerprinting detection:

• Huellas Digitales de Canvas del Navegador Real de Mi Dispositivo

• Huellas Digitales de Canvas en modo Real en Nstbrowser:

• Huellas Digitales de Canvas en modo Ruido en Nstbrowser:

Al comparar, podemos ver fácilmente que la huella digital con el modo Real de Canvas configurado es la misma que la huella digital de Canvas de mi navegador real local, mientras que la huella digital de Canvas de cada perfil en el modo Ruido de Canvas es diferente y única.

Pros y Contras de Canvas Fingerprinting:

Pros:

• Rastreo efectivo. Canvas fingerprinting proporciona un método de rastreo más persistente y preciso que las cookies tradicionales.
• Difícil de detectar. Los usuarios a menudo no son conscientes de la huella digital de canvas. Por lo tanto, generalmente no se detecta ni se bloquea.

Contras:

• Preocupaciones de privacidad. Canvas fingerprinting plantea serias preocupaciones de privacidad. Esto se debe a que permite a los sitios web recopilar detalles de los usuarios sin su consentimiento.
• Perfilado de usuarios. Permite la creación de perfiles de usuario detallados. Sin embargo, es probable que estos perfiles se utilicen para publicidad dirigida u otros fines sin el consentimiento del usuario.
• Inexactitud. Aunque generalmente es confiable, a veces puede generar falsos positivos o huellas digitales inexactas debido a las inconsistencias en las implementaciones del navegador o configuraciones del usuario.

¿Es legal el Canvas Fingerprinting?

La legalidad de Canvas Fingerprinting varía según la ubicación. En ciertas áreas, puede considerarse una violación de las regulaciones de privacidad si se implementa sin el conocimiento del usuario.

Sin embargo, las regulaciones que rigen la tecnología de reconocimiento de huellas digitales aún están evolucionando, y el panorama legal en muchos países aún no está claro.

Al usar Canvas Fingerprinting, los operadores de sitios web deben cumplir con las leyes y regulaciones de privacidad locales.

Notas Finales

En este artículo, hemos discutido Canvas Fingerprinting. Este es un método moderno de seguimiento web utilizado por los propietarios de sitios web para identificar a sus usuarios. Explicamos en detalle cómo funciona y cómo eludirlo.

A largo plazo, el seguimiento de sitios web es inevitable. La mejor manera es controlar la forma en que somos rastreados en Internet. Aquí es donde entra en juego el mejor navegador antidetect, Nstbrowser.

La avanzada tecnología de desbloqueo de sitios web y los sistemas de detección permiten ocultar tu privacidad y habilitar el raspado web.

¡Prueba gratis ahora!