Технологія 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, враховуючи як статичні, так і динамічні аспекти рендерингу. Основні підходи включають:

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

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

2. **Використання динамічних канвасів:**

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

Таким чином, поєднання аналізу шуму і динамічних рендерингів дозволяє антифрод-системам більш ефективно виявляти підміни і визначати, чи є відбитки 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 надає три завдання на відображення canvas.

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

У першому завданні Hex обчислюється шляхом кодування набору кольорів пікселів, а в другому завданні набір кольорів спочатку кодується в base64, а вже потім у hex.

Третє завдання трохи відрізняється, у ньому відсутня невелика частина завдання, що відповідає за відображення "NOT AVAILABLE", на зображеннях це можна помітити.

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

За таким набором значень, отриманих від відображення, веб-ресурс може визначати, з якої кількості пристроїв відбуваються входи в обліковий запис, накладати додаткові перевірки під час входу з інших пристроїв. Крім того, за допомогою такого набору значень, отриманих різними методами, веб-ресурс з високою точністю може розрізняти пристрої, наприклад, кілька однакових комп'ютерів без дискретної відеокарти з однаковим процесором в однакових версіях браузера показують різні результати.

Така висока точність у визначенні пристроїв досягається за рахунок кількох параметрів: різні системи по-різному відображають напівпрозорі тони, використання шрифтів для завдань на відображення, а також часто у canvas можна зустріти символи емодзі.

У розглянутих вище прикладах canvas Amazon перевіряє, як буде відображений шрифт Arial, для тексту на зображеннях використовується саме цей шрифт, і це обумовлено тим, що шрифт Arial відсутній на багатьох мобільних пристроях, і на таких пристроях шрифт буде замінено на системний або подібний до Arial, і результати відображення будуть значно відрізнятися від десктопних пристроїв. У завданнях, у поєднанні зі шрифтом Arial часто можна зустріти неіснуючі шрифти, для виконання такого завдання пристрій користувача підбере інший системний шрифт, це робиться для того, щоб ще точніше ідентифікувати користувачів. Те ж саме відбувається з емодзі: залежно від пристроїв та операційних систем відображення емодзі на canvas також дасть різні результати.

На зображенні зліва — емодзі у браузері 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 байтів.

Спробуємо включити накладення шуму і повторимо перевірку:

При використанні шуму наш відбиток стає унікальним на 100% для Browserleaks. Розмір відбитка збільшився до 4718 байтів.

Багато великих антифрод-систем перевіряють відбиток canvas на унікальність і з підозрою ставляться до користувачів із рідкісними відбитками.

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

**Результати тестів:**

У браузері Chromium версії 131 ми отримали однакові результати на всіх пристроях.

Перевіримо відбиток 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
<img src='/media/mdeditor/14_20241026211948074823.png' />

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

Щоб визначити, як змінюється відбиток canvas у різних браузерах, зробимо останню перевірку і відкриємо сайт у браузері

Chrome v130
<img src='/media/mdeditor/15_20241026212011909424.png' />

Відбиток у браузерах Chrome v130 і Chromium v130-131 повністю збігається.

Як бачимо, представлений на сайті canvas не може з високою точністю розрізняти користувачів.

## Висновок

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

Використання накладення шуму викликає значні зміни рядка Hex, що може стати сигналом для антифрод-систем.

Сама по собі технологія Canvas не має суттєвого значення для антифрод-систем. Ефективні результати можуть бути досягнуті лише у поєднанні з іншими методами, які використовуються в антифроді. Проте, нині спостерігається досить велика кількість фродового трафіку з використанням шуму в Canvas, і виявлення такого трафіку при перших же відвідуваннях веб-ресурсу значно спрощує виконання завдань для антифрод-систем.

Розглянемо метод визначення шуму, який вимагає мінімальних обчислювальних витрат. Ідея цього підходу прийшла мені досить давно, і я не зустрічав його застосування в антифрод-системах.

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

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

## Результати тестів:

Браузер Chrome:
<img src='/media/mdeditor/Chrome_20241028195520098291.jpg' />

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

Антидетект-браузер з використанням шуму:
<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' />

Такий підхід дозволяє з високою точністю визначити використання шуму в відбитку Canvas.

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

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

*Bannykh M.V.*

Ще не з нами?

Зареєструйтеся, щоб отримати доступ до всіх можливостей сайту.

Зареєструватися