13 березня 2025

Що таке ClientRects

Що таке ClientRects

Вітаємо вас, дорогі друзі. Сьогодні ми поговоримо про такий відбиток браузера, як Client Rects. Вперше про цей відбиток користувачі заговорили у 2016 році після появи першої базової та простої можливості його перевірки на чекері Browserleaks. На той момент його підміна не здавалася чимось складним. Але реалізувати максимально натуральну підміну та виключити можливість її виявлення зовсім не так просто, як здається на перший погляд. До цих пір більшість популярних рішень на ринку не можуть грамотно та якісно підміняти цей відбиток.

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

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

Інформація про розмір включає в себе ширину (width) та висоту (height) елемента в пікселях.

Інформація про розташування включає в себе координати лівої верхньої точки елемента (left або X; top або Y) та правої нижньої точки об'єкта (right і bottom) відносно видимої області веб-сторінки в браузері (viewport).

Сукупність цієї інформації називається «rectangles» (rects). Наочніше ви можете ознайомитися на зображенні нижче.

fast proxy

Тепер розглянемо чекер browserleaks.com[https://browserleaks.com/rects] щоб детальніше розібратися, як саме формується відбиток Client Rects.

fast proxy

Цей сайт використовує три елементи для створення відбитку (String 1, String 2, String 3). Після того як ви відкриваєте сторінку чекера, Browserleaks отримує інформацію про розміри цих елементів (width, height) та їх координати (x/left, y/top, right, bottom) у пікселях відносно пунктирної рамки. Як ви можете помітити, значення параметрів елементів не округлюються до цілих чисел, а надаються з максимальною точністю до 16 цифр після коми.

Після отримання необхідних даних про ці три елементи, Browserleaks обробляє інформацію для кожного елемента, перетворюючи її в хеш (Hash String 1, Hash String 2, Hash String 3). Потім чекер використовує ці три хеші та об'єднує їх в один (Full Hash), який вже можна назвати відбитком Client Rects.

Звичайно, це один з найпростіших прикладів того, як можна зняти відбиток Client Rects. Наприклад, чекер https://privacycheck.sec.lrz.de/active/fp_gcr/fp_getclientrects.html використовує дещо складнішу схему для отримання відбитку, застосовуючи більше HTML-елементів різного типу. Сучасні антифрод-системи можуть використовувати значно складніші схеми для отримання цього відбитку, порівнювати його з власною базою даних, об'єднувати з іншими відбитками, параметрами, IP-адресами для ідентифікації користувача та захисту від мультаккаунтингу.

Основною причиною, чому анти-фрод системи можуть використовувати цей відбиток пальця для запобігання мультиаккаунтингу, відстеження та ідентифікації користувача, є невеликі відмінності в результатах значень параметрів на різних пристроях. Якщо ви відкриєте веб-сторінку перевірки клієнтських реквізитів на двох різних комп'ютерах, три елементи візуально виглядатимуть ідентично, але значення параметрів кожного елемента будуть відрізнятися, а отже, всі 3 Hash String і Full Hash матимуть різні значення. Будь-яка зміна значень, навіть на одну стотисячну частку пікселя, може змінити ваш відбиток.

Приклад відбитку Client Rects у Windows 10 Google Chrome з різним масштабуванням:

fast proxy

Виникає логічне запитання: які "змінні" можуть впливати на те, що два різних пристрої можуть відображати значення параметрів з невеликою різницею? Відповідь проста — безліч! Тип пристрою, операційна система, версія операційної системи, відеокарта, монітор, роздільна здатність екрану, масштаб у системі, тип браузера, версія браузера, зум сторінки браузера, шрифти – це основні "змінні" які можуть впливати на значення параметрів, а отже, і на відбиток в цілому.

Розглянемо послідовний приклад у контексті браузера Google Chrome: використання мобільного пристрою дає один відбиток, використання ноутбука – інший відбиток. Підключаємо монітор 2К, а потім 4К – відбитки будуть різними. Змінюємо Windows 10 на Windows 11 – відбиток зміниться, змінюємо масштаб Windows з 100% до 125% – відбиток теж змінюється, запускаємо браузер через вбудовану відеокарту ноутбука Intel – один відбиток, запускаємо через дискретну відеокарту – інший відбиток. І так далі.

Приклад відбитку Client Rects у Windows 10 Google Chrome з різним масштабуванням:

fast proxy

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

Можна виділити два основні методи підміни відбитку Client Rects: використання аддонів або розширень у браузері та використання антидетект-браузера. Розглянемо кожен з них детальніше.

Використання аддонів або розширень у браузері – це найпростіший спосіб підміни відбитку. Проте він має кілька суттєвих недоліків:

  • Можливість виявлення розширення або аддону. Методи ідентифікації користувача дозволяють визначити, які розширення та аддони встановлені у користувача. При виявленні відповідних доповнень сучасна антифрод-система однозначно подасть сигнал тривоги.
  • Низька якість підміни відбитку. Технології підміни, що використовуються у таких розширеннях та аддонах, залишають бажати кращого. Чим нижча якість підміни, тим вищий шанс, що антифрод-система її виявить.
  • Використання блокування замість підміни. Деякі доповнення у браузері можуть використовувати блокування Javascript або технології Client Rects. Це найгірший варіант. Окрім виявлення через блокування, браузер може «криво» відображати елементи веб-сторінки. У такому випадку можна забути про коректну роботу з певними сайтами.

Використання цього методу можна допустити лише як одне з ланок у ланцюгу безпеки та анонімності, але зовсім не для роботи або мультаккаунтингу. Популярні аддони для підміни у Mozilla Firefox: CanvasBlocker, Trace, Chameleon; розширення для Google Chrome: ClientRects Fingerprint Defender, Trace.

Використання браузера з антидетектором - найкращий спосіб підміни відбитка пальця Client Rects. Але не поспішайте використовувати перший-ліпший продукт, який попадеться під руку, поспішати в цьому питанні не потрібно. Важливо вибрати правильне програмне забезпечення, яке дозволить отримати найкращий результат підміни.

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

Нове покоління Linken Sphere використовує зовсім інший метод заміщення, заснований на технології вбудованого масштабування, що дозволяє отримати ідеальне заміщення за 8 з 10 сеансів.

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

fast proxy

На скріншоті вище відображено результати перевірки на сайті Browserleaks у звичайному браузері Google Chrome, Linken Sphere 2 та в одному з популярних антидетект-браузерів на ринку. Неозброєним оком видно, як некоректно відображаються елементи через підміну відбитку за допомогою використання шумів.

Також для перевірки якості підміни можна рекомендувати такий чекер, як CreepJS. На відміну від інших сервісів перевірки відбитку Client Rects, на цьому веб-сайті можна оцінити якість підміни. Для цього потрібно, при увімкненій підміні, переглянути в розділі "Browser" пункт "lies".

fast proxy

Параметр "lies" повинен мати значення "none" як показано зліва на скріншоті. При виявленні підміни цей пункт буде підсвічуватися, а в дужках буде вказана кількість помилок. У цьому випадку, при кліку на значення lies, можна більш детально переглянути ці помилки. При виявленні підміни помилки можуть з'являтися у таких функціях, як "Element.getClientRects:", "Range.getClientRects:", "Range.getBoundingClientRect:", "DOMRect.height:", "DOMRectReadOnly.top:" etc.

Приклад помилок при виявленні підміни клієнтських ректів:

fast proxy

А тепер порівняймо результати на CreepJS при увімкненій підміні в Linken Sphere 2 та в іншому подібному продукті:

fast proxy

Легко помітити, як цей чекер з легкістю може визначити підміну відбитку Client Rects, у той час як у Sphere проблем із детектуванням не спостерігається.

Але було б недобре і необ'єктивно не згадати, що в попередньому поколінні Sphere реалізація підміни відбитку Client Rects була далеко не ідеальною. З цієї причини в підтримці радили не використовувати її без крайньої необхідності.

Порівняння підміни відбитку в Linken Sphere 2 та Linken Sphere 9:

fast proxy

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

Related articles