Розміри вікна браузера та події в браузері, антифрод-системи та методи ідентифікації користувачів

05.01.25

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

###### Історія та застосування аналізу розмірів вікна браузера

Вимірювання розмірів вікна браузера (viewport) вперше стало доступним розробникам через DOM API, починаючи з ранніх версій JavaScript. Ці дані використовувалися для адаптації контенту під екрани користувачів. З розвитком технологій антифрод-системи почали використовувати розміри вікна як додатковий параметр для створення цифрового відбитка користувача.

Сьогодні дані про розмір вікна можуть включати:

- Розміри viewport (window.innerWidth і window.innerHeight).
- Загальний розмір вікна браузера.
- Підтримувану роздільну здатність екрана.
- Частоту оновлення дисплея.
Ці параметри можуть варіюватися залежно від пристрою, операційної системи та браузера, створюючи унікальний набір характеристик.

###### Розміри вікна в HTTP-заголовках
Деякі браузери передають інформацію про розміри вікна в HTTP-заголовках, таких як User-Agent Client Hints (наприклад, Viewport-Width і Device-Width). Це дає змогу веб-сайтам адаптувати контент під розміри екрана, але також дає антифрод-системам можливість використовувати ці дані для перевірки на підміну.

**Приклад переданих даних:**
- Viewport-Width: 1920
- Device-Width: 2560

Невідповідність між заявленими даними та реальними розмірами вікна може вказувати на використання антидетект-браузера.

###### Методи ідентифікації користувачів через розміри вікна

**1. Аналіз стабільності розмірів**
Антифрод-системи відстежують зміни розмірів вікна під час сесії. Наприклад:
- Різкі зміни розмірів (особливо якщо вони відповідають популярним попередньо встановленим дозволам) можуть вказувати на підміну.
- Постійні значення розмірів вікна, нехарактерні для пристрою, можуть бути ознаками емуляції.

**2. Порівняння з роздільною здатністю екрана**
Система перевіряє, чи відповідають розміри вікна заявленій роздільній здатності екрана:
- Якщо роздільна здатність екрана 1920×1080, а розміри вікна 3000×2000, це може бути спроба підміни.

**3. використання аномалій у рендерингу**.
Іноді браузери можуть повідомляти некоректні розміри вікна через особливості обробки DOM або графічного середовища. Ці аномалії можна використовувати для виявлення підроблених пристроїв.

###### Методи підміни розмірів вікна

Шахраї використовують такі підходи для маскування:
1. **Фіктивні розміри:** зміна значень window.innerWidth і window.innerHeight через інструменти розробника або плагіни.

2. **Використання попередньо встановлених параметрів:** емуляція розмірів популярних пристроїв, щоб уникнути підозр.

3. **Підміна HTTP-заголовків:** зміна значень Viewport-Width і Device-Width.

###### Методи виявлення підміни

**1. Тестування розмірів вікна**.
Антифрод-система може створювати сценарії, які вимагають зміни розмірів вікна (наприклад, спливаючі вікна). Підроблені браузери можуть неадекватно реагувати на такі запити.

**2. Перевірка відповідності розмірів**
Порівняння даних із DOM (наприклад, window.innerWidth) з даними з HTTP-заголовків допомагає виявити розбіжності.

**3. аналіз поведінки користувача**
Зміни розмірів вікна під час взаємодії з сайтом можуть бути незвично плавними або, навпаки, надмірно різкими в разі емуляції.

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

Відкриємо в браузері Chrome сторінку <a href="http://browserleaks.com/javascript" target="_blank">browserleaks.com/javascript</a>

![](/media/mdeditor/1_20250105180831031648.png)

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

Відкриємо нашу тестову сторінку <a href="http://test-webapi.tech/screen" target="_blank">test-webapi.tech/screen</a>

![](/media/mdeditor/2_20250105180857914859.png)

На тестовій сторінці представлено такі параметри:

**Orientation Type**
Показує поточну орієнтацію екрана пристрою (наприклад, portrait-primary, landscape-primary).

**Orientation Angle**
Кут повороту екрана щодо його природної орієнтації, у градусах.

**Avail Width**
Ширина екрана, доступна для використання (за винятком системних елементів, таких як панель завдань).

**Outer Width**
Повна ширина вікна браузера, включно з областями за межами видимої сторінки, як-от смуги прокрутки та рамки.

**Screen Width**
Повна ширина екрана пристрою в пікселях.

**Inner Width**
Ширина видимої області контенту вікна браузера (без смуг прокрутки і рамок).

**Avail Height**
Висота екрана, доступна для використання (за винятком системних елементів, як-от панель завдань).

**Outer Height**
Повна висота вікна браузера, включно з областями за межами видимої сторінки, як-от смуги прокрутки та рамки.

**Screen Height**
Повна висота екрана пристрою в пікселях.

**Inner Height**
Висота видимої області контенту вікна браузера (без смуг прокрутки і рамок).

**Avail Left**
Позиція доступної області екрана по горизонталі відносно початку екрана (зазвичай 0).

**Avail Top**
Позиція доступної області екрана по вертикалі відносно початку екрана (зазвичай 0).

**Max Touch Points**
Максимальна кількість точок дотику, підтримувана пристроєм.

**Color Depth**
Кількість біт, що використовуються для представлення кольору одного пікселя екрана.
Наприклад, 24 або 32.
**Pixel Depth**
Глибина пікселя в бітах, зазвичай збігається зі значенням Color Depth.

**Device Pixel Ratio**
Співвідношення фізичних пікселів пристрою до логічних пікселів. Наприклад, 1.0 для стандартних екранів або 2.0 для Retina-дисплеїв.

**Client Width**
Ширина області контенту всередині елемента html без смуг прокрутки.

**Client Height**
Висота області контенту всередині елемента html без смуг прокрутки.

**Screen X**
Горизонтальна позиція верхнього лівого кута вікна браузера відносно екрана пристрою, у пікселях.

**Screen Y**
Вертикальна позиція верхнього лівого кута вікна браузера відносно екрана пристрою, у пікселях.

**Scroll Width**
Повна ширина вмісту сторінки, включно з прихованими областями, які можна прокрутити.

**Scroll Height**
Повна висота вмісту сторінки, включно з прихованими областями, які можна прокрутити.

**Visual Viewport Width**
Ширина області, що відображається користувачеві, включно з можливим масштабуванням.

**Visual Viewport Height**
Висота області, що відображається користувачеві, включно з можливим масштабуванням.

**Scroll X**
Зсув сторінки по горизонталі від початку, у пікселях.

**Scroll Y**
Зміщення сторінки по вертикалі від початку, у пікселях.

**Height Difference (Outer - Inner)**
Різниця між повною висотою вікна браузера і видимою висотою контенту. Представлено для визначення розміру адміністративної панелі браузера.

Серед представлених параметрів є параметри, які змінюються рідко в межах одного профілю, наприклад: Orientation Type, Розміри екрана, Color Depth, Pixel Depth, Max Touch Points, є параметри, які можуть змінюватися тільки на певних типах пристроїв, наприклад: Orientation Angle, Screen X, Screen Y.
Порівняємо дані, отримані з браузера Chrome і антидетект-браузера:

![](/media/mdeditor/3_20250105181233074766.png)

Для десктоп-версії, антидетект-браузер досить добре підміняє параметри розмірів екрана і браузера, але значення Screen X і Screen Y дорівнюють 0, що відповідає тому, що наш браузер прив'язаний до лівого верхнього кута екрана і таке розташування ми отримуватимемо в антидетект-браузері під час кожного відкриття профілю, тоді як за замовчуванням нове вікно справжнього браузера Chrome відкривається по центру екрана. Потрібно зазначити, що розміри браузера ми отримуватимемо щоразу однакові під час використання профілю, тоді як у звичайного користувача розміри вікна браузера, відкритого не на повний екран, часто змінюються.

Звернемо увагу на значення Height Difference, у браузері Chrome, що займає частину екрана, висота адміністративної панелі дорівнює 95px, перевіримо це значення в браузері Chrome з панеллю закладок:

![](/media/mdeditor/4_20250105181307462049.jpg)

Висота адміністративної панелі в такому разі дорівнює 129px. Таким чином ресурс може з високою точністю визначати видимість панелі закладок у браузері користувача.
Відкриємо нашу тестову сторінку в браузері Firefox:

![](/media/mdeditor/5_20250105181338281890.jpg)

У браузері Firefox висота адміністративної панелі дорівнює 91px, таким чином антифрод-системи можуть визначати, чи відповідає, чи ні, заявлений користувачем браузер у User-Agent, стандартним розмірам оригінального браузера. Важливо відзначити, що розмір адміністративної панелі в повноекранному режимі браузерів відрізняються від розмірів браузера, що займає частину екрана користувача.
Повторимо тест на мобільному пристрої та антидетект-браузері, який намагається представитися мобільним пристроєм:

![](/media/mdeditor/6_20250105181405781764.jpg)

Антидетект-браузер встановлює значення Inner Height, що дорівнює Outer Height, тоді як у справжньому мобільному браузері значення Inner Height більше значення Outer Height, і така підміна може бути тригером для антифрод-систем. Також зазначимо, що значення вертикальної прокрутки сторінки, в тестованому режимі антидетект-браузера, проводиться тільки на цілі значення пікселів (параметр Scroll Y).

###### Події дій у браузері та їхня роль в антифрод-системах

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

###### Основні події дій у браузері

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

- **Кліки (click, dblclick):** фіксують натискання кнопок миші на елементах сторінки.

- **Прокрутка (scroll):** реєструє зміщення видимої області сторінки.

- **Наведення миші (mouseover, mouseout, mousemove):** відстежує переміщення курсора.

- **Тач-події (touchstart, touchmove, touchend):** фіксують дії на пристроях із сенсорними екранами.

- **Введення тексту (keydown, keyup, input):** реєструють текстові дії користувача.

- **Фокус (focus, blur):** визначають активацію або деактивацію елементів введення.

- **Реакції на зміни (resize, orientationchange):** фіксують зміни розмірів вікна браузера або орієнтації пристрою.

###### Роль подій в антифрод-системах
Антифрод-системи використовують події для аналізу реальної поведінки користувачів і порівняння з очікуваними сценаріями. Ключові аспекти аналізу:

**1. Швидкість і ритм дій**
◦ Боти часто імітують дії користувачів, але можуть демонструвати неприродний ритм, наприклад, занадто швидкі кліки або прокрутку.
◦ У разі прокрутки реальні користувачі схильні до переміщення сторінки з різною швидкістю, тоді як боти можуть використовувати лінійний рух.

**2. Характеристика тач-подій**
◦ Реальні тач-події мають унікальні координати торкання і можуть містити дані про силу натискання (якщо пристрій підтримує такі датчики).
◦ Емуляція тач-подій часто фіксується як фіксоване значення або шаблон координат.

**3. Неприродна поведінка**
◦ Антифрод-системи відстежують повторюваність дій, наприклад, однаковий час між кліками або однаковий кут прокрутки.
◦ Нерухомість курсору протягом тривалого часу також може бути ознакою автоматизації.

###### Методи підміни подій
Зловмисники можуть використовувати різні підходи для емуляції подій:

**1. Автоматизовані скрипти**
Використання бібліотек для автоматизації, таких як Puppeteer або Selenium, для створення штучних подій (наприклад, document.dispatchEvent).

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

**3. Підміна даних подій**
Зміна властивостей події, таких як координати або час виконання, для приховування автоматизації.

###### Методи виявлення підмін
Антифрод-системи застосовують різні підходи для виявлення підміни:

**1. Аналіз часових міток**
Порівняння часових міток подій із реальним часом: штучні події можуть демонструвати нереалістичну швидкість.

**2. Перевірка координат**
Системи аналізують розподіл координат кліків або тач-подій. Підозрілі шаблони (наприклад, концентрування в одному місці) можуть свідчити про підробку.

**3. використання капчі**
Інтерактивні тести вимагають дій, які складно емулювати (наприклад, перетягування елементів).

**4. Порівняння даних браузера**
Параметри подій (наприклад, тач-точки або дані прокрутки) зіставляються з даними пристрою, щоб виявити розбіжності.

Приклади:
Відкриємо тестову сторінку <a href="http://test-webapi.tech/touch" target="_blank">test-webapi.tech/touch</a> у браузері Chrome і введемо текст у поле для введення тексту:

![](/media/mdeditor/7_20250105183347536216.png)

Натиснемо на кнопку:

![](/media/mdeditor/8_20250105183409019980.jpg)

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

Так само записуються події прокрутки сторінки

![](/media/mdeditor/9_20250105183535991652.png)

Для антифрод-систем підозрілим буде виглядати клік по кнопці, якщо до кліка миша не рухалася до координат кнопки на сторінці, або закриття вкладки в браузері без руху миші до панелі браузера.

Перевіримо події на мобільному пристрої та в антидетект-браузері з імітацією мобільного браузера. Порівняємо події введення тексту в поле:

![](/media/mdeditor/10_20250105183605702794.jpg)

На цьому прикладі ми бачимо значні відмінності:

1. Touch-подія відбувається за цілими координатами в антидетект-браузері.
2. Радіус Touch-події в антдетект-браузері становить 11,5px, що більш ніж у 10 разів перевищує реальні показники мобільного пристрою.
3. В антідетект-браузері видима частина екрана не зменшується, не імітується поява на екрані пристрою віртуальної клавіатури, на відміну від справжнього пристрою.

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

Порівняємо події під час гортання сторінки вниз:

![](/media/mdeditor/11_20250105183841404995.jpg)

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

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

![](/media/mdeditor/12_20250105183908400428.png)

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

*Bannykh M.V.*

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

Антидетект

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

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

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

_Bannykh M.V._

09.11.24

Антидетект

Приклад використання Web Audio API для аудіофінгерпринту в антифрод-системах.

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

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

Bannykh M.V.

17.11.24