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 для браузера можна подивитися на тестовій сторінці https://test-webapi.tech/webglfull, найбільш значущі параметри для антифрод-систем ми розглянемо докладніше, але спочатку перевіримо, як працює накладення шуму в WebGL. Детально про те, як формуються значення при знятті відбитка, ми розповідали в статті, зараз же проведемо невеликий тест, подивимося на відбиток WebGL браузера Chrome і антидетект-браузера без шуму і з використанням шуму, відкриємо в кожному з них сторінку https://browserleaks.com/webgl Браузер 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, відкривши в браузері нашу тестову сторінку https://test-webapi.tech/webglmaxfr, яка перевіряє максимальну кількість векторів уніформ під навантаженням. Браузер Chrome на комп'ютері: Реальне значення відповідає заявленому у властивостях браузера. Оскільки десктоп-пристрої зазвичай мають значення maxFragmentUniformVectors, що дорівнює 1024, відкриємо цю саму сторінку на мобільному телефоні Android у браузері Chrome: У браузері мобільного телефону дані, отримані з властивостей браузера, так само відповідають реальним характеристикам. Тепер спробуємо в антидетект-браузері підмінити значення на значення телефону і повторимо тест. Відкриємо нашу тестову сторінку: Антидетект-браузер із підміною значення maxFragmentUniformVectors не пройшов перевірку, і це логічно, адже ми запускаємо його на нашому комп'ютері зі значенням maxFragmentUniformVectors:1024 Проведемо аналогічний тест для maxTextureSize, відкриємо в браузері нашу тестову сторінку https://test-webapi.tech/webglmaxt, яка перевіряє під навантаженням максимальний розмір текстури в контексті 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 за допомогою накладення шуму заснована на підміні значень кольору пікселів, а конкретно кольору напівпрозорих пікселів. Представлений підхід перебуває в стадії тестування і не охоплює всі можливі варіанти підміни. Приступимо до тестів: Відкриємо сторінку https://test-webapi.tech/webgltamper у звичайному браузері 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._
