Фингерпринтинг экрана и окна: отслеживание дисплея

Введение

Конфигурация дисплея вашего браузера сообщает веб-сайтам многое о вашем устройстве. Разрешение экрана, глубина цвета, соотношение пикселей устройства, доступная область экрана и размеры окна доступны через стандартные JavaScript API. Никаких разрешений не требуется. Эти значения различаются между устройствами и конфигурациями мониторов, что делает их полезными компонентами отпечатка браузера. Дисплей 1920x1080 при 1x DPI отличается от 2560x1600 при 2x DPI, что отличается от 3840x2160 при 1.5x. В сочетании с другими сигналами свойства дисплея вносят значительную энтропию в отпечаток отслеживания. Эта статья объясняет, как работает снятие отпечатков по экрану и окну, и как BotBrowser обеспечивает контролируемую, согласованную идентичность дисплея через систему профилей.

Влияние на конфиденциальность

Свойства дисплея являются частью снятия отпечатков с самых ранних скриптов отслеживания. Проект Panopticlick от EFF сообщил, что только разрешение экрана дает около 4,8 бит энтропии, что достаточно для различения примерно 28 групп. При объединении с глубиной цвета, соотношением пикселей устройства и доступной областью экрана (которая раскрывает размер и положение панели задач), комбинированный отпечаток дисплея может вносить более 8 бит энтропии.

Распространение дисплеев с высоким DPI, ультраширокими мониторами и мультимониторными конфигурациями увеличило разнообразие дисплеев. Десять лет назад большинство пользователей настольных компьютеров имели экраны 1920x1080. Сегодня распространенные разрешения включают 2560x1440, 3840x2160, 2560x1600 (MacBook), 2880x1800 и различные ультраширокие конфигурации. Мобильные устройства добавляют еще больше разнообразия с разрешениями и соотношениями пикселей для каждой модели.

Особенно эффективная техника объединяет разрешение экрана с размерами окна. Разница между размером экрана и размером окна раскрывает информацию о визуальных элементах ОС: высоту панели задач, ширину дока, оформление окна. Эти отступы различаются между Windows, macOS и Linux, и между версиями ОС. Зазор в 40 пикселей между screen.height и screen.availHeight предполагает Windows с нижней панелью задач. Зазор в 25 пикселей может указывать на macOS со скрытым доком.

Техническая основа

Свойства экрана

Объект screen предоставляет информацию о дисплее:

• screen.width / screen.height - полное разрешение экрана в CSS-пикселях.
• screen.availWidth / screen.availHeight - область экрана, доступная для окон браузера (за вычетом панелей задач, доков и т.д.).
• screen.colorDepth - глубина цвета в битах на пиксель. Почти повсеместно 24 на современных системах.
• screen.pixelDepth - обычно равна colorDepth.

Свойства окна

Объект window раскрывает внутренние и внешние размеры:

• window.innerWidth / window.innerHeight - размеры области просмотра, исключая элементы браузера.
• window.outerWidth / window.outerHeight - общие размеры окна, включая элементы браузера (панель инструментов, вкладки, полоса прокрутки).
• window.screenX / window.screenY - положение окна на экране.

Соотношение пикселей устройства

• window.devicePixelRatio - соотношение между физическими пикселями и CSS-пикселями. Значение 2 означает, что каждый CSS-пиксель отображается на сетку 2x2 физических пикселей (распространено на Retina/HiDPI дисплеях).

Медиа-запросы CSS

Медиа-запросы обеспечивают доступ к характеристикам дисплея из CSS:

@media (min-resolution: 2dppx) { /* Стили для HiDPI */ }
@media (color-gamut: p3) { /* Широкая цветовая гамма */ }
@media (prefers-color-scheme: dark) { /* Темный режим */ }

JavaScript может запрашивать их через window.matchMedia(), обеспечивая еще один путь для чтения свойств дисплея.

Почему эти значения различаются

Свойства дисплея зависят от нескольких факторов:

• Оборудование монитора. Физическое разрешение, размер и возможности определяют базовые значения.
• Настройки дисплея ОС. Настройки масштабирования (100%, 125%, 150%, 200%) влияют на соотношение между физическими и CSS-пикселями.
• Мультимониторная конфигурация. Несколько дисплеев с различным разрешением и масштабированием создают уникальные конфигурации.
• Состояние окна браузера. Максимизированный, оконный или полноэкранный режим влияет на внутренние/внешние размеры.
• Визуальные элементы ОС. Размер и положение панели задач/дока влияют на доступную область экрана.

Комбинация этих факторов создает сигнал с высокой энтропией. Пользователь с ультраширокоформатным монитором 3440x1440 при масштабе 1.25x, с панелью задач Windows высотой 48 пикселей, имеет весьма отличительный отпечаток дисплея.

Распространенные подходы к защите и их ограничения

Расширения браузера, модифицирующие свойства экрана, обычно переопределяют JavaScript-геттеры на объектах screen и window. Это создает несколько проблем. CSS-медиа-запросы могут читать реальные значения независимо от JavaScript. API visualViewport обеспечивает другое чтение размеров области просмотра. Переопределенные геттеры могут быть обнаружены через проверку прототипов и анализ таймингов.

Использование распространенного разрешения (установка дисплея на 1920x1080) уменьшает уникальность, но не решает проблему размеров окна, доступной области экрана или соотношения пикселей устройства. Это также жертвует качеством отображения на HiDPI мониторах.

Рандомизация значений дисплея создает физически невозможные конфигурации. Ширина экрана в 1923 пикселя не соответствует никакому реальному монитору. Соотношение пикселей устройства 1.37 не соответствует никакой реальной настройке масштабирования. Такие значения обнаруживаемы как синтетические.

Запуск в виртуальной машине с контролируемыми настройками дисплея помогает, но вводит специфические для ВМ сигналы. Видеодрайверы ВМ часто сообщают специфические наборы возможностей и комбинации параметров, идентифицирующие платформу виртуализации.

Безголовые режимы браузера представляют собственную проблему. Безголовый Chromium по умолчанию использует область просмотра 800x600 с соотношением пикселей 1, что является отличительным отпечатком, поскольку очень мало реальных пользователей просматривают при такой конфигурации.

Подход BotBrowser на уровне движка

BotBrowser контролирует все свойства дисплея на уровне движка Chromium через систему профилей.

Полный профиль дисплея

При загрузке профиля отпечатков BotBrowser настраивает:

• Размеры экрана (screen.width, screen.height, screen.availWidth, screen.availHeight) для соответствия профилированному устройству.
• Размеры окна (window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight) с реалистичными отступами визуальных элементов ОС, выведенными из профиля.
• Соотношение пикселей устройства соответствующее конфигурации профилированного дисплея.
• Глубину цвета и глубину пикселей согласованные с профилированным устройством.

Выравнивание CSS-медиа-запросов

BotBrowser обеспечивает, что CSS-медиа-запросы возвращают значения, согласованные со свойствами JavaScript. matchMedia('(min-width: 1920px)') согласуется с screen.width. matchMedia('(resolution: 2dppx)') согласуется с devicePixelRatio. Нет зазора между запросами дисплея через CSS и JavaScript.

Симуляция визуальных элементов ОС

Разница между внешними и внутренними размерами окна, а также между размером экрана и доступной областью экрана, выведена из целевой ОС профиля. Профиль Windows включает типичные для Windows границы и размеры панели задач. Профиль macOS включает типичные для macOS размеры строки меню и оформления окна.

Контроль безголового режима

В безголовом режиме BotBrowser применяет конфигурацию дисплея профиля вместо значения по умолчанию 800x600. Это означает, что безголовые сессии имеют свойства дисплея, неотличимые от обычных сессий с тем же профилем.

Настройка и использование

Базовая защита дисплея

chrome --bot-profile="/path/to/profile.enc" \
       --user-data-dir="$(mktemp -d)"

Конфигурация окна и экрана

# Использование настроек окна из профиля (по умолчанию для безголового режима)
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=profile \
       --bot-config-screen=profile

# Указание точного размера окна
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=1920x1080

# Указание точного размера экрана
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-screen=2560x1440

# Полная кастомизация в JSON
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window='{"innerWidth":1920,"innerHeight":1080,"devicePixelRatio":2}'

# Использование реальных системных размеров (по умолчанию для десктопного обычного режима)
chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-window=real \
       --bot-config-screen=real

Контроль цветовой схемы

chrome --bot-profile="/path/to/profile.enc" \
       --bot-config-color-scheme=light

Интеграция с Playwright

const { chromium } = require('playwright');

const browser = await chromium.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-config-window=profile',
    '--bot-config-screen=profile'
  ]
});

const page = await browser.newPage();
await page.goto('https://example.com');

const screenInfo = await page.evaluate(() => ({
  screenWidth: screen.width,
  screenHeight: screen.height,
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight,
  devicePixelRatio: window.devicePixelRatio
}));
console.log(screenInfo);

Интеграция с Puppeteer

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch({
  executablePath: '/path/to/botbrowser/chrome',
  defaultViewport: null,  // Важно: использовать размеры профиля
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-config-window=profile',
    '--bot-config-screen=profile'
  ]
});

const page = await browser.newPage();
await page.goto('https://example.com');

Обратите внимание на настройку defaultViewport: null в Puppeteer. Без этого Puppeteer переопределяет область просмотра своими значениями по умолчанию, что конфликтует с настройками дисплея профиля.

Верификация

Проверка свойств экрана. Запросите screen.width, screen.height, screen.availWidth, screen.availHeight и screen.colorDepth. Все значения должны совпадать с целевым устройством профиля.

Проверка размеров окна. Запросите window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight. Отступы между внутренними и внешними должны быть реалистичными для профилированной ОС.

Проверка DPI. Убедитесь, что window.devicePixelRatio соответствует профилю. Проверьте, что CSS-медиа-запросы для разрешения согласуются.

Согласованность медиа-запросов. Используйте window.matchMedia() для запроса медиа-функций дисплея и подтвердите их соответствие значениям JavaScript-свойств.

Лучшие практики

• Используйте defaultViewport: null в Puppeteer. Это предотвращает переопределение Puppeteer настроек дисплея профиля.
• Используйте --bot-config-window=profile в безголовом режиме. Это применяет размеры окна профиля вместо области просмотра безголового режима по умолчанию.
• Сопоставляйте профиль дисплея с вариантом использования. Если IP вашего прокси указывает на регион, где распространен мобильный просмотр, рассмотрите использование мобильного профиля с подходящими размерами экрана.
• Не устанавливайте нереалистичные разрешения. Значения 1920x1080, 2560x1440 и 1440x900 распространены. Значения 1919x1079 - нет.
• Учитывайте соотношение пикселей устройства. Профили с высоким DPI сообщают более высокие физические разрешения с DPR 2 или 3. Убедитесь, что DPR вашего профиля согласован с заявленным размером экрана.

FAQ

Вопрос: Обрабатывает ли BotBrowser обнаружение нескольких мониторов? Ответ: Профили BotBrowser описывают одну конфигурацию дисплея. Значения экрана профиля представляют основной монитор, как он сообщается веб-контенту. Отслеживание перемещения окна между мониторами по умолчанию не раскрывается веб-страницам.

Вопрос: Что происходит при изменении размера окна браузера с загруженным профилем? Ответ: window.innerWidth и window.innerHeight обновляются для отражения фактического размера окна (в обычном режиме с --bot-config-window=real). В безголовом режиме или с --bot-config-window=profile значения остаются контролируемыми профилем.

Вопрос: Влияет ли настройка цветовой схемы на рендеринг? Ответ: Да. --bot-config-color-scheme=dark делает prefers-color-scheme: dark истинным в CSS-медиа-запросах и matchMedia(). Веб-сайты, реализующие темный режим, будут рендериться соответственно.

Вопрос: Одинаков ли отпечаток экрана в безголовом и обычном режиме? Ответ: При использовании --bot-config-window=profile и --bot-config-screen=profile - да. Без этих флагов обычный режим по умолчанию использует реальные размеры окна/экрана, а безголовый - профиль.

Вопрос: Поддерживает ли BotBrowser ультраширокие или нестандартные соотношения сторон? Ответ: Профили BotBrowser могут включать любую конфигурацию экрана, существующую на реальном оборудовании. Если профиль был снят с устройства с ультраширокоформатным монитором, эти размеры доступны.

Вопрос: Как visualViewport API взаимодействует с защитой BotBrowser? Ответ: API visualViewport возвращает значения, согласованные с контролируемыми размерами окна. Нет зазора между window.innerWidth и visualViewport.width.

Итоги

Свойства экрана и окна являются одними из наиболее часто собираемых сигналов отпечатков, потому что не требуют разрешений и широко варьируются между аппаратными конфигурациями. BotBrowser контролирует все значения, связанные с дисплеем, на уровне движка, включая размеры экрана, размеры окна, соотношение пикселей устройства, глубину цвета и CSS-медиа-запросы. При загрузке полного профиля отпечатков все сигналы дисплея соответствуют реальной конфигурации устройства, и безголовые сессии производят тот же отпечаток дисплея, что и обычные сессии.

Смежные темы: What is Browser Fingerprinting, CSS Signal Consistency, Navigator Property Protection и Deterministic Browser Behavior.