Как посмотреть заголовки http в chrome
Перейти к содержимому

Как посмотреть заголовки http в chrome

  • автор:

Как посмотреть HTTP заголовки (headers)

Как посмотреть HTTP заголовки (headers)

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

С помощью онлайн сервиса

Если вам нужно быстро посмотреть заголовки какой-либо страницы, то это можно сделать с помощью онлайн сервисов. Для примера, это можно сделать здесь: https://www.webconfs.com/http-header-check.php Вбиваем нужную страниц сайта и жмем кнопку ‘submit’ в итоге получаем следующую страницу с заголовками:

С помощью curl

Если в вашей системе установлен curl, то с его помощью можно без проблем посмотреть заголовки ответа (Response Headers), полученные от веб-сервера. Для этого достаточно запустить curl со следующими параметрами:

curl -s -D - -o /dev/null https://pc.ru/

После чего мы получим вот такой вот вывод:

HTTP/2 200 server: nginx/1.14.0 (Ubuntu) date: Thu, 14 Jan 2021 16:08:40 GMT content-type: text/html; charset=UTF-8 vary: Accept-Encoding link: ; rel="https://api.w.org/" x-fastcgi-cache: BYPASS

С помощью браузера

Практически все современные браузеры позволяют посмотреть заголовки.

Firefox

Открываем нужную страницу, нажимаем F12 и открываем консоль. Далее, в консоли выбираем логирование «Запросов» и обновляем страницу, после этого, можно будет посмотреть заголовки:

Была ли эта статья Вам полезна?

Что в статье не так? Пожалуйста, помогите нам её улучшить!

HTTP. Какую информацию браузер передает в HTTP заголовках

HTTP — это HyperText Transfer Protocol (протокол передачи гипертекста), который используется для коммуникации с сайтом. Все, что вы сейчас видите в окне браузера, получено с помощью этого протокола.

Когда вы открываете сайт, браузер обменивается с ним данными в HTTP заголовках (HTTP Headers) и отправляет различную информацию о себе.

Запрос браузера может выглядеть так:

В чем опасность HTTP заголовков?

  1. Становится доступна информация о вашем браузере, системе и IP.
  2. При использовании прозрачных прокси настоящий IP может передаваться в специальных заголовках, тем самым раскрывая вас.
  3. Через Referer становится доступен адрес источника, с которого вы перешли на сайт или сделали запрос.
  4. На основе этих данных сайты могут составить уникальный цифровой отпечаток (fingerprint), с помощью которого вас можно идентифицировать даже после смены IP.

Что такое User Agent?

User Agent — это часть HTTP заголовков, которая содержит информацию о браузере и операционной системе.

Методы сохранения анонимности:

  • User Agent можно изменить в настройках некоторых браузеров или с помощью специальных плагинов (например, RMOSChange для Firefox / Internet Explorer, User-Agent Switcher для Chrome, User Agent Changer для Opera).
  • Для маскировки Referer можно использовать такие плагины, как Referer Control (для Chrome).
  • Существуют утилиты и плагины для прямого редактирования HTTP-запросов. (например, Modify Headers для Google Chrome)

Как вручную изменить User Agent в Firefox:

  1. Введите в адресной строке: about:config и нажмите “I’ll be careful, i promise!”.
  2. Найдите в появившемся окне, используя поиск: useragent
  3. Убедитесь, что параметра general.useragent.override не существует.
  4. Кликните правой кнопкой на пустом месте и выберите “New” —> “String”.
  5. Введите в окне: general.useragent.override и нажмите “Ок”.
  6. Введите новый User Agent (например, Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A ) и нажмите “Ок”.

Список примерных конфигураций user agent’ов вы можете найти в Интернете (например, здесь, здесь или здесь).

Вы можете проверить на нашем сайте HTTP-заголовки, которые отправляет ваш браузер:

  • QUERY_STRING — параметры, переданные скрипту, если строка запроса представляет собой адрес.
  • REQUEST_METHOD — метод запроса, который применялся для вызова скрипта GET или POST.
  • REQUEST_URI — содержит имя и параметры скрипта, начиная от корневой директории виртуального хоста, если строка запроса представляет собой адрес.
  • SERVER_PROTOCOL — имя и версия информационного протокола, через который была запрошена страница, к примеру ‘HTTP/1.1’.
  • REMOTE_ADDR — IP-адрес удаленного клиента, с которого был сделан запрос.
  • REMOTE_PORT — порт клиента, через который было установлено соединение с сервером.
  • HTTP_ACCEPT — предпочтения клиента относительно типа запрашиваемого документа.
  • HTTP_ACCEPT_LANGUAGE — предпочтения клиента относительно языка запрашиваемой страницы.
  • HTTP_USER_AGENT — информация о версии и типе операционной системы и браузера посетителя.
  • HTTP_ACCEPT_ENCODING — список кодировок сжатия, которые поддерживает браузер.
  • HTTP_HOST — имя сервера (в большинстве случаев совпадает с доменным именем сайта, расположенного на сервере).
  • HTTP_CONNECTION — тип соединения браузера с сервером. Значение keep-alive означает, что браузер поддерживает постоянное соединение и в течение одного сеанса может делать несколько запросов.
  • HTTP_COOKIE — данные о cookies сессии, сохраненные в браузере.
  • HTTP_UPGRADE_INSECURE_REQUESTS — передает значение “1” для автоматического перехода небезопасных (например, HTTP: ) запросов на безопасную альтернативу (например, HTTPS: ), прежде чем браузер загрузит их.
  • HTTP_CACHE_CONTROL — max-age определяет “срок годности” файла (в секундах), по истечении которого файл необходимо загружать заново.
  • HTTP_REFERER — адрес источника, с которого посетитель сделал запрос или зашел на сайт.
  • HTTP_DNT — значение статуса “Do Not Track”, если “1” — включен.

Ваш настоящий IP может передаваться в следующих HTTP-заголовках:

  • HTTP_VIA
  • HTTP_X_FORWARDED_FOR
  • HTTP_PROXY_CONNECTION
  • X_FORWARDED_FOR
  • FORWARDED_FOR
  • FORWARDED
  • HTTP_FORWARDED_FOR_IP
  • HTTP_FORWARDED_FOR
  • FORWARDED_FOR_IP
  • HTTP_X_FORWARDED
  • HTTP_FORWARDED
  • HTTP_CLIENT_IP, VIA, X_FORWARDED
  • CLIENT_IP

HTTP-запросы в браузере — HTTP API

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

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

Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь статьей . В этом курсе мы будем пользоваться панелью браузера Chrome:

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

Chrome DevTools

Здесь нас интересует вкладка Network. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:

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

В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.

Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network нужно нажать кнопку Fetch/XHR. Тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это и есть запросы к HTTP API.

Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:

  1. Перейдите на сайт https://frontend-chat-ru.hexlet.app/
  2. Откройте панель разработчика, перейдите на вкладку Network и нажмите Fetch/XHR
  3. Введите данные для входа: имя admin и пароль admin

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

HTTP-заголовки, которые влияют на SEO

like

111

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

  • Схема работы веб-сервера и понятие HTTP-заголовки
  • Важные HTTP-заголовки для SEO
  • Проверка HTTP Headers
    • Просмотр HTTP-заголовков в браузере Google Chrome
    • Просмотр HTTP-заголовков в браузере Firefox
    • Другие способы проверки HTTP-заголовков

    Схема работы веб-сервера и понятие HTTP-заголовки

    Итак, в клиент-серверных протоколах, таких как HTTP, сеансы состоят из трёх фаз:

    1. Клиент устанавливает TCP-соединение (или соответствующее соединение, если транспортный уровень не является TCP).
    2. Клиент отправляет свой запрос и ждёт ответа.
    3. Сервер обрабатывает запрос, отправляя ответ обратно, предоставляя код состояния и соответствующие данные.

    Схема работы веб-сервера.

    Код состояния (200OK, 301, 429, 500 и другие) является лишь частью полного HTTP-ответа, который сервер отправляет клиенту. Полный ответ кода состояния плюс дополнительная информация называется заголовком HTTP.

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

    Важные HTTP-заголовки для SEO

    Далее рассмотрим ряд важных элементов заголовка HTTP для SEO.

    X-Robots-Tag

    Это аналог метатега robots в html. У данного элемента есть преимущества над meta name=“robots”. Например, если вы хотите запретить к индексации файлы PDF, метатег robots не поможет, так как он не работает с PDF-файлами. Вместо этого, вы можете использовать заголовок X-Robots-Tag.

    К тому же у X-Robots-Tag есть ещё одно преимущество – его легко настраивать для целых каталогов и папок, что может ускорить работу.

    Помимо «noindex» и «nofollow», вы можете прописать другие ответы X-Robots-Tag. Директивы из справки Google — ссылка:

    Директивы X-Robots-Tag из справки Google

    Canonical

    Обычно теги canonical расположены в исходном HTML-коде веб-страницы. Однако вы также можете указать канонический URL как часть HTTP-заголовка URL.

    Поскольку реализовать тег rel= “canonical” в HTML довольно просто, редко можно найти канонические ссылки, отправленные как часть HTTP-ответа страницы. Однако всегда стоит перепроверить HTTP Headers страницы на наличие канонических ссылок, особенно если вы видите на сайте необычные проблемы с индексацией и ранжированием. Как именно проверить заголовки сайта, мы расскажем чуть ниже.

    Hreflang

    Так же, как канонические ссылки, вы можете включить ссылки hreflang в ответ HTTP-заголовка страницы, чтобы сообщить поисковым системам об альтернативных версиях страницы на разных языках и/или для разных стран.

    Cache-control

    Cache-control может влиять на то, как браузер кэширует страницу и связанные с ней ресурсы. Например, вы можете предоставить ответ «max-age», который сообщает браузеру, что через некоторое время страница должна быть повторно запрошена с сервера. В противном случае кэш страницы действителен то время, которое указано в значении «max-age», тем самым ускоряя скорость загрузки страницы. Директивы из справки Google — ссылка:

    Директивы Cache-control из справки Google

    Vary

    Служит для определения различий отображения контента для ПК и мобильных устройств. Особенно это важно для сайтов, которые используют динамический показ для мобильных пользователей. Для сайтов с адаптивным дизайном данный элемент не так актуален.

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

    Last-Modified

    В значении Last-Modified необходимо указывать дату последнего изменения ресурса. HTTP Header используется для сравнения нескольких версий одного и того же ресурса. Он тесно связан с заголовками If-Modified-Since и If-Unmodified-Since.

    If-Modified-Since

    Это условный запрос, который передаёт объект, если он был изменен после указанной даты. То есть передаются данные только в том случае, когда кэш устарел.

    If-Unmodified-Since

    Это условный запрос, который передаёт объект, только если он не был изменен после указанной даты.

    Expires

    Дата/время, после которого ответ веб-сервера считается устаревшим. Например, можно указывать текущую дату + 7/10/14 дней.

    Accept-Encoding

    Алгоритм кодирования, обычно алгоритм сжатия, который можно использовать на отправленном ресурсе. Это заголовок запроса, который запрашивает HTTP-клиент, чтобы сообщить серверу, какую кодировку он поддерживает. Серверу разрешено отправлять содержимое ответа в любой из этих кодировок.

    Content-Encoding

    Используется для указания алгоритма сжатия. Это заголовок ответа, в котором HTTP-сервер использует этот заголовок, чтобы сообщить клиенту, в какую именно кодировку фактически был закодирован контент.

    Content-Length

    Размер ресурса в десятичном числе байтов.

    Content-Type

    Указывает тип носителя ресурса.

    Location

    Указывает URL-адрес для перенаправления страницы. Он используется только тогда, когда для пользователя указывается перенаправление на другую страницу (3xx код) или при новом местоположении ресурса (201 код).

    Проверка HTTP Headers

    Далее рассмотрим некоторые способы, как посмотреть HTTP-заголовки страницы или отдельного файла.

    Просмотр HTTP-заголовков в браузере Google Chrome

    HTTP Headers в Chrome можно найти в инструментах разработчика. Для этого необходимо нажать либо Ctrl+Shift+I (многие используют просто F12), либо правой кнопкой мыши и выбрать пункт «Посмотреть код», либо в верхнем выпадающем меню браузера выбрать «Дополнительные инструменты» → «Инструменты разработчика».

    Инструменты разработчика в Google Chrome

    После чего выбрать вкладку «Network» и обновить страницу (F5).

    Network в Google Chrome

    Далее в графе «Name» необходимо выбрать тип файла, для которого вы хотите проверить заголовки, и справа во вкладке «Headers» будут указаны все заголовки текущего файла.

    Просмотр http-заголовков в Chrome

    Просмотр HTTP-заголовков в браузере Firefox

    Аналогичным способом можно проверить заголовки и в Firefox: при помощи Ctrl+Shift+C либо в верхнем выпадающем меню выбрать «Веб-разработка»→«Инструменты разработчика». Далее выбрать вкладку «Сеть» и обновить страницу (F5). После чего выбрать тип документа для проверки и в правой части экрана выбрать вкладку «Заголовки». Перед вами появятся заголовки текущей страницы.

    Просмотр http-заголовков в Firefox

    Другие способы проверки HTTP-заголовков

    Для того чтобы посмотреть HTTP-заголовки в два счёта, есть множество расширений для любого браузера, будь то Google Chrome, Mozilla Firefox или Internet Explorer.

    Примеры популярных расширений:

    • Live HTTP Headers для Mozilla Firefox.
    • HTTP Header Spy для Google Chrome и Mozilla Firefox.
    • Microsoft Fiddler для Internet Explorer.
    • Web Developer для Chrome, Mozilla Firefox и Opera.

    Также в сети есть большое количество онлайн-программ, при помощи которых вы можете проверить заголовки своего сайта:

    • https://bertal.ru/
    • https://checkmy.ru/
    • https://pr-cy.ru/headers/

    Вдобавок в Яндекс.Вебмастере и Google Search Console также есть инструменты проверки HTTP Headers.

    В заключение

    Внедрение HTTP-заголовков особенно актуально для средних и крупных сайтов для ускорения работы веб-сервера, а также уменьшения расхода краулингового бюджета на ресурсы, которые нет необходимости повторно скачивать. Подробнее о том, какими ещё способами можно увеличить краулинговый бюджет сайта, читайте в статье: https://siteclinic.ru/blog/technical-aspects/kak-uvelichit-kraulingovyj-byudzhet/.

    Если Вы хотите исправить все ошибки оптимизации на сайте, обращайтесь к нам!

    Подписаться на рассылку

    • Страницы низкого качества или как понять, что твой сайт «не очень» Не так страшен чёрт, как его малюют – русская пословица Иногда довольно сложно понять, что от тебя хотят поисковые системы, что именно они понимают под.
    • Можно ли в мобильной версии применять display none для скрытия дубля меню? На сайте есть главное меню товаров, я скопировал его для мобильной версии. Мобильное меню я спрятал под медиа запрос display: none, просто главное меню слишком.
    • Как составить ТЗ на разработку интернет-магазина, чтобы получить максимум трафика сразу после запуска Что должно содержаться в техническом задании на разработку магазина? Обязательные этапы создания интернет-магазина Пример ТЗ на разработку интернет-магазина Пример ТЗ на структуру магазина Пример плана.
    • Вы не любите Joomla!? Вы просто не умеете ее готовить Продолжим серию обзоров популярных CMS и поговорим о Joomla: в чем её преимущества и с чем вам придется познакомиться, работая с этой CMS. Мы постарались.
    • Обзор CMS-систем. Мощный, гибкий, безопасный Drupal Мы продолжаем наш цикл статей, посвященных описанию самых интересных CMS. Сегодня мы с Вами поговорим о DRUPAL. Для каких задач стоит её выбирать, главные особенности.

    Девиз: Никогда не останавливайся на достигнутом.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *