Cómo evitar las huellas dactilares de Canvas

¿Qué es Canvas?

Canvas es una nueva etiqueta añadida en HTML5, que se utiliza con la etiqueta correspondiente API para generar imágenes y manipular contenido de imágenes en tiempo real en páginas web.

¿Para qué se puede usar Canvas?

• Transformación y composición de gráficos (como escalado, rotación, superposición, etc.)

• Procesamiento de imágenes y vídeos

• Implementación de animación

• Creación de minijuegos

Con el desarrollo de Internet, los usuarios tienen mayores requisitos visuales e interactivos para las páginas web, que no se pueden satisfacer con el desarrollo front-end web tradicional. Por lo tanto, al usar la potente capacidad de dibujo de Canvas, puede obtener contenido más enriquecido mostrado en páginas web, transmitiendo mejores experiencias visuales e interactivas a los usuarios.

Aquí hay un ejemplo:

<script type="text/javascript"> & nbsp; ; &nb sp;

// Obtener el objeto DOM correspondiente al elemento canvas

var canvas_xy = document.getElementById(“canvas_xy”);

// Obtener el objeto canvasRenderingContent2D que dibuja en el lienzo

var ctx = canvas_xy.getContext(“2d”);

// Establecer el punto de inicio para el dibujo

ctx.moveTo(100, 100);

// establecer el siguiente punto para dibujar

ctx.lineTo(200, 200);

// establecer el siguiente punto a dibujar

ctx.lineTo(400, 100);

//fin del dibujo

ctx.closePath();

// establecer el ancho de la línea

ctx.lineWidth = 10;

// establecer el estilo del dibujo

ctx.strokeStyle = “red”;

//dibuja la línea entre los puntos

ctx.stroke();

// Establecer el estilo de relleno

ctx.fillStyle = “green”;

// Rellenar la vista actual

ctx.fill();

</script>

Esto es lo que obtienes:

Sin embargo, con el fortalecimiento de cada navegador para proteger la privacidad de los usuarios, estos ya no proporcionan una identificación válida del usuario a los sitios web y bloquean las técnicas de seguimiento que suelen utilizar. Por ejemplo, las solicitudes entre dominios ya no llevan cookies, se activa el modo incógnito, etc. Esto imposibilita identificar si se trata del mismo usuario que completa dos visitas por separado, lo que dificulta que los sitios web rastreen el comportamiento del usuario.

Aquí es donde entra en juego la identificación por huella digital del navegador. A través del navegador, el sitio web obtiene información sobre el tipo de hardware del dispositivo del usuario, el sistema operativo, el agente de usuario, la fuente del sistema, el idioma, la resolución de pantalla, los complementos del navegador, las extensiones del navegador, la configuración del navegador, la diferencia horaria, la ubicación geográfica y mucha otra información, conocida como huellas digitales del navegador. Sin embargo, estas huellas digitales son similares a la altura, la edad, etc., de una persona, por lo que existe una alta probabilidad de repetición. Por lo tanto, no pueden servir como identificador único de una persona.

La toma de huellas dactilares avanzada basada en HTML5 ofrece nuevas soluciones, De los cuales la toma de huellas dactilares de Canvas es uno de los más utilizados. Como se mencionó anteriormente, la tecnología Canval se puede usar para dibujar imágenes en tiempo real en una página, pero diferentes computadoras pueden dibujar imágenes con diferencias sutiles, que generalmente no son reconocibles para el ojo humano. Sin embargo, al calcular los datos de la imagen generada, se puede generar un valor de huella digital para identificar a diferentes usuarios.

El sitio web que visitamos tiene una imagen de Canvas oculta en la página web, generada por la API Canvas de HTML5. Si dos usuarios visitan el sitio web en el mismo dispositivo con el mismo sistema operativo y navegador, la imagen de Canvas será exactamente la misma. Si lo hacen en dos computadoras diferentes con distintas configuraciones, las huellas digitales de Canvas generalmente serán diferentes.

Aquí están las huellas digitales de dos computadoras detectadas por https://browserleaks.com/canvas.

Puede evitar la huella digital de Canvas implementando estos métodos:

• Instalar complementos del navegador

Google App Store tiene complementos que modificar aleatoriamente la huella digital del lienzo, como por ejemplo Bloque de huella digital del lienzo. El principio es que cada vez que se inyecta un ruido aleatorio (invisible para el ojo humano) en el lienzo, se afecta el resultado de la verificación CRC de los datos de la imagen.

Esta es la detección del complemento:

• Desactivar aceleración de hardware

Por ejemplo, vaya a Configuración avanzada → Sistema en Chrome, busque "Usar aceleración de hardware cuando esté disponible", desactívela y reinicie Chrome. De esta manera, verás que, independientemente del ordenador que uses, obtendrás la misma huella digital de Canvas.

• Usar un navegador antidetección

Un navegador antidetección proporciona entornos de navegación independientes con huellas digitales únicas. Similar al primer método, el principio de usar un navegador antidetección para evitar las huellas digitales también genera ruido en el lienzo. Pero como el ruido se implementa en el núcleo del navegador, un navegador antidetección funciona mejor ocultando la huella digital real de Canvas. Incluso puede imitar diferentes huellas digitales de Canvas para "engañar" al sitio web y hacerle creer que muchos usuarios diferentes lo están visitando.