La API de Canvas está diseñada para dibujar gráficos en navegadores web. Se puede utilizar para animaciones, gráficos de juegos, visualización de datos, edición de imágenes y procesamiento de video en tiempo real, así como para el seguimiento en línea a través de la identificación de huellas dactilares del navegador. Esta tecnología depende de las variaciones en la forma en que la imagen del lienzo se presenta en diferentes navegadores y plataformas para crear una huella digital personalizada del navegador del usuario. Sin embargo, es posible que se repita en un entorno de dispositivo completamente idéntico.
Verificación de funcionalidad de Canvas
- Canvas 2D API
- Text API for Canvas
- Canvas toDataURL(Comúnmente utilizado para la identificación de huellas dactilares)
- OffscreenCanvas API
- Canvas native
La función Canvas toDataURL también puede ser modificada por los complementos del navegador, pero es fácilmente reconocible.
- Estabilidad
En el mismo dispositivo y entorno de navegador, canvas tiene estabilidad.
- Ruido no antropogénico
Algunos navegadores de huellas dactilares o complementos pueden agregar parámetros de ruido en el lienzo, pero aún pueden ser reconocidos.
Detalles de la imagen
| Imagen de ejemplo | |||
| Tamaño del archivo | 0 bytes | ||
| Cantidad de colores | 0 | ||
| PNG Bloque de datos clave | |||
| Nombre del bloque de datos | Longitud | CRC | Descripción |
La razón de la generación de huellas dactilares de Canvas
La forma en que se presenta la imagen de Canvas en el lienzo puede variar debido al navegador web, sistema operativo, tarjeta gráfica y otros factores, generando así una imagen única que se puede utilizar para crear huellas dactilares.
1. Anti-aliasing
La tecnología de antialiasing es comparable a un filtro de belleza, se utiliza ampliamente. Si la función de suavizado de fuentes no está habilitada en el sistema operativo, algunas fuentes pueden verse mal en la pantalla del ordenador. En general, el sistema operativo Windows activa por defecto el suavizado de fuentes e imágenes. En Mac OS X, el antialiasing parece aplicarse solo a fuentes de un tamaño específico o inferior. No solo a nivel de sistema operativo, algunos navegadores también incorporan su propia tecnología de antialiasing, como Safari que utiliza su propio motor de renderizado de fuentes integrado. Y lo más importante, la tecnología de antialiasing también es efectiva al dibujar fuentes e imágenes en Canvas.
Como se muestra en la imagen, a la izquierda se encuentra el estado sin suavizado de fuentes activado, mientras que a la derecha está activado:
La tecnología anti-aliasing genera algunos píxeles de color impuro, cuyos valores intermedios están influenciados por el perfil de color de la tarjeta gráfica, lo que puede resultar en una variación de color que denominamos ruido. Al dibujar la misma fuente e imagen en un lienzo suficientemente grande y luego calcular todos los datos de píxeles, podemos obtener una huella digital relativamente única.
2. Ajuste de fuente (Font Hinting)
Una característica del ajuste fino es la adaptación a la cuadrícula, es decir, mediante la modificación de la altura y el ancho de los caracteres de la fuente, se alinean con la cuadrícula de píxeles de la configuración de visualización de la pantalla. La imagen se muestra en la pantalla como una cuadrícula de pequeños cuadrados, la fuente puede moverse de izquierda a derecha para asegurar su correcta visualización en la cuadrícula, esto también se hace para que la forma y el diseño de la fuente parezcan aproximadamente iguales en diferentes pantallas.
A través de la siguiente imagen GIF es una colección de imágenes de canvas de decenas de usuarios diferentes, se puede ver intuitivamente, la diferencia en la presentación del mismo código en diferentes entornos de dispositivos:
Como se muestra en los detalles de la imagen anterior, generalmente podemos invocar la función toDataURL para obtener los datos base64 de la imagen Canvas, también podemos obtener el bloque CRC del bloque de datos de la imagen PNG generada desde Canvas. Luego podemos calcular el valor hash de esta cadena (base64 o suma de comprobación CRC) para usarlo como huella digital de Canvas (el algoritmo específico varía según el sitio web).
Atención: Hay muchas razones por las que las huellas dactilares de Canvas varían en diferentes sitios web, el uso de diferentes cadenas (base64 o CRC checksum), diferentes algoritmos de hash (MD5, SHA, MUMUHASH, etc.) pueden hacer que las huellas dactilares de Canvas sean completamente diferentes, pero la huella dactilar real de Canvas es estable, por lo que bajo el mismo navegador y entorno de dispositivo, la huella dactilar de Canvas en el mismo sitio web es fija. Esta es también la base teórica para el uso de las huellas dactilares de Canvas para ayudar a identificar a los usuarios, ya que tiene una propiedad de estabilidad.