Технологія WebGL в Антифрод-системах і методи ідентифікації користувачів

01.11.24

WebGL (Web Graphics Library) - це потужна технологія для рендерингу 3D-графіки в браузерах, яка використовує можливості графічного процесора (GPU). На відміну від Canvas, WebGL не тільки дає змогу працювати з 2D-графікою, а й відкриває перед веб-розробниками нові горизонти 3D-обчислень і обчислень на GPU. Завдяки здатності генерувати унікальні результати, WebGL знайшов своє застосування в антифрод-системах, де його можливості допомагають відстежувати та ідентифікувати пристрої користувачів через унікальні цифрові відбитки.

#### Історія створення та призначення WebGL

WebGL був розроблений як доповнення до Canvas і вперше презентований організацією Khronos Group у 2011 році. Як відкритий стандарт для рендерингу графіки на веб-сторінках, WebGL дав змогу відмовитися від сторонніх плагінів, як-от Flash або Java, що значно підвищило продуктивність і безпеку веб-додатків.

WebGL розширив можливості HTML5 і JavaScript, додавши підтримку 3D-рендерингу і поліпшивши взаємодію з GPU. Це робить його корисним не тільки для ігор, візуалізації та наукових досліджень, а й для антифрод-систем, де WebGL може допомогти унікалізувати пристрої користувачів через «графічний відбиток».

#### Технологічні можливості WebGL

WebGL пропонує розробникам низку унікальних інструментів для створення складної графіки:

- Робота з 3D-графікою. WebGL підтримує малювання складних тривимірних моделей і текстур, використовуючи апаратне прискорення. Це дає змогу будувати реалістичні візуальні об'єкти, які вирізняються високою продуктивністю.

- Доступ до шейдерів. WebGL використовує шейдери (програми, що виконуються GPU), які дають змогу деталізувати відображення об'єктів, створюючи складні текстурні ефекти та вищу якість графіки.

- Анімація та інтерактивність. Можливості WebGL дають змогу будувати динамічні веб-додатки, візуалізувати наукові дані та створювати складні моделі, такі як віртуальні світи та інтерактивні симуляції.

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

#### WebGL в антифрод-системах: захист від шахраїв

Сучасні антифрод-системи використовують графічний відбиток WebGL для ідентифікації пристроїв. На відміну від Canvas, WebGL відбиток будується не тільки на основі піксельного рендерінгу, а й також залежить від GPU і підтримуваних браузером функцій. Це допомагає антифрод-системам створювати унікальні відбитки для кожного пристрою і виявляти підозрілі дії.

##### Як WebGL допомагає ідентифікувати користувача?

Під час рендерингу об'єктів на WebGL різні пристрої можуть видавати незначні відмінності в зображенні через апаратні особливості GPU, шейдерів і драйверів. Фактори, що впливають на результати рендерингу, включають:

- Графічний процесор - різні моделі GPU по-різному обробляють 3D-об'єкти і текстури.

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

##### Налаштування браузера та особливості рендерингу.

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

##### **Методи підміни відбитків** **WebGL**

Шахраї використовують різні методи, щоб підробити графічні відбитки WebGL та обійти антифрод-системи. Серед них можна виділити:

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

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

##### **Яку ж інформацію веб-ресурс може отримати з браузера за допомогою WebGL?**

Повний список властивостей і значень WebGL для браузера можна подивитися на тестовій сторінці <a href="https://test-webapi.tech/webglfull" target="_blank"> https://test-webapi.tech/webglfull</a>, найбільш значущі параметри для антифрод-систем ми розглянемо докладніше, але спочатку перевіримо, як працює накладення шуму в WebGL. Детально про те, як формуються значення при знятті відбитка, ми розповідали в <a href="https://detect.expert/ru/blog/canvas-technology-in-anti-fraud-systems-and-user-i/" target="_blank">статті</a>, зараз же проведемо невеликий тест, подивимося на відбиток WebGL браузера Chrome і антидетект-браузера без шуму і з використанням шуму, відкриємо в кожному з них сторінку <a href="https://browserleaks.com/webgl" target="_blank">https://browserleaks.com/webgl</a>

Браузер Chrome:

Звернемо увагу на ці значення:

WebGL Report Hash: af7f2acd5c7ab718eb78ab2d368860bd

WebGL Image Hash: 31512603d8157a55323d306cc161fb49

Немаскований вендор: Google Inc. (NVIDIA)

Unmasked Renderer: ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 (0x00002503) Direct3D11 vs_5_0 ps_5_0, D3D11)

Антидетект-браузер без шуму:

Антидетект-браузер із використанням шуму:

WebGL Report Hash: af7f2acd5c7ab718eb78ab2d368860bd

WebGL Image Hash: 31512603d8157a55323d306cc161fb49

Немаскований вендор: Google Inc. (NVIDIA)

Немаскований рендерер: ANGLE (NVIDIA, NVIDIA GeForce RTX 3060 (0x00002503) Direct3D11 vs_5_0 ps_5_0, D3D11)

WebGL Report Hash: 251d629a393c4f10bfffe3b506696fdd

WebGL Image Hash: 61b18870e8f14f0058bc5533468c685c

Немаскований вендор: Google Inc. (NVIDIA)

Unmasked Renderer: ANGLE (NVIDIA, NVIDIA GeForce GTX 1050 Ti (0x00001C8C) Direct3D11 vs_5_0 ps_5_0, D3D11)

За результатами тестів ми бачимо, що значення при накладенні шуму змінилися, і можемо зробити висновок, що антидетект-браузер успішно підміняє наш відбиток WebGL.

##### Як антифрод-системи визначають підміну відбитка WebGL?

Антифрод-системи використовують методи, що дозволяють розпізнати підробку відбитка WebGL:

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

- Спотворення рендерингу. Антифрод-системи можуть створювати зображення і перевіряти, як пристрої рендерять певні об'єкти. Наприклад, якщо WebGL-рендеринг на пристрої не відповідає стандартним параметрам, це може сигналізувати про підміну.

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

Найважливішими параметрами для антифрод-систем у WebGL є: інформація про пристрій (unmaskedVendor, unmaskedRenderer, vendor, renderer, shadingLanguage, version, shadingLanguage2, version2), технічні характеристики (maxFragmentUniformVectors, maxTextureSize) та extensions.

Антидетект-браузери успішно підміняють інформацію про пристрій, подивимося, як антифрод-системи можуть перевіряти технічні параметри: перевіримо реальні значення maxFragmentUniformVectors, відкривши в браузері нашу тестову сторінку <a href="test-webapi.tech/webglmaxfr" target="_blank">https://test-webapi.tech/webglmaxfr</a>, яка перевіряє максимальну кількість векторів уніформ під навантаженням.

Браузер Chrome на комп'ютері:

Реальне значення відповідає заявленому у властивостях браузера.

Оскільки десктоп-пристрої зазвичай мають значення maxFragmentUniformVectors, що дорівнює 1024, відкриємо цю саму сторінку на мобільному телефоні Android у браузері Chrome:

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

Тепер спробуємо в антидетект-браузері підмінити значення на значення телефону і повторимо тест.

Відкриємо нашу тестову сторінку:

Антидетект-браузер із підміною значення maxFragmentUniformVectors не пройшов перевірку, і це логічно, адже ми запускаємо його на нашому комп'ютері зі значенням maxFragmentUniformVectors:1024

Проведемо аналогічний тест для maxTextureSize, відкриємо в браузері нашу тестову сторінку <a href="test-webapi.tech/webglmaxt" target="_blank">https://test-webapi.tech/webglmaxt</a>, яка перевіряє під навантаженням максимальний розмір текстури в контексті Webgl.

Браузер Chrome на комп'ютері:

Реальне значення відповідає заявленому у властивостях браузера.

Оскільки десктоп-пристрої зазвичай мають значення maxTextureSize, що дорівнює 16384, відкриємо цю саму сторінку на мобільному телефоні Android у браузері Chrome:

Тепер спробуємо в антидетект-браузері підмінити значення на значення телефону і повторимо тест

Перевіримо значення на сайті browserleaks.com

Відкриємо нашу тестову сторінку

Антидетект-браузер з підміною значення maxTextureSize не пройшов перевірку, наш тест виявив, що розмір текстури 4097 підтримується нашим браузером, і це логічно, адже ми запускаємо його на нашому комп'ютері зі значенням maxTextureSize:16384

##### **Розширення** **WebGL**

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

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

##### **Тести продуктивності** **WebGL**

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

Результати для десктоп-пристроїв:

NVIDIA GeForce RTX 3060: 2023.6 мс

AMD Radeon RX580: 1132.0 мс

AMD Radeon™: 1611.2 мс

Intel, UHD 620: 2576.1 мс

Vulkan 1.3.0: 1364.2 мс

Результати для мобільних пристроїв:

Mali-G77: 3369.3 мс

Mali-G76: 5111.1 мс

Adreno™ 642L: 4534.0 мс

Adreno™ 642: 5763.3 мс

Adreno™ 618: 9821.0 мс

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

### **WebGL** **на прикладі** **Amazon** **та** **Facebook**
Розглянемо на прикладі двох сайтів, які дані вони отримують про користувача за допомогою технології WebGL.

Відкриємо головну сторінку Amazon, і за допомогою інструментів розробника пошукаємо в java script файлах функції, у яких зустрічається «renderer», «canvas», «webgl», «vendor», і дослідимо, які дані отримує сайт за допомогою цих функцій.

У результаті ми побачимо, що сайт Amazon на головній сторінці збирає інформацію про властивості Vendor, Renderer і Extensions.

Повторимо перевірку на сайті Facebook.

Сайт Facebook на сторінці входу в обліковий запис збирає інформацію про Vendor, Renderer із браузера користувача.

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

##### **Frames Per Second (FPS)**
Цей параметр вимірює частоту, з якою оновлюється зображення.

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

#### Висновок

У багатьох антифрод-системах на популярних ресурсах технологія WebGL використовується і дає змогу не тільки ідентифікувати пристрої користувачів через унікальні графічні відбитки, а й надає інструменти для виявлення та запобігання шахрайству. Застосування методів перевірки на підміну, аналізу стабільності параметрів і порівняння з реальними характеристиками пристроїв значно підвищує ефективність антифрод-систем. Підміна значень і використання шуму антидетект-браузерами в WebGL не є чарівним способом для обходу захисту популярних сайтів.

У висновку статті представимо можливий метод визначення шуму WebGL:

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

Приступимо до тестів:

Відкриємо сторінку <a href="test-webapi.tech/webgltamper" target="_blank">https://test-webapi.tech/webgltamper</a> у звичайному браузері Chrome:

Повторимо в антидетект-браузері без використання шуму:

Тепер перевіримо в антидетект-браузері з накладенням шуму WebGL:

Розберемося, яким чином у цьому підході обчислюється накладення шуму. Спочатку ми отримуємо hex з буфера webgl, і розкодуємо hex у зворотному порядку кодування, в результаті отримуємо значення кольору для кожного пікселя в зображенні, послідовність цих дій повністю відповідає отриманню значень в антифрод-системах. На наступному кроці ми порівнюємо колір пікселя основної частини фігури, намальованої за допомогою WebGL (червоний), і колір напівпрозорого пікселя, що розміщений на кордоні білого фону та трикутника, у нашому випадку ми порівнюємо значення червоного відтінку R та прозорості A, у результаті чого отримуємо різницю значень у відсотках. На звичайних пристроях різниця між червоними відтінками та прозорістю двох таких пікселів має бути однаковою (у теорії наш колір пікселя має змінюватися на таке саме значення, на яке змінюється значення його прозорості), а під час накладення шуму у спосіб заміни кольорів напівпрозорих пікселів, різниця червоних відтінків та прозорості між двома пікселями змінюється.

На скріншотах із тесту ми бачимо, що різниця між червоними відтінками без накладення шуму має значення R: 50.20% і різниця в прозорості цих самих пікселів A: 50.20%, під час накладання шуму в антидетект-браузері ми отримуємо такі значення R: 48.63% і A: 50.59%

У цій статті ми розібрали, яким чином антифрод-системи можуть використовувати технологію WebGL для ідентифікації користувачів, виявлення користувачів, які використовують підміну відбитка. Технологія WebGL дає змогу зібрати велику кількість інформації для ідентифікації користувачів, з цієї причини вона часто використовується в антифрод-системах. Водночас зміна інформації про відеокарту (unmaskedVendor, unmaskedRenderer, vendor, renderer, shadingLanguage, version, shadingLanguage2, version2) у межах однієї лінійки виробника відеокарт дає змогу змінити відбиток і не викликати підозру в антифрод-систем.

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

_Bannykh M.V._

Пов'язані публікації

Антидетект

Технологія Canvas в антифрод-системах та методи ідентифікації користувачів.

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

Antidetect

26.10.24

Антидетект

Порівняння продуктивності та можливостей WebGPU на різних пристроях для антифрод-завдань

Технологія WebGPU в Антифрод-системах і методи ідентифікації користувачів

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

_Bannykh M.V._

09.11.24