Canvas

1. O que é Canvas na Impressão Digital do Navegador

Canvas (HTMLCanvasElement) é uma API amplamente suportada usada para renderizar gráficos 2D e imagens na web. Embora seja principalmente usada para desenhar formas e manipular imagens, tem sido amplamente adotada em mecanismos de impressão digital de navegadores devido à sua saída de pixel semi-determinística.

Todo navegador que usa Canvas pode renderizar o mesmo texto, gradientes ou formas com sutis diferenças visuais, influenciadas por:

• Estado de aceleração da GPU (habilitado/desabilitado)
• Mecanismo de renderização de fonte (FreeType, DirectWrite, CoreText, etc.)
• Antialiasing, precisão de subpixel
• Pilha de processamento de Canvas e imagem (Skia em navegadores baseados em Chromium)

Essas diferenças no nível do pixel formam uma linha de base para identificar dispositivos de forma única entre os sites.

2. Como as Plataformas Detectam Impressões Digitais de Canvas

A impressão digital de Canvas é feita adicionando um elemento DOM <canvas> oculto e executando comandos de desenho padronizados para extrair dados de pixel rasterizados.

Exemplo de código de teste usado por plataformas de impressão digital:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");

// Draw a styled text
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
ctx.fillStyle = "#00f";
ctx.fillText("FlashID", 2, 2);

// Extract base64-encoded PNG
const dataURL = canvas.toDataURL();

Plataformas de impressão digital analisam esses dados para:

1. Comparar saída pixel a pixel
2. Gerar hash das saídas PNG/JPEG codificadas
3. Detectar impressões digitais do pipeline de renderização — por exemplo, sutis diferenças no layout do texto ou no manuseio de gradientes
4. Usar propriedades Canvas2DRenderingContext para inferência de recursos
5. Correlacionar com a saída WebGL e WebGPU para construir uma identidade de renderização consistente

Além disso:

• Navegadores com navigator.userAgent falsificado, mas motores de renderização reais, ainda gerarão saída Canvas única
• Sistemas headless e de automação mostram comportamento de renderização inconsistente, o que é um sinal de alerta para detecção

3. Como o FlashID Mascara Impressões Digitais de Canvas

O FlashID oferece uma técnica de mascaramento de canvas multicamadas que protege contra identificação baseada em canvas e análise de renderização de texto.

A proteção do FlashID inclui:

1. Mascaramento de Canvas.toDataURL e toBlob

   • O FlashID intercepta a saída de dados da renderização de canvas e a substitui por hashes base64 estáveis pré-gerados
   • Simula fontes PNG falsas enquanto mantém o mesmo comportamento de codificação e esquema de compressão

2. Renderização Virtual de Texto e Formas

   • Produz uma saída de pixel falsa consistente para qualquer padrão de desenho
   • Comportamento de antialiasing falso, imitando desktops padrão, dispositivos móveis ou até mesmo framebuffers de sistemas legados

3. Falsificação de Canvas2DRenderingContext

   • Oculta/minimiza a detecção baseada em chamadas como isPointInPath, measureText, getImageData, createLinearGradient, etc.

4. Mecanismo de Consistência Interna de Fonte

   • Emula a pilha de renderização de fontes como CoreText, Skia, Freetype sem depender da rasterização de fontes reais do sistema operacional

5. Recursos de Renderização Antiforense

   • Permite aos usuários randomizar ou bloquear respostas de renderização por sessão do navegador
   • Suporta totalmente estratégias de renderização não determinísticas (randomizadas), estáticas (predefinidas) ou normalizadas (misturadas)

6. Integração com WebGL, WebGPU e ImageData

   • Cria perfis de renderização GPU+Canvas unificados e correspondentes
   • Evita alarmes de incompatibilidade entre APIs de renderização

Plataformas que dependem do Canvas para impressão digital (incluindo Panopticlick, FingerprintJS e motores comerciais de AML) são derrotadas pelo FlashID. Nosso mascaramento de canvas não requer patches de navegador, hooks especiais ou modificações radicais — ele funciona silenciosamente enquanto preserva a lógica de renderização e o comportamento esperado.

Você Também Pode Gostar