Доступ к HTTP-заголовкам страницы в JavaScript: руководство

Быстрый ответ

В случае, когда необходим доступ к информации о HTTP-заголовках, рекомендуется использовать Fetch API:

fetch(window.location.href)
  .then(response => response.headers.forEach((value, key) => console.log(`${key}: ${value}`)));

Учтите, что доступ к некоторым заголовкам может быть ограничен сервером.

Углубляемся…

Продолжим обсуждение данного вопроса. Обращение к заголовкам ограничено по причинам безопасности и области применения.

Ограничения видимости

В разработке клиентской части мы работаем только с теми заголовками, которые отправляем собственноручно через XMLHttpRequest или Fetch API. При этом, к заголовкам первичного ответа сервера мы не имеем доступа.

Подробнее об этом расскажет наш спикер на видео

Защитник безопасности

Ограничения на доступ к части заголовков обеспечивают такие механизмы как Политика единого источника и CORS (Cross-Origin Resource Sharing).

Обходные пути

Существуют несколько способов обойти установленные ограничения:

1. Запрос к серверу: Сервер может собирать заголовки и пересылать их в виде JSON-формата клиенту.
2. Мета-теги и JavaScript-переменные: Вставка заголовков в HTML-код страницы на стороне сервера.
3. Настройка CORS: Если сервер добавит заголовок Access-Control-Expose-Headers, то станет возможным обращение к этим заголовкам при кросс-доменных запросах.

Визуализация

Представьте следующую картину: Ваша веб-страница – это дом, в котором вы находитесь (🏠), а HTTP-заголовки – это содержимое почтового ящика (📬):

🏠 Веб-страница: "Я бы хотел проверить почту, оставаясь в доме."
📬 HTTP-заголовки: "У меня есть нужная информация, но чтобы её получить, тебе придется выйти."

Для получения доступа к HTTP-заголовкам через JavaScript вам потребуется привлечь "службу доставки" (API на родном для вас JavaScript):

// "Эй, API, можешь ли ты проверить мою почту?"
fetch(window.location).then(response => {
  console.log(response.headers.get('Content-Type')); // 'text/html; charset=UTF-8'
});

PS: Обратите внимание, что информация, которую вы запросили, ограничена тем, что API может предоставить.

Назад к AJAX

Использование XMLHttpRequest для этих целей выглядело бы так:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
console.log(headers);

Заголовки через сервер

Пример внедрения заголовков в HTML код через сервер:

<!-- PHP говорит: "Я запишу заголовки за тебя!" -->
<script>
let headers = <?=json_encode(getallheaders())?>;
console.log(headers); // Выводим заголовки на клиенте
</script>

Кросс-доменные запросы и CORS

Пример добавления CORS-заголовков к ответу сервера:

Access-Control-Expose-Headers: x-custom-header
Access-Control-Allow-Origin: *

Завершение

В реальной разработке вы можете столкнуться с такими сценариями:

• API третьих сторон: Уточняйте политику CORS используемого вами API.
• Отладка приложений: Заголовки могут содержать важную информацию, но просмотреть их может оказаться не так просто из-за ограничений, установленных браузером.
• Использование прокси-сервера: В случае, если сервер не позволяет выполнить запрос напрямую, можно запросить данные через промежуточный прокси-сервер.

Полезные материалы

1. Fetch API – Веб-API | MDN — Основы работы с современным методом выполнения сетевых запросов в JavaScript.
2. Headers – Веб-API | MDN — Работа с HTTP-заголовками при использовании Fetch API.
3. Fetch Standard — Официальная спецификация Fetch.
4. XMLHttpRequest – Веб-API | MDN — Традиционный метод выполнения HTTP-запросов.
5. HTTP-заголовки для ответственных разработчиков — Анализ значения, которые могут передавать заголовки.
6. Cross-Origin Resource Sharing (CORS) – HTTP | MDN — Руководство по реализации кросс-доменных запросов.