Tecnologia Canvas em sistemas antifraude e métodos de identificação de usuários.

26.10.24

Canvas é uma das ferramentas mais poderosas do desenvolvimento web, oferecendo funcionalidades para trabalhar com gráficos diretamente no navegador. O Canvas é baseado na capacidade de desenhar e manipular imagens usando JavaScript, tornando-o indispensável para a criação de aplicações web dinâmicas. O Canvas é amplamente utilizado não apenas para efeitos visuais, jogos e animações, mas também em sistemas antifraude, onde suas funcionalidades ajudam a criar uma identificação única dos usuários.

## História e Propósito do Canvas

A tecnologia Canvas apareceu pela primeira vez na especificação HTML5, desenvolvida no início dos anos 2000. A Apple introduziu a primeira implementação do Canvas em 2004 no navegador Safari. A ideia inicial era criar uma forma de exibir gráficos sem o uso de plugins externos, como Flash, o que melhoraria o desempenho e a segurança das páginas web. Em 2014, o HTML5 se tornou um padrão oficial, e o Canvas se firmou como uma tecnologia-chave para gráficos na web.
    
O Canvas fornece aos programadores a possibilidade de trabalhar com dados de pixels, o que abre um amplo espectro de aplicações em design web, desenvolvimento de jogos e animação. Mas um dos usos mais inesperados do Canvas é nos sistemas antifraude, onde ele ajuda a combater fraudes, criando uma identificação única para o usuário por meio de uma impressão digital.

## Capacidades Tecnológicas do Canvas

O Canvas oferece aos desenvolvedores um rico conjunto de funções para trabalhar com gráficos:

- Desenho de formas e linhas. O Canvas suporta formas simples, como retângulos, círculos e linhas.
    
- Manipulação de imagens. Ele permite carregar imagens, redimensioná-las, sobrepor e manipular cada pixel da imagem.
    
- Animação. O Canvas é amplamente utilizado para criar gráficos interativos e efeitos visuais dinâmicos.

Essas capacidades tornam o Canvas uma ferramenta versátil para o desenvolvimento web, sendo aplicada nas mais diversas áreas, desde o design de sites até aplicações e jogos interativos complexos.

### Canvas e Antifraude: Proteção Contra Fraudadores

Os sistemas antifraude, ao tentar identificar os dispositivos dos usuários, enfrentam o problema da falsificação de identidade e dados. Para uma identificação mais precisa, começaram a usar a personalização de dispositivos através da chamada impressão digital do Canvas (Canvas fingerprinting). Isso permite criar uma impressão digital para cada dispositivo.

**Como o Canvas ajuda a identificar o usuário?**

Quando o navegador renderiza uma imagem no Canvas, os dispositivos fazem isso de maneiras ligeiramente diferentes. Isso é influenciado por processadores gráficos, drivers, sistemas operacionais e até fontes. Como resultado, a imagem, que parece a mesma em dispositivos diferentes, pode conter diferenças únicas quando analisada em nível de pixel.

Os sistemas antifraude utilizam essa característica para criar impressões digitais. O Canvas desenha uma imagem e, em seguida, usando JavaScript, analisa seus pixels, identificando pequenas diferenças. Em combinação com outros fatores, como versão do navegador, sistema operacional e resolução da tela, a impressão digital ajuda a identificar o dispositivo do usuário.

## Métodos de Falsificação de Impressões Digitais do Canvas

Criminosos, ao tentarem burlar sistemas antifraude, desenvolvem métodos para falsificar as impressões digitais do Canvas. Entre os métodos mais comuns de falsificação, destacam-se:

1. Adição de ruído. Programas podem adicionar pequenas distorções na renderização do Canvas — por exemplo, alterando pixels, adicionando ruído ou desvios artificiais. Isso pode modificar a impressão digital, mascarando o dispositivo verdadeiro.
    
2. Uso de resultados previamente preparados. Esse método permite falsificar a impressão digital do Canvas, imitando o funcionamento de um equipamento real. Em vez de calcular a renderização em tempo real, programas injetam dados previamente salvos, que correspondem a impressões digitais de dispositivos reais. Essa abordagem dificulta a detecção da falsificação, pois os sistemas antifraude recebem dados aparentemente confiáveis, que não refletem as características reais do dispositivo.

## Como os Sistemas Antifraude Detectam a Falsificação da Impressão Digital

Os sistemas antifraude aplicam diferentes métodos para identificar a falsificação da impressão digital do Canvas, considerando tanto aspectos estáticos quanto dinâmicos da renderização. As principais abordagens incluem:

1. **Análise de ruído nas imagens:**

Para determinar a presença de ruído na renderização, os sistemas antifraude comparam os resultados em várias imagens semelhantes. A comparação permite identificar anomalias que podem indicar falsificação. Por exemplo, comparando partes dos resultados ou usando métodos diferentes para obter resultados de imagens idênticas.

2. **Uso de Canvas dinâmicos:**

Canvas dinâmicos representam um caso mais complexo de falsificação, pois exigem a alteração constante dos dados em tempo real. Isso dificulta a falsificação dos resultados que corresponderiam ao comportamento de um dispositivo real. Sistemas antifraude podem gerar Canvas dinâmicos para avaliar o desempenho do dispositivo em tempo real e comparar os resultados obtidos com os esperados. No entanto, os resultados dos Canvas dinâmicos são difíceis de comparar entre si devido à sua variabilidade e dependência de vários fatores.

Assim, a combinação de análise de ruído e renderizações dinâmicas permite que os sistemas antifraude identifiquem falsificações de forma mais eficaz e determinem se as impressões digitais do Canvas são autênticas ou manipuladas.

## Exemplos de Uso do Canvas em Sistemas Antifraude

Vamos examinar o princípio de obtenção de dados para a impressão digital do Canvas, começando com um exemplo de Canvas com 9 pixels (3x3 px).

Cores dos pixels (Hex):

- ff0000
- 00ff00
- 0000ff
- ffff00
- ff00ff
- 00ffff
- ffffff
- 000000
- 808080

**String Base64:**

iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAElFTkSuQmCC

**String Hex:**

6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343

O processo de codificação em hex inclui várias etapas: geralmente, as cores dos pixels são codificadas em base64 primeiro, e então a string base64 é convertida em formato hexadecimal (hex), que é enviado ao servidor para processamento adicional.

Agora que entendemos como ocorre a renderização da imagem no navegador, vamos investigar como o ruído funciona em navegadores anti-detecção.

Para uma tarefa mais complexa de renderização, usaremos um exemplo de Canvas de um conhecido verificador de navegadores e realizaremos alguns testes. Vamos comparar o comprimento do resultado em Hex, que é enviado ao servidor após a renderização e codificação, e, se necessário, comparar os valores.

**Resultados para o navegador Chrome:**

- Comprimento da String Base64: 15452
- Comprimento da String Hex: 30948

**Resultados para o navegador anti-detecção sem adição de ruído:**

- Comprimento da String Base64: 15452
- Comprimento da String Hex: 30948

**Resultados para o navegador anti-detecção com adição de ruído:**

- Comprimento da String Base64: 15936
- Comprimento da String Hex: 31916

Com o uso de ruído, o comprimento da string Base64 aumentou em 484 caracteres; nos outros casos, os valores em Hex permanecem os mesmos.

Neste exemplo simples, vimos como os resultados mudam ao usar ruído no Canvas em navegadores anti-detecção.

### Exemplo de Impressão Digital do Canvas no Caso da Amazon

Na página de registro da Amazon, há três tarefas de renderização no Canvas.

A primeira e a segunda tarefas são iguais, diferindo apenas no método de obtenção e gravação do resultado.

Na primeira tarefa, o Hex é calculado codificando-se o conjunto de cores dos pixels, enquanto na segunda tarefa o conjunto de cores é codificado primeiro em base64 e depois em hex.

A terceira tarefa é ligeiramente diferente: falta uma pequena parte que lida com a renderização de "NOT AVAILABLE"; isso é visível nas imagens.

Vale notar que o mesmo conjunto de tarefas de renderização é apresentado ao usuário ao tentar acessar uma conta Amazon.

Com esse conjunto de valores obtidos pela renderização, o site pode determinar quantos dispositivos estão acessando a conta, aplicando verificações adicionais ao acessar de outros dispositivos. Além disso, usando esse conjunto de valores, obtidos por métodos diversos, o site pode distinguir dispositivos com alta precisão, como vários computadores idênticos sem placa de vídeo dedicada, mas com o mesmo processador e mesma versão do navegador, exibindo resultados diferentes entre si.

Essa alta precisão na identificação dos dispositivos é alcançada por meio de diversos parâmetros: diferentes sistemas renderizam tons semitransparentes de forma distinta; também é comum que o Canvas utilize fontes específicas para tarefas de renderização, e frequentemente aparecem símbolos de emojis.

Nos exemplos de Canvas apresentados acima, a Amazon verifica como será renderizada a fonte Arial, pois é essa a fonte usada para texto nas imagens, justificado pelo fato de que a Arial está ausente em muitos dispositivos móveis, sendo substituída por uma fonte do sistema ou por uma similar à Arial. Como resultado, a renderização nesses dispositivos será bastante diferente da dos dispositivos desktop. Nas tarefas, em conjunto com a fonte Arial, muitas vezes surgem fontes inexistentes, e o dispositivo do usuário escolhe outra fonte do sistema para executar a tarefa. Isso é feito para identificar os usuários de forma ainda mais precisa. O mesmo ocorre com emojis: dependendo do dispositivo e do sistema operacional, a renderização de emojis no Canvas também gera resultados diferentes.

Na imagem à esquerda — emoji no navegador Chrome em um dispositivo desktop; à direita — no navegador Chrome em um dispositivo móvel Android. Vamos comparar o comprimento das strings Base64 e Hex:

**Resultados para o navegador Chrome**

- Comprimento da String Base64: 1480
- Comprimento da String Hex: 3004

**Resultados para o navegador anti-detecção sem ruído**

- Comprimento da String Base64: 1480
- Comprimento da String Hex: 3004

**Resultados para o navegador anti-detecção com ruído**

- Comprimento da String Base64: 1708
- Comprimento da String Hex: 3460

**Resultados para Samsung**

- Comprimento da String Base64: 2240
- Comprimento da String Hex: 4556

**Resultados para Xiaomi**

- Comprimento da String Base64: 1780
- Comprimento da String Hex: 3604

No exemplo de renderização de emojis no Canvas, vemos que os resultados em dispositivos desktop diferem significativamente dos resultados em dispositivos móveis.

## Verificação da Unicidade da Impressão Digital do Canvas

Vamos verificar os resultados da renderização do Canvas no site <a href="https://browserleaks.com/canvas" target="_blank">Browserleaks</a>

No navegador anti-detecção sem adição de ruído, obtivemos os seguintes resultados:

Nossa impressão digital do Canvas coincide com as impressões digitais de 142 dispositivos da base de dados do Browserleaks. O tamanho da impressão digital é de 4666 bytes.

Vamos ativar a adição de ruído e repetir a verificação:

Ao utilizar o ruído, nossa impressão digital se torna 100% única no Browserleaks. O tamanho da impressão aumentou para 4718 bytes.

Muitos grandes sistemas antifraude verificam a impressão digital do Canvas quanto à unicidade e desconfiam de usuários com impressões raras.

Vamos verificar até que ponto é possível identificar usuários com a impressão digital do Canvas. Para o teste, usaremos servidores alugados com processadores Ryzen 5 3600, Ryzen 7 3700X e Ryzen 9 5950X, sem placa de vídeo, e o navegador Chromium versão 131.

**Resultados dos testes:**

No navegador Chromium 131, obtivemos os mesmos resultados em todos os dispositivos.

Vamos verificar a impressão digital do Canvas em outras versões do navegador Chromium:

Chromium v130

Chromium v129

Chromium v128

Chromium v126

Chromium v125

Chromium v123

Os resultados da verificação em diferentes versões do navegador Chromium mostram diferenças na impressão digital do Canvas entre as versões.

Para determinar como a impressão digital do Canvas muda em diferentes navegadores, faremos uma última verificação e abriremos o site no navegador

Chrome v130

A impressão digital nos navegadores Chrome v130 e Chromium v130-131 coincide totalmente.

Como podemos ver, o Canvas apresentado no site não consegue diferenciar usuários com alta precisão.

## Conclusão

Como resultado dos testes realizados, podemos concluir sobre o impacto da adição de ruído na renderização de imagens em diferentes navegadores. Navegadores que utilizam fontes variadas e que não suportam certos símbolos podem exibir resultados distintos.

A utilização de ruído provoca alterações significativas na string Hex, o que pode servir como um sinal para os sistemas antifraude.

A tecnologia Canvas, por si só, não possui uma importância significativa para os sistemas antifraude. Resultados eficazes só podem ser alcançados em combinação com outros métodos utilizados no antifraude. No entanto, atualmente, observa-se um volume considerável de tráfego fraudulento usando ruído no Canvas, e a detecção de tal tráfego logo nas primeiras visitas ao recurso web simplifica significativamente o trabalho dos sistemas antifraude.

Vamos analisar um método de detecção de ruído que requer um mínimo de processamento computacional. A ideia deste método surgiu há algum tempo, e eu não encontrei aplicações dele em sistemas antifraude.

O método consiste em comparar os resultados de renderização da imagem original e sua versão invertida. Para evitar o uso de valores previamente preparados na renderização, aplicamos um Canvas dinâmico, onde cada nova imagem contém elementos em constante mudança.

O processo de detecção de ruído e falsificação inclui a comparação de cada pixel da imagem original com o pixel correspondente da imagem invertida. Se a renderização for realizada corretamente e sem manipulações, ambas as imagens devem ser idênticas. Caso contrário, espera-se encontrar discrepâncias, o que pode indicar uma falsificação potencial ou outras violações de integridade dos dados.

## Resultados dos Testes:

Navegador Chrome:
<img src='/media/mdeditor/Chrome_20241028195520098291.jpg' />

Navegador anti-detecção sem ruído:
<img src='/media/mdeditor/ADBnot_20241028195610453234.jpg' />

Navegador anti-detecção com ruído:
<img src='/media/mdeditor/ADBnoise_20241028195646281993.jpg' />

Samsung Chrome:
<img src='/media/mdeditor/Android_20241028195727399341.jpg' />

Xiaomi Chrome:
<img src='/media/mdeditor/xiaomi_20241028195814063105.jpg' />

Esse método permite identificar o uso de ruído na impressão digital do Canvas com alta precisão.

Neste artigo, discutimos como os sistemas antifraude podem utilizar a tecnologia Canvas para detectar tráfego fraudulento. No entanto, é importante lembrar que a tarefa de um sistema antifraude não é apenas identificar a adição de ruído, mas também detectar inconsistências entre a impressão digital do Canvas e o navegador ou sistema operacional declarado.

No próximo artigo, continuaremos a análise das tecnologias de navegador utilizadas nos sistemas antifraude.

*Bannykh M.V.*

Ainda não está conosco?

Cadastre-se para acessar todos os recursos do site.

Inscrever-se