Volver al Centro de conocimiento
Huella digital

Huella de Canvas: cómo funciona y qué ayuda

Cómo el renderizado de Canvas se convierte en un identificador estable, por qué la VPN y la navegación privada no lo cambian y cómo funciona la salida determinista por perfil.

BotBrowser Team

Documentación

Prefieres la documentación del producto mantenida?

Este artículo tiene una página equivalente en el centro de documentación. Usa los docs para el flujo canónico, las flags actuales y la referencia duradera.

BotBrowser puede hacer reproducible la lectura de Canvas en una prueba autorizada con un perfil y una semilla declarados. No garantiza el anonimato, la aceptación por los sitios ni un renderizado idéntico entre equipos y pilas gráficas.

Resumen

La huella Canvas procede de píxeles renderizados, por lo que borrar almacenamiento o cambiar de IP no la modifica. Compara un perfil declarado, --bot-noise-seed, pantalla, fuentes y backend gráfico; una salida coincidente es un resultado limitado de Canvas, no una prueba de identidad ni de aceptación por un sitio.

Contenido

Ver la demostración controlada de Canvas

Este vídeo en inglés compara un canvas sintético antes y después de modificar deliberadamente un byte. Ilustra la comparación de bytes de píxeles en un entorno local controlado; no demuestra la identidad de un dispositivo ni diferencias naturales entre dispositivos.

El elemento Canvas de HTML5 existe para dibujar. Gráficos, mapas, editores de imágenes, paneles de firma, juegos y cuadros de mando lo usan, lo que lo convierte en una de las API web más extendidas y en una en la que los sitios corrientes se apoyan todos los días.

Canvas también tiene un efecto secundario. Cuando un navegador dibuja texto o formas en un lienzo, los píxeles exactos dependen de la GPU del dispositivo, del controlador gráfico, del renderizado de texto del sistema operativo, de la gestión del color y del suavizado de bordes. Dos ordenadores que ejecutan las mismas instrucciones de dibujo pueden devolver datos de píxeles ligeramente distintos, mientras que un mismo ordenador devuelve los mismos datos cada vez. Esa repetibilidad es lo que permite usar la salida como señal para reconocer un navegador.

La investigación sobre rastreo ha documentado esto en la práctica. El Princeton Web Census, una medición a gran escala del millón de sitios web principales, encontró scripts de huella de Canvas en más de 14.000 de ellos. Esas cifras pertenecen a ese estudio y no son mediciones de BotBrowser.

La huella de Canvas no necesita ningún aviso de permiso, no guarda nada en el dispositivo y no muestra nada al visitante. Los navegadores no ofrecen un ajuste integrado que desactive la señal, y los píxeles se generan se vea o no un elemento de la página, así que la señal persiste mientras nada cambie la forma en que se produce la salida de Canvas. Las secciones siguientes tratan de cómo se produce la señal, por qué las herramientas de privacidad habituales no la cambian, las distintas formas de tratar la salida de Canvas y cómo comprobar que la salida es estable durante una prueba autorizada.

Diagrama: las mismas instrucciones de dibujo de Canvas pasan por las pilas de renderizado de Windows, macOS y Linux y producen salidas de píxeles distintas; un perfil, una semilla, una pantalla y una configuración gráfica declarados permiten comparar de forma reproducible sin garantizar un renderizado idéntico en todas partes.

Qué mide la huella de Canvas

A un script de huellas no le importa la imagen en sí. Un flujo de recopilación típico tiene cinco pasos breves:

  1. Un script se ejecuta en la página o dentro de un marco incrustado, a menudo incluido en un componente de publicidad o de analítica.
  2. Crea un lienzo y dibuja un patrón de prueba fijo: texto en varias fuentes, degradados, formas superpuestas y colores semitransparentes.
  3. Vuelve a leer los píxeles con toDataURL o getImageData.
  4. Condensa los datos de píxeles en un breve valor resumen.
  5. Envía ese valor a un servidor junto con otras señales del navegador, donde se compara con visitas anteriores.

El valor resumen es útil para un rastreador por tres razones. No cambia al borrar las cookies, no cambia detrás de otra dirección IP y es barato de recopilar en cualquier página. Un sitio que vuelve a ver el mismo valor puede vincular las visitas, y un rastreador presente en muchos sitios puede vincular visitas entre dominios sin relación.

Canvas rara vez se usa solo. Los scripts lo combinan con datos del renderizador WebGL, las fuentes instaladas, las propiedades de pantalla, la zona horaria y el idioma. En conjunto, señales que por separado comparten muchos navegadores pueden aun así distinguir un dispositivo. Canvas aporta la parte que viene de la ruta de renderizado gráfico y de texto, y esa parte es difícil de cambiar editando otros ajustes.

Volver a leer los píxeles también es una operación normal. Los gráficos, los editores de fotos, la captura de firmas y algunos CAPTCHA leen píxeles por razones corrientes, así que la llamada por sí sola no es sospechosa. Lo que preocupa es un patrón de prueba oculto cuyo único propósito es producir un identificador. La documentación de la API Canvas en MDN y la sección de canvas del estándar HTML describen la interfaz en sí, y ambas figuran en las fuentes públicas de abajo.

Quienes auditan un sitio en busca de huellas suelen buscar una forma reconocible más que una sola llamada a la API. Un lienzo que se crea pero nunca se añade a la página, un tamaño fijo pequeño, una frase que usa muchas letras distintas, formas de colores superpuestas y una lectura inmediata seguida de un envío por red son señales típicas. Ninguna de ellas prueba por sí sola una intención, y un gráfico legítimo puede compartir algunas, así que quien revisa las valora junto con lo que el script hace con el resultado.

Por qué el mismo dibujo difiere entre dispositivos

Para una comparación repetible, deja explícita la receta de dibujo: registra width y height del lienzo, la cadena y fuente de fillText(), y compara los bytes de getImageData(0, 0, width, height). Cambiar cualquiera de esas entradas no demuestra que haya cambiado la pila gráfica.

Las especificaciones describen qué significa una llamada de dibujo, no el valor exacto de cada píxel de salida, de modo que cada plataforma tiene margen para diferir. En la práctica contribuyen varias capas de la ruta de renderizado:

  • Rasterización de fuentes. Windows, macOS y Linux usan cada uno su propia pila de renderizado de texto, con formas de glifo, ajustes de hinting y suavizado de bordes distintos.
  • GPU y controlador. Los degradados, la mezcla y la composición pasan por hardware gráfico y controladores que pueden diferir en los últimos bits de cada canal de color.
  • Gestión del color. Los sistemas operativos aplican perfiles de color y tratamiento de gamma distintos, lo que desplaza los valores dentro de degradados y formas translúcidas.
  • Suavizado de bordes. El suavizado varía según la plataforma, la versión del controlador y los ajustes del sistema. Las diferencias son invisibles a simple vista, pero están en los datos de píxeles.
  • Aritmética de coma flotante. Las curvas y las operaciones geométricas pueden redondear de otra forma según el hardware, lo que cambia unos pocos píxeles en los bordes.

Las fuentes añaden una capa más. Cuando un script pide una fuente que no está instalada, la plataforma recurre a una tipografía por defecto, y esa elección depende del sistema operativo y de sus fuentes instaladas. El mismo texto dibujado con el mismo nombre de fuente puede producir glifos distintos en dos sistemas, y por eso las fuentes se tratan como una superficie de huella propia.

Cada diferencia es diminuta, pero a una huella le basta con que un píxel cambie. La combinación es estable en una misma máquina y varía entre máquinas. También sobrevive a reiniciar el navegador, vaciar la caché o abrir una ventana privada, porque ninguna de esas acciones cambia la pila gráfica subyacente.

La misma lógica funciona a la inversa. Dos máquinas con la misma versión de sistema operativo, GPU, controlador y fuentes pueden devolver una salida idéntica, así que Canvas por sí solo acota el campo en lugar de señalar un único dispositivo. Por eso los rastreadores lo combinan con otras señales, y por eso una defensa que solo mira Canvas deja intacto el resto de la combinación.

Por eso Canvas está tan ligado al resto del perfil de un dispositivo. Un navegador que declara una GPU de Apple y un agente de usuario de Mac mientras produce una salida de Canvas típica del renderizado de texto de Linux es incoherente por dentro, y la coherencia entre señales es justo lo que mira quien analiza huellas.

Por qué la VPN, la navegación privada y las extensiones se quedan cortas

El límite se ve en las API: una VPN cambia direcciones visibles para RTCPeerConnection o HTTP, mientras que la identificación por Canvas lee píxeles con getImageData() o toDataURL(). Borrar localStorage o cookies cambia el estado guardado, no el mapa de bits que devuelven esas llamadas.

Cada herramienta de privacidad habitual actúa en una capa distinta de aquella de la que lee Canvas.

VPN y proxies. Una VPN o un proxy cambia la dirección de red que ve un sitio. La salida de Canvas se produce dentro del navegador a partir del renderizado local y nunca viaja por la ruta de red, así que dos dispositivos detrás de la misma VPN siguen devolviendo cada uno su propia salida de Canvas.

Navegación privada. Las ventanas privadas descartan las cookies, el historial y el almacenamiento del sitio cuando termina la sesión. No cambian la ruta de renderizado, así que la salida de Canvas en una ventana privada coincide con la de una ventana normal. La guía sobre navegación privada explica qué cambian y qué no cambian estos modos.

Extensiones que bloquean Canvas. Bloquear la lectura hace que las llamadas fallen o devuelvan datos vacíos. Muy pocos navegadores reales se comportan así, de modo que el propio bloqueo puede destacar, y las páginas que usan Canvas con fines legítimos pueden dejar de funcionar.

Extensiones que añaden ruido aleatorio. El ruido aleatorio produce un valor nuevo en cada carga. Eso evita un identificador estable, pero un valor que cambia en cada visita también es inusual, y el ruido añadido en la capa de scripts puede no parecerse a la variación natural entre dispositivos reales.

Extensiones que devuelven datos falsos. Los píxeles sustituidos pueden romper gráficos, mapas y CAPTCHA, y a menudo no concuerdan con la GPU, las fuentes y el sistema operativo que el mismo navegador declara en otros lugares.

Aleatorización integrada. Algunos navegadores, entre ellos Brave, añaden pequeños cambios aleatorios a la salida de Canvas por sitio. Es mejor que bloquear, pero el resultado puede seguir sin encajar con las señales de GPU, fuentes y sistema operativo que declara el mismo navegador, y cada implementación decide qué operaciones de Canvas cubre.

Resultados desiguales entre herramientas. Ninguna herramienta cambia todas las capas. Una VPN cambia la dirección de red pero no los píxeles, la navegación privada cambia el almacenamiento pero no los píxeles, y una extensión cambia lo que ve un script sin cambiar cómo se renderiza la página. Cada una resuelve una preocupación y deja la señal de Canvas como estaba, por lo que una respuesta duradera tiene que actuar sobre los propios píxeles.

Avisos de permiso. Tor Browser pregunta antes de que un sitio pueda leer los datos de imagen de Canvas. Eso hace visible la lectura, pero deja la decisión al visitante, y una petición rechazada puede romper la página que la hizo.

Cuatro formas de tratar la salida de Canvas

Documenta la elección con los dos controles que la determinan: --bot-noise-canvas=true activa la política en la capa de renderizado y --bot-noise-seed=42 fija un patrón de ruido reproducible. No compares una ejecución sin semilla indicada con otra de semilla fija.

Los enfoques se diferencian en lo que sacrifican. Dos preguntas facilitan la comparación: ¿la salida se mantiene estable con la misma configuración? y ¿se mantiene coherente con todo lo demás que declara el navegador?

  • Bloqueo. La salida es estable porque siempre está vacía, pero es incoherente con un navegador normal y probablemente rompa páginas que necesitan Canvas.
  • Ruido aleatorio. La salida cambia en cada carga o en cada origen. Eso limita la vinculación dentro del ámbito del ruido, pero no da un resultado repetible para las pruebas y puede no coincidir con otras señales.
  • Datos falsos. Un valor sustituto fijo es repetible, pero no guarda relación con lo que la página dibujó de verdad, así que las funciones que dependen del dibujo y otras señales pueden contradecirlo.
  • Salida determinista por perfil. La salida de Canvas sigue al perfil cargado y a una semilla de ruido fija, de modo que el mismo perfil y la misma semilla dan siempre el mismo resultado, mientras que otro perfil u otra semilla dan uno distinto.

La última opción importa para las pruebas autorizadas y la investigación de privacidad porque hace reproducible el comportamiento de Canvas. Si una prueba muestra un cambio en la salida, la causa es el perfil o la semilla que se cambió, no ruido sobrante de una ejecución anterior.

Qué opción conviene depende del objetivo. El bloqueo sirve para un entorno de solo lectura muy restringido en el que se aceptan páginas rotas. El ruido aleatorio sirve para la navegación diaria en la que solo se quiere evitar que te vinculen entre sitios. La salida determinista sirve para trabajos en los que un resultado debe repetirse y explicarse, como las comprobaciones de regresión en un sitio que gestionas o la investigación que compara una configuración con otra.

El determinismo no significa que la señal desaparezca. Canvas es una señal entre muchas, y un valor estable que no concuerda con WebGL, las fuentes, la zona horaria, la configuración regional o la ubicación de red puede seguir pareciendo incoherente. Por eso las comprobaciones de la última sección van más allá de Canvas.

Cómo trata BotBrowser Canvas

La documentación de Canvas de BotBrowser describe una protección por perfil para la lectura de Canvas. Cuando se carga un perfil, BotBrowser aplica ruido determinista a la salida de Canvas 2D en el nivel de renderizado y no mediante inyección de JavaScript, y la documentación indica que esto abarca la lectura de píxeles y la medición de texto. Cuatro comportamientos documentados importan para el escenario anterior:

  • El ruido de Canvas está activado por defecto y se puede fijar de forma explícita con --bot-noise-canvas=true o --bot-noise-canvas=false.
  • --bot-noise-seed selecciona un patrón de ruido concreto y reproducible. Cada semilla produce una salida de Canvas única pero estable, y la misma semilla se aplica también a otras superficies como WebGL, WebGPU y las métricas de texto.
  • Con un perfil cargado, BotBrowser usa sus bibliotecas de fuentes integradas y su renderizado para comparar la salida de Canvas entre hosts bajo las condiciones documentadas de perfil, semilla, pantalla y gráficos; no garantiza una salida idéntica en todos los hosts o pilas gráficas.
  • BotBrowser 150 mantiene activa la protección de Canvas 2D para los espacios de color estándar y de gama amplia, incluido display-p3.

Un arranque mínimo que fija tanto el perfil como la semilla tiene este aspecto:

chromium-browser --bot-profile="path/to/profile.enc" --bot-noise-seed=42

Como cada semilla da un resultado estable propio, un equipo que ejecuta varias sesiones puede asignar a cada sesión su propia semilla. Así las sesiones siguen siendo distintas entre sí y se repiten con exactitud cuando se reutiliza una semilla, que es la propiedad que necesita una prueba de regresión.

Mantén la configuración sencilla. Otra herramienta que también modifique la salida de Canvas, como una extensión, hace que los resultados sean más difíciles de interpretar, porque entonces dos capas dan forma a los mismos píxeles.

Para la revisión, la documentación de CanvasLab describe cómo registrar con --bot-canvas-record-file las llamadas de Canvas 2D, WebGL, WebGL2 y WebGPU que hace una página, para que un equipo vea qué dibuja y qué lee realmente una página antes de decidir qué probar.

Comprobar la estabilidad y resolver diferencias

Una comprobación útil tiene tres pasos y no necesita código de recopilación propio. Ejecútala solo en páginas y sistemas que estés autorizado a probar.

  1. Arranca con un perfil y un --bot-noise-seed fijo, abre una página pública de prueba de huellas y anota la salida de Canvas que informa.
  2. Recarga, y después cierra y reinicia la sesión con el mismo perfil y la misma semilla. La salida debería coincidir con la de la primera ejecución.
  3. Cambia la semilla o el perfil. La salida debería cambiar.

Mantén acotado y documentado el alcance de una prueba. Usa páginas que sean tuyas o para las que tengas permiso por escrito, y trata el resultado solo como evidencia sobre la salida de Canvas, no como un veredicto sobre otra superficie de huella ni sobre cómo reaccionará un sitio concreto.

Anota la configuración junto a cada resultado. La versión de BotBrowser, el archivo de perfil, el valor de la semilla, el sistema operativo anfitrión y si la ejecución fue sin interfaz o con interfaz bastan para que una ejecución posterior se compare con justicia. Sin ese registro, una diferencia entre dos ejecuciones no se puede atribuir a una causa.

Cuando el resultado no es el esperado, la documentación de BotBrowser señala una breve lista de causas:

  • La salida cambia entre sesiones con el mismo perfil. Sin una semilla fija, el ruido varía por sesión por diseño, así que confirma el mismo valor de --bot-noise-seed.
  • La salida difiere entre ejecuciones sin interfaz y con interfaz. Confirma --bot-noise-canvas=true y el mismo perfil en ambas.
  • La salida se parece a la salida bruta del sistema. Confirma que el perfil se cargó bien y lee los mensajes de arranque.
  • La salida difiere en otro sistema operativo anfitrión. Comprueba el perfil, la semilla, la pantalla, el backend gráfico y las fuentes antes de interpretar la diferencia; un perfil permite una comparación reproducible, pero no garantiza una salida idéntica en todos los hosts.
  • Canvas de gama amplia se comporta de forma distinta a Canvas estándar. Usa BotBrowser 150.0.7871.46 o posterior con un paquete de perfil que coincida.

Lee con cuidado el primer resultado. Una sola ejecución solo muestra que la salida existe. La comparación entre recargas, reinicios, semillas y perfiles es lo que muestra si la salida se comporta como se espera, y que no haya cambio en el paso tres informa tanto como una discrepancia en el paso dos.

Después comprueba lo que Canvas no cubre. Compara los valores del renderizador WebGL, las fuentes instaladas, la zona horaria, la configuración regional y la ubicación de red con el mismo perfil, porque un resultado de Canvas estable junto a una zona horaria o un idioma que no concuerdan con el perfil sigue dando una imagen incoherente. Los artículos sobre la huella de WebGL, la huella de fuentes y la reproducibilidad de la semilla de ruido tratan esas señales vecinas.

BotBrowser aplica ruido determinista de Canvas 2D guiado por el perfil en el nivel de renderizado, reproducible con --bot-noise-seed bajo condiciones declaradas, para que un equipo compare lecturas de Canvas en el escenario de pruebas autorizadas e investigación de privacidad descrito aquí. BotBrowser no puede garantizar anonimato ni que un sitio no identifique, rastree o bloquee al visitante; tampoco controla los scripts de recopilación de Canvas ni la agrupación de dispositivos en el servidor. La reproducibilidad entre hosts requiere mantener constantes el perfil, la semilla, la pantalla, el backend gráfico y las fuentes, y no implica que toda pila gráfica produzca una salida idéntica. Esto no sustituye la coherencia de las señales WebGL, fuentes, zona horaria, configuración regional y proxy con el mismo perfil.

Para más contexto, consulta Fingerprinting por medicion de texto: rastreo subpixel.

Conclusión práctica

En una comparación autorizada, fija la receta de dibujo y anota el perfil, --bot-noise-seed, pantalla, fuentes y backend gráfico junto a la lectura de píxeles. Una diferencia inesperada es primero una cuestión de configuración; ni un digest estable ni uno cambiado prueban anonimato o la decisión de un sitio remoto.

Fuentes públicas

#Canvas#Huella Digital#Html5#Privacidad#Rastreo#Protección De Canvas#Huella Del Navegador#Anti-Rastreo

Este artículo forma parte de la guía: ¿Qué es la huella digital del navegador?

Lleva BotBrowser de la investigación a producción

Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.