ttools
User-Agentбраузерыдевелопмент

Что такое User-Agent и как он помогает определить браузер и устройство

Объясняем, что содержится в User-Agent строке и как её используют сайты для аналитики и адаптации контента.

Когда браузер запрашивает страницу с сервера, он представляется — отправляет специальную строку User-Agent. В ней закодирована информация о браузере, операционной системе и устройстве. Сайты используют эти данные для аналитики, адаптации интерфейса и защиты от ботов.

Из чего состоит User-Agent

User-Agent — это HTTP-заголовок, который выглядит как набор символов и цифр. Вот пример из Chrome на Windows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Разберём по частям:

  • Mozilla/5.0 — историческая метка совместимости, которую оставили почти все браузеры
  • Windows NT 10.0; Win64; x64 — операционная система и архитектура процессора
  • AppleWebKit/537.36 — движок рендеринга (Blink в Chrome базируется на WebKit)
  • Chrome/120.0.0.0 — название и версия браузера
  • Safari/537.36 — ещё одна метка совместимости

А вот как выглядит User-Agent мобильного Safari на iPhone:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1

Здесь видно модель устройства (iPhone), версию iOS (17_2) и признак мобильной версии (Mobile/15E148).

Зачем сайтам знать User-Agent

Адаптация интерфейса

Сайты показывают разный контент для десктопов и смартфонов. Если в User-Agent есть слово Mobile, сервер отдаёт мобильную версию или адаптивные стили. Так работают новостные порталы, интернет-магазины и корпоративные сайты.

Исправление багов конкретных браузеров

У каждого браузера свои особенности. Например, старые версии Safari неправильно обрабатывали flexbox. Разработчики проверяли User-Agent и подключали фиксы:

if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
  document.body.classList.add('safari-fixes');
}

Аналитика и статистика

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

Как распознать ботов по User-Agent

Поисковые роботы и парсеры обычно честно представляются. Вот User-Agent Googlebot:

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

А это Яндекс:

Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)

Но недобросовестные парсеры маскируются под обычные браузеры. Их выдают несоответствия:

  • Устаревшая версия браузера при свежей ОС
  • Странные комбинации вроде iPhone с версией Android
  • Отсутствие дополнительных заголовков (например, Accept-Language)

Пример подозрительного User-Agent:

Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 Chrome/90.0.0.0

Здесь отсутствует информация об архитектуре (Win64; x64), а версия Chrome слишком старая для Windows 10 последних сборок.

Client Hints — современная замена User-Agent

Проблема User-Agent в том, что он раскрывает слишком много данных и позволяет отследить пользователя. Браузеры постепенно переходят на User-Agent Client Hints — набор HTTP-заголовков, которые сервер запрашивает явно.

Браузер отправляет минимум данных:

Sec-CH-UA: "Chromium";v="120", "Google Chrome";v="120"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "Windows"

Если серверу нужны подробности, он запрашивает дополнительные заголовки через Accept-CH:

Accept-CH: Sec-CH-UA-Full-Version, Sec-CH-UA-Platform-Version

Тогда браузер добавит:

Sec-CH-UA-Full-Version: "120.0.6099.109"
Sec-CH-UA-Platform-Version: "10.0.0"

Это решает проблему приватности, но пока поддерживается только в Chromium-браузерах.

Как проверить свой User-Agent

Самый простой способ — открыть консоль браузера и выполнить:

console.log(navigator.userAgent);

Или отправить запрос на тестовый сервер:

fetch('https://httpbin.org/user-agent')
  .then(res => res.json())
  .then(data => console.log(data));

Для проверки User-Agent и других технических заголовков удобно использовать специализированные инструменты. Парсер User-Agent покажет детальную информацию: браузер, версию, операционную систему и тип устройства. А HTTP-заголовки отобразят все данные, которые ваш браузер отправляет серверу, включая языковые настройки и параметры безопасности.

Можно ли подделать User-Agent

Да, это делается в настройках браузера или через расширения. В DevTools Chrome:

  1. Откройте инструменты разработчика (F12)
  2. Нажмите три точки → More tools → Network conditions
  3. Снимите галочку «Use browser default»
  4. Выберите нужный User-Agent из списка

В коде это выглядит так:

// В Puppeteer
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)');

// В fetch-запросе
fetch('https://example.com', {
  headers: {
    'User-Agent': 'Custom Bot/1.0'
  }
});

Разработчики используют это для тестирования мобильных версий сайтов без реального смартфона. Парсеры меняют User-Agent, чтобы обойти ограничения. Но серверы проверяют не только этот заголовок — несоответствие с другими данными (вроде разрешения экрана или поддерживаемых технологий) выдаёт подмену.

Инструменты по теме