Размеры окна браузера и события в браузере, антифрод-системы и методы идентификации пользователей

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 в создании точных цифровых отпечатков и выявле

_Bannykh M.V._

09.11.24

Антидетект

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

Технология Web Audio API в Антифрод-системах и методы идентификации пользователей

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

Bannykh M.V.

17.11.24

Размеры окна браузера и события в браузере, антифрод-системы и методы идентификации пользователей

Похожие посты

Технология WebGPU в Антифрод-системах и методы идентификации пользователей

Технология Web Audio API в Антифрод-системах и методы идентификации пользователей