Canvas Fingerprinting: como funciona y como protegerse

¿Qué es el fingerprinting con Canvas?

El elemento Canvas de HTML5 fue diseñado para dibujar gráficos, renderizar diagramas y crear visualizaciones interactivas en el navegador. Es una de las APIs web más usadas, impulsando desde paneles de datos hasta juegos que se ejecutan en el navegador.

Sin embargo, Canvas tiene un efecto secundario: cuando el navegador renderiza texto o formas en un elemento Canvas, la salida a nivel de píxel depende de la GPU del dispositivo, los controladores gráficos, la composición del sistema operativo, el motor de renderizado de fuentes y la implementación del antialiasing. Esto significa que dos ordenadores distintos que ejecuten las mismas instrucciones de Canvas producirán datos de píxeles ligeramente diferentes.

Esa variación es consistente y reproducible en el mismo dispositivo, lo que la convierte en una señal estable para identificar navegadores. Según la investigación del Web Transparency and Accountability Project de la Universidad de Princeton, el fingerprinting con Canvas se encontró en más del 5% de los 100,000 sitios principales ya en 2014, y su presencia ha crecido desde entonces. Un estudio de 2020 publicado en USENIX Security Symposium mostró que el fingerprinting basado en Canvas puede distinguir dispositivos con más del 99% de precisión cuando se combina con otras señales del navegador.

Lo preocupante es que el fingerprinting con Canvas no requiere permisos, no almacena datos en el dispositivo y es invisible para los usuarios. No hay solicitud, ni banner de cookies, ni mecanismo de exclusión incorporado en los navegadores.

El flujo de recolección que ejecutan los trackers es corto, silencioso y reutilizable en millones de páginas. El diagrama de abajo traza qué pasa entre que un script de tracker llega a la página y un identificador estable acaba en una base de datos de device-graph.

El paso de recolección sale barato para el tracker y es totalmente opaco para el visitante. La parte cara vive río abajo en el device graph: cada sitio que distribuye el mismo tracker contribuye hashes que se agrupan, construyendo un perfil que sigue al usuario por dominios sin relación. El trabajo del defensor no es bloquear la llamada de dibujo, sino hacer que la salida renderizada sea estable, realista y consistente con todo lo demás que el navegador reporta.

Por qué la salida de Canvas varía entre dispositivos

Para entender por qué Canvas produce salidas únicas, ayuda conocer la canalización de renderizado:

1. Rasterización de fuentes: los sistemas operativos usan distintos motores de renderizado de texto (DirectWrite en Windows, Core Text en macOS, FreeType en Linux). Cada motor produce formas de glifos, hinting y patrones de antialiasing sutilmente distintos.

2. Renderizado por GPU: la tarjeta gráfica y sus controladores afectan cómo se procesan formas, degradados y operaciones de composición. Una GPU NVIDIA produce una salida sub-píxel ligeramente distinta a una AMD o Intel, incluso con las mismas instrucciones de dibujo.

3. Gestión del color: los sistemas operativos aplican diferentes perfiles de color y corrección gamma. Un degradado Canvas renderizado en un macOS calibrado se verá distinto al mismo degradado en una instalación por defecto de Windows.

4. Algoritmos de antialiasing: el enfoque para suavizar bordes varía según la plataforma, la versión del driver de GPU y la configuración del SO. Estas diferencias son pequeñas para el ojo humano pero suficientes para producir un hash distinto cuando los datos de píxeles se convierten en cadena.

5. Precisión de coma flotante: distintas arquitecturas de CPU pueden manejar operaciones en coma flotante de forma ligeramente distinta, afectando la renderización de curvas bezier y cálculos de transformaciones.

Cuando la salida de píxeles se convierte en data URL o en un arreglo ImageData y se hashea, el resultado es un identificador estable y específico del dispositivo. Este hash no cambia entre sesiones, sobrevive al borrado de caché y persiste en ventanas de incógnito.

El diagrama de abajo contrasta las tres principales plataformas anfitrionas lado a lado. Cada columna muestra la cadena de componentes que contribuyen al búfer de píxeles final, y cada cadena produce un hash distinto incluso cuando las llamadas de dibujo JavaScript son idénticas.

Por qué las herramientas de privacidad comunes no bastan

Varios enfoques intentan abordar el fingerprinting con Canvas, pero cada uno tiene limitaciones importantes:

VPNs y servidores proxy

Una VPN cambia tu dirección IP pero no afecta la salida de Canvas. El fingerprinting con Canvas opera totalmente dentro del motor de renderizado del navegador y no tiene relación con el tráfico de red. Dos dispositivos detrás de la misma VPN seguirán produciendo fingerprints de Canvas diferentes.

Navegación privada / incógnito

Los modos privados borran cookies, historial y almacenamiento local al finalizar la sesión. No modifican la canalización de renderizado de Canvas. Tu fingerprint de Canvas en modo incógnito es idéntico al de una ventana normal.

Extensiones del navegador

Las extensiones que bloquean o modifican el acceso a Canvas enfrentan un reto fundamental: operan a nivel de la API JavaScript, no del renderizado. Enfoques comunes incluyen:

• Bloquear Canvas por completo: esto es fácilmente detectable porque los sitios pueden comprobar si las operaciones de Canvas devuelven resultados vacíos o errores. Un Canvas bloqueado es en sí mismo una señal distintiva.
• Añadir ruido aleatorio: inyectar píxeles al azar en la salida del Canvas cambia el fingerprint en cada carga. Aunque esto impide el seguimiento estable, crea otro problema: un fingerprint que cambia constantemente indica que el navegador usa herramientas de privacidad.
• Devolver datos falsos: reemplazar la salida de Canvas con datos precomputados rompe sitios que dependen legítimamente de Canvas (gráficos, CAPTCHA, mapas) y suele producir salidas que no coinciden con otras señales del navegador.

El problema central es que las extensiones pueden interceptar llamadas a la API pero no pueden controlar la canalización de renderizado real. Cualquier modificación es detectable mediante comprobaciones de consistencia entre lo que el navegador informa y lo que realmente renderiza.

Aleatorización a nivel de navegador

Algunos navegadores implementan aleatorización de Canvas (por ejemplo, la función de ruido de Canvas en Brave). Esto añade pequeñas perturbaciones por origen. Aunque es mejor que las extensiones, la aleatorización tiene compensaciones:

• El patrón de ruido puede analizarse y diferenciarse de la variación real del dispositivo
• La salida aleatorizada puede no ser consistente con las señales de GPU, fuentes y SO del navegador
• Algunas implementaciones solo aleatorizan ciertas operaciones de Canvas, dejando otras como identificadores

Enfoque a nivel de motor de BotBrowser

BotBrowser adopta un enfoque distinto. En lugar de bloquear, aleatorizar o interceptar Canvas a nivel de API, BotBrowser controla la salida de renderizado a nivel del motor del navegador para producir resultados realistas y consistentes que coinciden con un perfil de dispositivo completo.

El diagrama abajo apila los cuatro modelos de defensa habituales contra el tipo de inspección que ejecuta un script de detección moderno. Cada capa superior es detectable porque la inspección ve evidencia de que la capa fue insertada. El renderizado a nivel de motor no produce ninguna capa insertada en absoluto.

Cómo funciona

Al cargar un perfil de fingerprint, BotBrowser configura toda la canalización de renderizado para que coincida con las características del dispositivo en dicho perfil. La salida de Canvas no se modifica después de renderizar; la propia renderización produce una salida consistente con el dispositivo objetivo:

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

Esto significa:

• El hash de Canvas es estable entre sesiones, igual que en un dispositivo real
• La salida es coherente con las señales de GPU, SO y fuentes del perfil
• Los sitios que usan Canvas para fines legítimos (gráficos, mapas, juegos) funcionan de forma normal
• No hay hooks ni intercepciones a nivel de API que puedan detectarse

Control determinista de ruido

Para casos que requieren reproducibilidad entre ejecuciones de prueba, BotBrowser soporta una semilla de ruido:

chrome --bot-profile="/path/to/profile.enc" \
       --bot-noise-seed=12345

El mismo perfil y semilla siempre producen una salida de Canvas idéntica, incluso tras reinicios del sistema o en distintos sistemas operativos anfitriones. Esto es valioso para:

• Pruebas de regresión donde la salida de Canvas debe compararse entre ejecuciones
• Escenarios de investigación que requieren condiciones reproducibles
• Pipelines de CI/CD que validan la consistencia de fingerprints

Consistencia multiplataforma

Una de las capacidades más importantes de BotBrowser para la protección de Canvas es la consistencia multiplataforma. Un perfil de Windows cargado en macOS o Linux produce una salida de Canvas que coincide con las características de renderizado de Windows definidas en el perfil, no con la canalización de renderizado del sistema anfitrión.

Esto es posible porque BotBrowser controla el renderizado a nivel del motor. Una extensión o un enfoque a nivel de API no pueden anular las diferencias fundamentales de renderizado entre sistemas operativos.

Registro forense de Canvas

Para investigadores y desarrolladores que necesitan auditar el comportamiento de Canvas, BotBrowser puede registrar todas las operaciones de Canvas:

chrome --bot-profile="/path/to/profile.enc" \
       --bot-canvas-record-file="/path/to/canvas-log.json"

Esto captura cada llamada a la API de Canvas, sus parámetros y la salida resultante, proporcionando una traza completa para análisis sin requerir inyección de código.

Guía de configuración

Protección básica con Playwright

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

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

  const context = await browser.newContext({ viewport: null });
  const page = await context.newPage();

  await page.goto('https://example.com');
  // La salida de Canvas será consistente con el perfil cargado
  await browser.close();
})();

Modo determinista con Puppeteer

const puppeteer = require('puppeteer-core');

const browser = await puppeteer.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-noise-seed=42',
  ],
  headless: true,
  defaultViewport: null,
});

Combinado con otras protecciones

Canvas es solo una señal entre muchas. Para una protección integral, combine la configuración de Canvas con la zona horaria, la locale y la configuración de proxy:

chrome --bot-profile="/path/to/profile.enc" \
       --bot-noise-seed=12345 \
       --proxy-server="socks5://user:pass@proxy:1080" \
       --bot-config-timezone="America/New_York" \
       --bot-config-locale="en-US" \
       --bot-config-languages="en-US,en"

Verificación

Después de lanzar BotBrowser, verifique que la protección de Canvas funcione correctamente:

const page = await context.newPage();

// Renderizar contenido Canvas y capturar el hash
const hash1 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  c.width = 200;
  c.height = 50;
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('BotBrowser Canvas test', 2, 2);
  ctx.fillStyle = 'rgba(0, 50, 255, 0.5)';
  ctx.fillRect(50, 10, 100, 30);
  return c.toDataURL();
});

// Recargar y renderizar de nuevo
await page.reload();
const hash2 = await page.evaluate(() => {
  const c = document.createElement('canvas');
  c.width = 200;
  c.height = 50;
  const ctx = c.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillStyle = '#333';
  ctx.fillText('BotBrowser Canvas test', 2, 2);
  ctx.fillStyle = 'rgba(0, 50, 255, 0.5)';
  ctx.fillRect(50, 10, 100, 30);
  return c.toDataURL();
});

console.log('Canvas output stable:', hash1 === hash2);

También puede validar con herramientas públicas de prueba de fingerprints como CreepJS o BrowserLeaks. Estas deberían reportar un hash de Canvas consistente sin anomalías.

Qué comprobar:

• El hash de Canvas permanece igual tras recargar la página dentro de la misma sesión
• El hash de Canvas coincide entre sesiones al usar el mismo perfil y semilla de ruido
• Perfiles diferentes producen hashes de Canvas distintos
• Las herramientas de prueba de fingerprints no muestran advertencias relacionadas con Canvas

La matriz de verificación que usan los defensores para confirmar que una protección de Canvas está funcionando se muestra abajo. Cada fila representa un entorno, cada columna una propiedad que debe cumplirse. Una protección que falla cualquier celda de la matriz puede ser detectada por un fingerprinter determinado.

Buenas prácticas

1. Use siempre un perfil completo. La protección de Canvas funciona mejor cuando todas las señales son coherentes. Cargar un perfil asegura que Canvas, WebGL, fuentes y otras señales se alineen con la misma identidad de dispositivo.

2. Use modo determinista para pruebas. La bandera --bot-noise-seed garantiza resultados reproducibles, esencial para pruebas automatizadas y pipelines de CI.

3. No mezcle extensiones que modifiquen Canvas con BotBrowser. Las extensiones que modifican Canvas entrarán en conflicto con el control a nivel de motor de BotBrowser. BotBrowser gestiona la protección de Canvas de forma nativa.

4. Ajuste la ubicación del proxy al perfil. Un perfil configurado para un dispositivo Windows en EE. UU. debería usar un proxy ubicado en EE. UU. La inconsistencia entre la ubicación del proxy y el perfil debilita la coherencia del fingerprint.

5. Registre operaciones de Canvas para auditoría. Use --bot-canvas-record-file en desarrollo para verificar las llamadas Canvas del sitio objetivo y confirmar el manejo por parte de BotBrowser.

Preguntas frecuentes

¿El fingerprinting con Canvas funciona en modo incógnito?

Sí. El modo incógnito no cambia la canalización de renderizado del navegador. El fingerprint de Canvas es idéntico en ventanas normales e incógnito.

¿Pueden los sitios detectar que Canvas está protegido?

Si la protección se implementa bloqueando o aleatorizando Canvas, entonces sí, la inconsistencia o ausencia de datos de Canvas es en sí misma una señal. BotBrowser evita esto generando una salida realista y consistente mediante el motor de renderizado en lugar de interceptar llamadas a la API.

¿La protección de Canvas de BotBrowser afecta la funcionalidad del sitio?

No. Porque BotBrowser controla la canalización de renderizado en lugar de bloquear las llamadas a la API, todas las funciones dependientes de Canvas (gráficos, mapas, juegos, CAPTCHA) funcionan con normalidad.

¿Cuántos fingerprints únicos puede producir BotBrowser?

Cada perfil de fingerprint genera un hash de Canvas distinto. BotBrowser ofrece cientos de perfiles y los clientes empresariales pueden generar perfiles personalizados para configuraciones de dispositivos específicos.

¿La protección de Canvas funciona en todas las plataformas?

Sí. BotBrowser soporta Windows, macOS y Linux como sistemas anfitriones, y puede emular la salida de Canvas para cualquier plataforma objetivo compatible sin depender del sistema anfitrión.

¿Cuál es el impacto en rendimiento de la protección de Canvas?

Mínimo. Como la protección opera dentro del motor de renderizado y no mediante post-procesado o intercepción de API, las operaciones de Canvas se ejecutan casi a velocidad nativa.

Resumen

El fingerprinting con Canvas es una de las técnicas de seguimiento más habituales y difíciles de contrarrestar en la web. BotBrowser lo aborda en la fuente controlando la canalización de renderizado a nivel de motor del navegador, produciendo una salida consistente y realista que coincide con perfiles completos de dispositivo. Combinado con WebGL protection, audio fingerprint control y comprehensive profile management, BotBrowser ofrece protección de privacidad consistente, realista y práctica para el uso diario.