Технология Canvas в Антифрод-системах и методы идентификации пользователей.

26.10.24

Canvas — один из самых мощных инструментов веб-разработки, предоставляющий возможности для работы с графикой прямо в браузере. В основе Canvas лежит способность рисовать и манипулировать изображениями с помощью JavaScript, что делает его незаменимым для создания динамических веб-приложений. Canvas активно используется не только для визуальных эффектов, игр и анимации, но и в антифрод-системах, где его возможности помогают уникализировать пользователей.

## История создания и предназначение Canvas

Технология Canvas впервые появилась в спецификации HTML5, разработанной в начале 2000-х годов. Первую реализацию Canvas в 2004 году представила компания Apple в браузере Safari. Изначальная идея заключалась в создании способа отображения графики без использования сторонних плагинов, таких как Flash, что улучшило бы производительность и безопасность веб-страниц. В 2014 году HTML5 стал официальным стандартом, и Canvas закрепился как ключевая технология для веб-графики.

Canvas предоставляет программистам возможность работать с пиксельными данными, что открывает широкий спектр применения в веб-дизайне, разработке игр и анимации. Но одна из самых неожиданных сфер его использования — это антифрод-системы, в которых Canvas помогает бороться с мошенничеством, уникализируя пользователя через цифровой отпечаток.

## Технологические возможности Canvas
Canvas предлагает разработчикам богатый набор функций для работы с графикой:

- Рисование фигур и линий. Canvas поддерживает простые формы, такие как прямоугольники, круги и линии.

- Работа с изображениями. Он позволяет загружать изображения, изменять их размер, накладывать и манипулировать каждым пикселем изображения.

- Анимация. Canvas активно используется для создания интерактивной графики и динамических визуальных эффектов.

Эти возможности делают Canvas универсальным инструментом для веб-разработки, применяемым в самых разнообразных сферах — от дизайна сайтов до сложных интерактивных приложений и игр.

### Canvas и антифрод: защита от мошенников

Антифрод-системы, стремясь идентифицировать устройства пользователей, сталкиваются с проблемой подмены личности и данных. Для более точной идентификации начали использовать уникализацию устройств через так называемый отпечаток Canvas (Canvas fingerprinting). Он позволяет создать цифровой отпечаток для каждого устройства.

**Как Canvas помогает идентифицировать пользователя?**

Когда браузер рендерит изображение на Canvas, устройства делают это немного по-разному. На это влияют графические процессоры, драйверы, операционные системы и даже шрифты. В результате картинка, которая выглядит одинаково на разных устройствах, при детальном анализе на уровне пикселей может содержать уникальные отличия.

Антифрод-системы используют эту особенность для создания отпечатков. Canvas рисует изображение, а затем с помощью JavaScript анализирует его пиксели, выявляя малозаметные различия. В сочетании с другими факторами, такими как версия браузера, операционная система и разрешение экрана, отпечаток помогает идентифицировать устройство пользователя.

## Методы подмены отпечатков Canvas

Злоумышленники, стремясь обойти антифрод-системы, разрабатывают способы подделки отпечатков Canvas. Среди распространённых методов подмены можно выделить:

1. Добавление шума. Программы могут добавлять небольшие искажения в рендеринг Canvas — например, изменять пиксели, добавлять шум или искусственные отклонения. Это может изменить отпечаток, маскируя настоящее устройство.

2. Использование заранее подготовленных результатов. Этот метод позволяет подменить отпечаток Canvas, имитируя работу настоящего оборудования. Вместо того чтобы рассчитывать рендеринг в реальном времени, программы внедряют заранее сохранённые данные, которые соответствуют отпечаткам настоящих устройств. Такой подход усложняет выявление подмены, так как антифрод-системы получают достоверные на первый взгляд данные, не отражающие реальных характеристик устройства.

## Как антифрод-системы определяют подмену отпечатка

Антифрод-системы применяют различные методы для выявления подмены отпечатка Canvas, учитывая как статические, так и динамические аспекты рендеринга. Основные подходы включают:

**Анализ шума на изображениях:**

Для определения наличия шума в рендеринге антифрод-системы сравнивают результаты на нескольких похожих изображениях. Сравнение позволяет выявить аномалии, которые могут свидетельствовать о подделке. Например, сравнивая части результатов или использовать разные методы получения результатов для одинаковых изображений

**Использование динамических канвасов:**

Динамические канвасы представляют собой более сложный случай для подмены, поскольку они требуют постоянного изменения данных в реальном времени. Это делает затруднительной подмену результатов, которые бы соответствовали поведению настоящего устройства. Антифрод-системы могут генерировать динамические канвасы, чтобы оценить производительность устройства в реальном времени, и сравнивать полученные результаты с ожидаемыми. Однако результаты для динамических канвасов трудно сравнивать между собой из-за их изменчивости и зависимости от множества факторов.

Таким образом, сочетание анализа шума и динамических рендерингов позволяет антифрод-системам более эффективно выявлять подмены и определять, являются ли отпечатки Canvas подлинными или сфальсифицированными.

## Примеры использования Canvas в антифрод-системах.

Рассмотрим принцип получения данных для отпечатка canvas, начнем с примера Canvas размером 9 пикселей (3x3 px).

Цвета пикселей (Hex):

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

**Base64 строка:**

iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAElFTkSuQmCC

**Hex строка:**

6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343

Процесс кодирования в hex включает несколько шагов: обычно сначала цвета пикселей кодируются в base64, а затем строка base64 преобразуется в шестнадцатеричный формат (hex), который передаётся на сервер для дальнейших вычислений.

Теперь, когда мы разобрались, как происходит отрисовка изображения в браузере, давайте исследуем, как работает наложение шума в антидетект-браузерах.

Для более сложного задания на отрисовку используем пример canvas из известного чекера браузеров и проведем несколько тестов. Будем сравнивать длину результата Hex, который передаётся на сервер после отрисовки и кодирования и при необходимости сравним значения.

**Результаты для браузера Chrome:**
- Length of Base64 String: 15452
- Length of Hex String: 30948

**Результаты для антидетект-браузера без наложения шума:**
- Length of Base64 String: 15452
- Length of Hex String: 30948

**Результаты для антидетект-браузера с наложением шума:**
- Length of Base64 String: 15936
- Length of Hex String: 31916

При использовании шума длина строки Base64 увеличилась на 484 символа, в остальных случаях значения Hex совпадают.

На этом простом примере мы увидели, как изменяются результаты при использовании шума canvas антидетект-браузерами.

### Рассмотрим отпечаток canvas на примере Amazon

На странице регистрации Amazon даёт 3 задания на отрисовку Canvas.

Первое и второе задания одинаковые, различаются только способом получения и записи результата.

В первом задании Hex вычисляется путём кодирования набора цветов пикселей, а во втором задании набор цветов сначала кодируется в base64, а уже затем в hex.

Третье задание немного отличается, в нем отсутствуют небольшая часть задания, отвечающая за отрисовку "NOT AVAILABLE", на изображениях это можно заметить.

Нужно отметить, что точно такой же набор заданий для отрисовки пользователь получит при попытке входа в аккаунт Amazon.

По такому набору значений полученных от отрисовки, веб-ресурс может определять с какого количества устройств происходят входы в аккаунт, накладывать дополнительные проверки при входе с других устройств. Кроме того, с помощью такого набора значений, полученных разными методами, веб-ресурс с высокой точностью может отличать устройства друг от друга, например несколько одинаковых компьютеров без дискретной видеокарты с одинаковым процессором в одинаковых версиях браузера показывают отличные друг от друга результаты.

Такая высокая точность в определении устройств достигается за счёт нескольких параметров: разные системы по-разному отрисовывают полупрозрачные тона, использование шрифтов для заданий на отрисовку, так же часто в канвас можно встретить символы эмодзи.

В рассмотренных выше примерах canvas, Amazon проверяет, как будет отрисован шрифт Arial, для текста на изображениях используется именно этот шрифт, и это обосновано тем, что шрифт Arial отсутствует на многих мобильных устройствах, и на таких устройствах шрифт будет заменён на системный или похожий на Arial и результаты отрисовки будут сильно отличаться от десктоп устройств. В заданиях, в сочетаний, со шрифтом Arial часто можно встретить несуществующие шрифты, для выполнения такого задания устройство пользователя подберёт другой системный шрифт, это делается для того, чтобы ещё более точно идентифицировать пользователей. То же самое происходит с эмодзи, в зависимости от устройств и операционных систем, отрисовка эмодзи на холсте так же даст разные результаты.

На изображении слева – эмодзи в браузере Chrome на десктоп устройстве, справа - в браузере Chrome на мобильном устройстве Android. Приведём примеры результатов отрисовки эмодзи. Сравним длину результатов строк Base64 и Hex:

**Результаты для браузера Chrome**
- Length of Base64 String: 1480
- Length of Hex String: 3004

**Результаты для антидетект-браузера без шума**
- Length of Base64 String: 1480
- Length of Hex String: 3004

**Результаты для антидетект-браузера с шумом**
- Length of Base64 String: 1708
- Length of Hex String: 3460

**Результаты для Samsung**
- Length of Base64 String: 2240
- Length of Hex String: 4556

**Результаты для Xiaomi**
- Length of Base64 String: 1780
- Length of Hex String: 3604

На примере с отрисовкой эмодзи в canvas мы видим, что результаты на десктоп устройствах значительно отличаются от результатов мобильных устройств.

## Проверка уникальности отпечатка Canvas
Проверим результаты отрисовки Canvas на сайте <a href="https://browserleaks.com/canvas" target="_blank">Browserleaks</a>

В антидетект браузере без наложения шума мы получили следующие результаты:

Наш отпечаток Canvas совпадает с отпечатками 142 устройств из базы Browserleaks. Размер отпечатка 4666 bytes.

Попробуем включить наложение шума и повторим проверку:

При использовании шума наш отпечаток становится уникальным на 100% для Browserleaks. Размер отпечатка увеличился до 4718 bytes.

Многие крупные антифрод-системы проверяют отпечаток canvas на уникальность, и подозрительно относятся к пользователям с редкими отпечатками.

Проверим насколько точно можно идентифицировать пользователей с помощью отпечатка canvas. Для теста будем использовать арендованные серверы с процессором Ryzen 5 3600, Ryzen 7 3700X и Ryzen 9 5950X без видеокарты и браузер Chromium 131 версии.

**Результаты тестов:**

В браузере Chromium 131 мы получили одинаковые результаты на всех устройствах.

<img src='/media/mdeditor/8_20241026211557457570.png' />
  
Проверим отпечаток canvas в других версиях браузера Chromium:

Chromium v130

<img style='flex-wrap: wrap;'  src='/media/mdeditor/9_20241026211659899474.png' />
  
Chromium v129

<img src='/media/mdeditor/10_20241026211721368262.png' />
 
Chromium v128

<img src='/media/mdeditor/11_20241026211805498997.png' />
 
Chromium v126

<img src='/media/mdeditor/12_20241026211847727996.png' />
 
Chromium v125

<img src='/media/mdeditor/13_20241026211911928401.png' />
 
Chromium v123

По результатам проверки на разных версиях браузера Chromium, заметны отличия отпечатка canvas между версиями.

Чтобы определить как изменяется отпечаток canvas в разных браузерах сделаем последнюю проверку и откроем сайт в браузере

Chrome v130

Отпечаток в браузерах Chrome v130 и Chromium v130-131 полностью совпадает.

Как мы видим, представленный на сайте canvas не может с высокой точностью различать пользователей.

## Заключение

В результате проведенного тестирования мы можем сделать выводы о влиянии наложения шума на отрисовку изображений в различных браузерах. Браузеры, которые используют разные шрифты и не поддерживают определенные символы, могут выдавать разные результаты.

Использование наложения шума вызывает значительные изменения строки Hex, что может стать сигналом для Антифрод-систем.

Сама по себе технология канвас не обладает существенной значимостью для антифрод-систем. Эффективные результаты могут быть достигнуты только в сочетании с другими методами, используемыми в антифроде. Но и в настоящее время наблюдается достаточно большое количество фродового трафика с использованием шума в canvas и обнаружение такого трафика при первых же посещениях веб-ресурса значительно упрощает выполнение задач для антифрод-систем.

Рассмотрим метод определения шума, который требует минимальных вычислительных затрат. Идея этого подхода пришла ко мне достаточно давно, и я не встречал его применения в антифрод-системах.

Метод заключается в сравнении результатов рендеринга оригинального изображения и его перевернутой версии. Для предотвращения использования заранее подготовленных значений при отрисовке мы применяем динамический канвас, где каждое новое изображение содержит изменяющиеся элементы.

Процесс выявления шума и подмены включает сравнение каждого пикселя оригинального изображения с соответствующим пикселем перевернутого изображения. Если рендеринг выполнен корректно и без манипуляций, оба изображения должны быть идентичны. В противном случае следует ожидать расхождений, что может указывать на потенциальную подмену или другие нарушения целостности данных.

## Результаты тестов:

Браузер Chrome:
<img src='/media/mdeditor/16_20241026212128277112.png' />

Антидетект браузер без шума:
<img src='/media/mdeditor/17_20241026212203097384.png' />

Антидетект браузер с использованием шума:
<img src='/media/mdeditor/18_20241026212247278125.png' />

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

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

Такой подход позволяет с высокой точностью определить использование шума в отпечатке canvas.

В этой статье мы разобрали каким образом антифрод-системы могут использовать технологию canvas для определения фродового трафика. Но не стоит забывать, что задачей Антифрод-системы может быть не определение наложения шума, а несоответствие отпечатка canvas заявленному браузеру или операционной системе.

В следующей статье мы продолжим разбор технологий браузера, используемых в антифрод-системах.

*Bannykh M.V.*

Еще не с нами?

Зарегистрируйтесь, чтобы получить доступ ко всем возможностям сайта.

Регистрация