4 примера использования http-заголовков, о которых вы прежде не знали

0
1709
views

Перевод статьи «The power of http headers and 4 examples you did not know before».

Существует достаточно много http-заголовков. Большинство из них достаточно просты. Но есть также довольно мощные и при этом не слишком известные http-заголовки.

Hello http (заголовки)

Практически все в вебе пересылается через http. Эта аббревиатура знакома даже не-разработчикам, потому что они постоянно видят ее как часть ссылок.

Http расшифровывается как Hypertext Transfer Protocol. Этот протокол дает нам возможность пересылать гипертекст между браузером и сервером. Это отличная технология, работающая практически со времен изобретения веба, постоянно развивающаяся и предлагающая все больше крутых функций.

Что такое http-заголовки?

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

Давайте сначала разберем, что они делают и как ими пользоваться.

Когда браузер запрашивает ресурс, например, страницу этого блога, он обращается к серверу с запросом. Этот запрос выглядит примерно так:

fetch("https://www.lorenzweiss.de/race_conditions_explained/", {
  credentials: "include",
  headers: {
    accept:
      "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "accept-language": "en,en-US;q=0.9,de-DE;q=0.8,de;q=0.7",
    "cache-control": "max-age=0",
    "sec-fetch-mode": "navigate",
    "sec-fetch-site": "same-origin",
    "sec-fetch-user": "?1",
    "upgrade-insecure-requests": "1",
  },
  referrerPolicy: "no-referrer-when-downgrade",
  body: null,
  method: "GET",
  mode: "cors",
});

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

Сервер отвечает на посланный ему запрос, и в своем ответе тоже пересылает кое-какие заголовки. Выглядеть это может так:

:authority: www.lorenzweiss.de
:method: GET
:path: /race_conditions_explained/
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
accept-encoding: gzip, deflate, br
accept-language: en,en-US;q=0.9,de-DE;q=0.8,de;q=0.7
cache-control: max-age=0
cookie: _ga=GA1.2.1173972759.1584812492; _gid=GA1.2.2076192721.1594044231
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36

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

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

Большинство заголовков имеют довольно хорошие значения по умолчанию, которые можно не менять. При этом некоторые заголовки (например CORS-заголовки) могут представлять особую важность. Но есть еще много заголовков, о которых вы могли никогда не слышать, а между тем они очень полезны и стоит научиться ими пользоваться.

Заголовки, которых вы не знаете

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

If-Range

Что это такое и зачем это нужно?

Представьте, что вы начинаете скачивать объемный ресурс, например видео, изображение и т. п., а загрузка прерывается из-за проблем со связью. При помощи If-Range вы можете сообщить серверу, что представление не изменилось и можно переслать запрошенные в Range части. Таким образом будет пересылаться не весь ресурс (заново), а только недостающие части.

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

Как пользоваться

Можно использовать или с датой последней модификации ресурса, или с Etag, что может помочь при повреждении ресурса.

If-Range: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT
If-Range: <etag>

Пример

If-Range: Wed, 21 Oct 2015 07:28:00 GMT 

Vary

Vary появился в те времена, когда http использовался не только для веб-страниц.

В его основе лежит идея использования http для обмена информацией во многих (разных) форматах. Каким образом? Этот заголовок сообщает серверу, в каком виде нужно предоставить информацию.

В наше время это может быть очень полезно, если у вас есть разные ресурсы для разных пользователей. Например, для пользователей десктопов и мобильных устройств. Представьте, что на сервере для одного ресурса хранятся три разных изображения — для разных устройств. Вы можете использовать заголовок Vary, чтобы сообщить серверу о необходимости определить устройство пользователя и на основе этого решить, изображение какого размера нужно выслать.

Пример

Возьмем тот же пример с изображениями, зависящими от устройства. Чтобы сообщить серверу, что он должен получить информацию об устройстве пользователя, вы можете просто передать в заголовке «user agent».

Vary: User-Agent

Как пользоваться

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

Vary: <header>

Content-Disposition

Когда серверу отправляется запрос для отображения сайта, браузеру понятно, что он должен отобразить ресурс, который придет в ответе. Но может быть и такое, что сервер отсылает ресурс, который браузер должен автоматически начать загружать на компьютер пользователя (это может быть картинка или pdf и т. п.). При помощи заголовка Content Disposition сервер может сообщить браузеру, что именно тот должен делать с прилагаемым ресурсом.

Пример

Content-Disposition: attachment; filename="data.pdf"

Если определить значение Content-disposition как attachment, браузер будет знать, что этот ресурс предназначен для скачивания, а не просто для показа.

Как пользоваться

Вы можете определить этот заголовок как inline или attachment, причем inline это значение по умолчанию.

Content-Disposition: <inline | attachment>

Feature-Policy

Это довольно новый заголовок, поэтому он поддерживается пока только современными браузерами. Но я все равно хочу его упомянуть, потому что считаю очень полезным в некоторых случаях. В общем, Feature-Policy сообщает браузеру, какие функции или API браузер должен предоставить документу и его фреймам для использования.

Например, он может запретить все скрипты или фреймы на сайте, чтобы разрешить чувствительные API, такие как камера или микрофон.

Как пользоваться

Feature-Policy: <directive> <allowlist>

Directive — это название функционала. Полный список вариантов можно посмотреть здесь. А allowlist определяет, какие именно источники могут использовать то, что указано в directive.

Пример

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

Feature-Policy: microphone 'none'; camera 'none'

Другие заголовки

Есть и другие заголовки, стоящие упоминания:

Заключение

Https-заголовки — отличная и очень полезная вещь. Порой они могут быть довольно сложными, а кроме того разработчику тяжело охватить все доступные заголовки и изучить, какие именно преимущества они дают. К тому же, когда вы создаете сайт, особенно в части фронтенда, вы не слишком часто имеете с ними дело, за исключением разве что CORS-заголовков. Но я думаю, что из-за этого разработчики упускают некоторые возможности. Http-заголовки обеспечивают куда лучшую коммуникацию между сервером и пользователями, а все мы знаем, что коммуникация — ключ к хорошим отношениям.

Надеюсь, в этой статье мне удалось познакомить вас с миром http-заголовков. Если здесь пропущен еще какой-то особенно интересный и полезный заголовок — не стесняйтесь добавлять в комментариях!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here