A API Canvas foi projetada para desenhar gráficos em um navegador da web. Ele pode ser usado para animação, gráficos de jogos, visualização de dados, edição de imagens, processamento de vídeo em tempo real, etc. Também pode ser usado para rastreamento online por meio de impressão digital do navegador. A tecnologia depende de mudanças na forma como uma imagem de tela é renderizada em diferentes navegadores e plataformas para criar uma impressão digital personalizada do navegador de um usuário. Mas é possível repeti-lo no mesmo ambiente de equipamento.

Detecção de função de tela

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(comumente usado para reconhecimento de impressão digital)
• OffscreenCanvas API
• Canvas native

  A função Canvas toDataURL também pode ser modificada por plug-ins do navegador, mas é facilmente identificável

• estabilidade

  O Canvas é estável no mesmo dispositivo e ambiente de navegador

• ruído não humano

  Alguns navegadores ou plug-ins de impressão digital podem adicionar parâmetros ao ruído da tela, mas ainda assim podem ser reconhecidos.

Detalhes da imagem

Causas da impressão digital em tela

A forma como uma imagem do Canvas é renderizada na tela pode variar dependendo do navegador da web, sistema operacional, placa gráfica e outros fatores, resultando em uma imagem exclusiva que pode ser usada para criar uma impressão digital.

1. Anti-aliasing

O anti-aliasing é um tipo de filtro de beleza amplamente utilizado. Se a suavização de fontes não estiver habilitada no sistema operacional, algumas fontes ficarão horríveis no monitor do computador. De modo geral, os sistemas operacionais Windows ativam a suavização de fontes e imagens por padrão. No Mac OS X, o anti-aliasing parece funcionar apenas para fontes abaixo de um determinado tamanho. Não apenas no nível do sistema operacional, alguns navegadores também possuem sua própria tecnologia anti-aliasing integrada. Por exemplo, o Safari usa seu próprio mecanismo de renderização de fontes integrado. E o melhor de tudo é que a tecnologia anti-aliasing também funciona ao desenhar fontes e imagens no Canvas.

Conforme mostrado na figura abaixo, o lado esquerdo mostra o estado em que a suavização de fonte não está habilitada, enquanto o lado direito mostra que está habilitado:

A tecnologia anti-aliasing irá gerar alguns pixels de cores não puras. Esses valores de pixels intermediários são afetados pelo perfil de cores da placa gráfica, resultando em cores diferentes. Ao desenhar as mesmas fontes e imagens em uma tela grande o suficiente e, em seguida, calcular todos os dados de pixel, podem ser obtidos dados de impressão digital relativamente exclusivos.

2. Dica de fonte

Um recurso do ajuste fino é o ajuste da grade, o que significa modificar a altura e a largura dos caracteres da fonte para alinhá-los com a grade de pixels definida exibida na tela. A imagem é exibida na tela como uma grade de pequenos quadrados. As fontes podem ser movidas para a esquerda e para a direita para garantir que sejam exibidas corretamente na grade. Isso também garante que o formato e o layout da fonte pareçam aproximadamente iguais em diferentes. telas.

Através da seguinte imagem GIF, que é uma coleção de imagens de tela de dezenas de usuários diferentes, podemos ver intuitivamente as diferenças na apresentação do mesmo código em diferentes ambientes de dispositivos:

Conforme mostrado nos detalhes da imagem acima, de modo geral, podemos chamar a função toDataURL para obter os dados base64 da imagem Canvas, ou podemos obter a soma de verificação CRC do bloco IDAT do bloco de dados da imagem PNG gerada pelo Canvas. Podemos então calcular o hash dessa string (soma de verificação base64 ou CRC) (o algoritmo exato varia de site para site) como a impressão digital do Canvas.

Observação: há muitos motivos pelos quais as impressões digitais do Canvas variam de site para site. Diferentes strings usadas (base64 ou soma de verificação CRC), diferentes algoritmos de hash (MD5, SHA, MUMUHASH, etc.) tornarão a impressão digital do Canvas completamente diferente. A impressão digital do Canvas é estável, portanto, no mesmo navegador e ambiente de dispositivo, a impressão digital do Canvas no mesmo site é corrigida. Esta também é a base teórica para que a impressão digital do Canvas seja usada para identificação assistida pelo usuário, que possui propriedades estáveis.