Мне нужна твоя куртка и User-Agent

User-Agent – всего лишь строчка в заголовке запроса к серверу, но за ней скрывается много интересного.

Что такое User-Agent

При посещении интернет-ресурса клиентское приложение, например браузер, посылает серверу информацию о себе.

В одной из строк HTTP-запроса начинающейся с User-Agent может содержаться:

  • название и версия клиентского приложения;
  • версия операционной системы;
  • модель устройства;
  • язык.

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

Зачем нужен User-Agent

Назначение User-Agent – идентифицировать клиента.

Использовать данную информацию можно чтобы:

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

У кого еще есть User-Agent

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

Браузеры: Firefox, Chrome, Safari, Яндекс.Браузер, Microsoft Edge, Internet Explorer, BlackBerry, Opera, Opera Mini, iOS Safari, Chrome для Android, Samsung Internet, QQ.

Поисковые сканеры и боты: Yandex, Google, Google Images, Yahoo, TelegramBot, TwitterBot и множество других.

Консоли: PlayStation 4/5, Wii, PlayStation Portable и Bunjalloo – встроенный браузер Nintendo DS.

Устаревшие операционные системы (например, AmigaVoyager).

Оффлайн браузеры и менеджеры закачек (например, Wget и Offline Explorer).

Прочие девайсы: читалки, валидаторы, облачные платформы, медиаплееры, почтовые библиотеки и скрипты.

История User-Agent за 1 минуту

Впервые строка User-Agent появилась в Mosaic, популярном браузере начала 90-х годов.

Mosaic/0.9

Практической пользы от нее не было, пока не появился браузер Navigator компании Netscape. Он перенял у предшественника строку, добавив в нее сведения об операционной системе.

Mozilla/1.0 (Win3.1)

Mozilla в данном случае – не всем известный Firefox, выпущенный гораздо позже, а кодовое имя Netscape Navigator, аббревиатура от Mosaic Killer (убийца Mosaic).

На заре интернета, юзерагенты использовались чтобы отличать Mosaic от Mozilla, обладающих разными возможностями. В частности, Mosaic не поддерживал фреймы, а Mozilla поддерживал. Многие web-сервера могли работать только с одним из них.

В 1995 году появился Internet Explorer. Чтобы получать от серверов контент, предназначенный для его главного конкурента Mozilla, он заявил, что Mozilla-совместим и подделал свой User-Agent на Mozilla/1.22 (compatible; MSIE 2.0; Windows 95). А позже и вовсе вытеснил его, заняв 95% рынка. Теперь уже User-Agent от Internet Explorer стали подделывать другие браузеры.

Но война браузеров и браузерных движков только начиналась. Производители по-своему реализовывали функционал, что приводило к несовместимости. Сайты, написанные под определенный браузер, могли не работать в другом. Популярность браузера определялась не следованием стандартам, а поддержкой вебмастеров. Когда один из движков начинал доминировать, другим ничего не оставалось как подстроится под него. Чтобы обмануть web-сервера, приходилось имитировать популярный User-Agent.

Так User-Agent становился все запутаннее, несмотря на то, что его основным назначением было и остается правильная идентификация клиента.

По иронии, позже именно вебмастера и пострадали, когда страсти улеглись, сайты пришлось писать так, чтобы те работали во всех браузерах, а это выражалось в сложности и возросшим объёмом кода. Среди читателей наверняка есть те, кто еще помнит библиотеки Normalize.cssModernizer и прочие.

В 2020 году разработчики Chrome заявили, что собираются отказаться от использования User-Agent, мотивируя решение защитой приватности и тем, что в юзерагенте передается избыточная информация. Вместо этого Chrome предлагает использовать новый API под названием Client Hints. Другие разработчики браузеров, включая Mozilla Firefox, Microsoft Edge и Apple Safari поддержали решение об отказе, но как оно будет реализовано на момент написания статьи не известно.

Где узнать свой User-Agent

Способ 1: Онлайн

Есть множество онлайн сервисов способных показать используемый User-Agent. Например, можно перейти на Яндекс.Интернетометр и увидеть его в разделе Техническая информация.

Способ 2: Через инструменты разработчика

Откройте инструменты разработчика, перейдите на вкладку Network, обновите страницу и выберите любой сетевой запрос.

Network User Agent

На вкладке Headers, среди прочих заголовков будет и текущий User-Agent.

Как расшифровать строку User-Agent

На момент написания статьи User-Agent браузера Chrome версии 88 выглядит так:

Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36

Edge (Chromium based)

Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.74

Safari

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15

Firefox

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.16; rv:85.0) Gecko/20100101 Firefox/85.0

Самая важная здесь информация:

  • клиент совместимый с Mozilla версии 5.0;
  • операционная система macOS для процессоров Intel. В примерах версия macOS 11.1, но что интересно родной Safari и Firefox показывают ее как 10 версию.
  • версия браузера Chrome 88 (Safari/537.36 добавлен для совместимости), Edge 88 версии (Chrome и Safari так же добавлены для совместимости), в Safari 14.0.2 (Safari 6.0.5 оставлен для совместимости), Firefox 85 версии оказался самым понятным.

AppleWebKit/537.36 во всех Chromium based браузерах так же присутствует для совместимости.

В Windows 10 операционная система указана как Windows NT 10.0, рядом идет разрядность x64 или x86. Ниже пример для Edge.

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

Для мобильных устройств будет указана еще и его модель.

Safari на iPhone

Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

Chrome на Android

Mozilla/5.0 (Linux; Android 10; Redmi Note 8T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36

Некоторые приложения могут указывать в User-Agent еще и дополнительную информацию, например версию приложения, язык, разрешение экрана и прочую.

Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 174.0.0.21.119 (iPhone10,6; iOS 13_5_1; ru_KZ; ru-KZ; scale=3.00; 1125x2436; 271836321)

Способы изменить свой User-Agent

Свой User-Agent можно изменить. Чаще всего разработчики и тестировщики используют эту возможность, чтобы оценить, как будет выглядеть и работать сайт или web-приложение на других платформах. Но могут быть и другие причины, например для защиты приватности.

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

Как изменить User-Agent в Chrome

Способ 1: Через режим адаптивного дизайна

Откройте инструменты разработчика, далее включите режим устройства, нажав на кнопку Переключение в режим устройства (Toggle device mode).

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

Toggle device mode

Если устройство с интересующим юзерагентом отсутствует в списке, его можно добавить вручную. В выпадающем меню со списком устройств выберите пункт Edit. Нажмите кнопку Add custom device. А затем добавьте устройство с интересующим юзерагентом, заполнив необходимые поля, после чего сохраните изменения.

Add custom device Chrome

Только что созданное устройство появится в выпадающем списке.

Способ 2: С помощью расширения Chrome

Установите расширение User-Agent Switcher for Chrome. Активировав его, можно выбрать юзерагент из предложенных или добавить свой в параметрах расширения. Разрешение экрана при этом не изменяется под размер устройства, поэтому удобнее пользоваться первым способом.

User-Agent Switcher for Chrome

Справка по расширению центре помощи Google.

Способ 3: Через инструменты разработчика

Откройте инструменты разработчика, в правом верхнем углу нажмите кнопку в виде трех точек и выберите в меню More toolsNetwork conditions.

Network Conditions

В появившейся одноименной вкладке отключите опцию Select automatically, откройте меню Custom и выберите браузер, который хотите эмулировать.

Network Conditions User Agent

Как и в случае использования расширения, будет изменен лишь юзерагент, разрешение экрана не останется прежним.

Способ 4: Через запуск браузера с ключом

Запустите Google Chrome с ключем —user-agent=»new-user-agent», передав в кавычках новую строку User-Agent.

Чтобы проверить текущее значение User-Agent, введите в адресной строке Chrome следующую команду.

about:

Как изменить User-Agent в Firefox

Способ 1: Через режим адаптивного дизайна

Как и в случае с Chrome, самый быстрый и удобный способ.

Перейдите в режим адаптивного дизайна из инструментов разработчика или сочетанием клавиш Ctrl + Shift + M, (или Cmd + Opt + M на macOS).

Responsive Design Firefox

Выберите устройство с интересующим юзерагентом или добавьте свой, выбрав пункт Изменить список.

Подробнее о режиме адаптивного дизайна для Firefox на MDN Web Docs.

Способ 2: Через конфигурацию браузера

Введите в адресной строке браузера следующую команду.

about:config

Далее найдите параметр general.useragent.override, если его нет – создайте, выбрав тип Строка. Затем установите необходимое значение юзерагента.

Firefox Settings

Новое значение будет добавлено в список параметров. Перезапускать Firefox не требуется.

Как изменить User-Agent в Safari

Способ 1: Через режим адаптивного дизайна

Перейдите в режим адаптивного дизайна: Меню – Разработка – Перейти в режим отзывчивого дизайна или комбинацией клавиш Ctrl + Cmd + R.

Выберите устройство с интересующим User-Agent или добавьте свой, выбрав пункт Другой.

Если пункта Разработка в меню нет, его нужно включить. Для этого, из главного меню перейдите SafariPreferencesAdvanced (SafariНастройкиДополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню).

Подробнее в статье Отладка в мобильном Safari.

Способ 2: Через указание юзерагента в меню

Для версий Safari 5.1.7 и выше. Перейдите в меню РазработкаПользовательский агент. Выберите интересующий юзерагент из списка или добавьте свой выбрав пункт Другой.

Если пункта Разработка в меню нет, его нужно включить. Для этого, из главного меню перейдите SafariPreferencesAdvanced (SafariНастройкиДополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню).

Как увидеть мобильную версию сайта в десктопном браузере

Банальный, но самый популярный кейс для разработчиков и тестировщиков – при создании адаптивного сайта посмотреть, как он выглядит на различных устройствах, не имея их в наличии.

Responsive Design Safari

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

Как увидеть версию сайта для телевизора

Для примера можно воспользоваться главной страницей Яндекса.

При переходе по адресу https://yandex.ru пользователь видит привычную страницу поисковика.

Главная страница Яндекс

Но стоит изменить юзерагент на один из TV-шных поддерживаемых Яндексом, например такой как указано ниже или по-честному зайти на сайт с телевизора и внешний вид страницы изменится.

Mozilla/5.0 (SMART-TV; LINUX; Tizen 4.0) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 TV Safari/537.36
Яндекс ТВ

У сервиса Яндекс.Видео, в котором я раньше работал, тоже есть верстка для телевизоров, но с некоторых пор автоматического редиректа по юзерагенту на нее не происходит. А жаль, на телевизоре ей удобно пользоваться.

Яндекс.Видео ТВ

Для сравнения, так Яндекс.Видео выглядит на обычном десктопе.

Яндекс.Видео

Список User-Agent для телевизоров LG на базе webOS можно найти на официальном сайте.

Например, для webOS TV 5 User-Agent выглядит следующим образом.

Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 WebAppManager

Для телевизоров Samsung перечень User-Agent так же представлен на официальном сайте. Например, для моделей 2015 года строка User-Agent на базе Tizen 2.3 выглядит так:

Mozilla/5.0 (SMART-TV; Linux; Tizen 2.3) AppleWebkit/538.1 (KHTML, like Gecko) SamsungBrowser/1.0 TV Safari/538.1

Версия сайта для устаревших браузеров и устройств

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

Для примера можно снова воспользоваться Яндекс.

Попробуйте перейти на главную страницу поисковика, выставив юзерагент устаревшего браузера, из приведенных ниже.

Internet Explorer 9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

Internet Explorer 10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)

Opera 12

Opera/9.80 (Windows NT 6.2; Win64; x64) Presto/2.12.388 Version/12.17

Для старых платформ Яндекс отдает упрощённую главную страницу без виджетов, у нее забавное кодовое имя – «дедуля».

Яндекс.Дедуля

Кроме «дедули» есть еще и «бабуля» – упрощенная страница поисковой выдачи.

Яндекс.Бабуля

А если попробовать под тем же User-Agent перейти на Яндекс.Видео, пользователь увидит заглушку о том, что браузер устарел и сервис не нем работать не может.

Заглушка Яндекс

Похожую заглушку можно увидеть и для сервиса ВКонтакте.

Заглушка VK

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

User-Agent и поисковые роботы

Поисковые роботы ежедневно индексируют содержимое web-страниц на просторах интернета. Бывает так, что не все на сайте нужно индексировать, а на этапе разработки и вообще чаще всего хочется отказаться от индексации.

Управлять доступом ботов к содержимому на web-сервере можно через файл robots.txt находящегося по стандарту в корне сайта.

Например, так можно запретить доступ всех роботов ко всему сайту:

User-agent: *
Disallow: /

Моно запретить доступ к указанному каталогу для определённого робота, указав его User-Agent:

User-agent: googlebot
Disallow: /private/

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

Sitemap: http://example.com/sitemap.xml

Для сервисов с десятками тысяч тяжелых страниц поисковые роботы могут создавать нежелательную высокую нагрузку на сервер.

С подобной проблемой я столкнулся, работая в Яндекс.Эфир, когда оптимизировали его перед запуском трансляций NHL.

Яндекс.Эфир

Решение оказалось простым – ботов, индексирующих сервис, мы стали определять по их User-Agent и генерировать для них легкие текстовые версии страниц.

Можно притвориться ботом и посмотреть, как выглядят эти страницы.

Yandex Bot

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

Google Bot

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Яндекс.Эфир Бот

User-Agent мессенджеров

Когда вы делитесь ссылкой, например в Telegram или Twitter, бот мессенджера приходит с запросом на сайт источника ссылки, чтобы получить от него изображение превью, заголовок страницы и ее описание. У бота как правило есть собственный User-Agent.

У Telegram например такой:

TelegramBot (like TwitterBot)

А у Twitter:

Twitterbot/1.0

Чтобы бот правильно нашел необходимую ему информацию, нужно чтобы страница имела специальную Open Graph разметку, но это уже другая история.

Подробнее про Twitterbot и его Open Graph.

User-Agent и аналитика

Чтобы понимать, что происходит на сайте или в web-приложении и как улучшить его использование, полезно в том числе знать на каких платформах аудитория пользуется им. Если подключена одна из систем ведения аналитики, например Яндекс.Метрика или Google Аналитика, то при посещении ресурса пользователем, система помимо прочих метрик залогирует браузер (или приложение), версию, устройство и операционную систему клиента. Как вы уже догадались эта информация берется из строки User-Agent.

Яндекс.Метрика

Информацию об используемых браузерах можно использовать, например для определения списка поддерживаемых платформ. Это поможет ответить на вопрос, стоит ли тратить на них ресурсы, если доля пользователей таких платформ невелика.

Ссылки

Война браузеров
Статья про User agent на Википедии
Internet Explorer

На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.

Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.

Пожалуйста, поддержите проект

Даже небольшая сумма поможет писать больше полезных статей.