§5.2. Как работает веб

В главе «Форензика» мы уже говорили о том, как работает интернет. Но в интернете есть много различных протоколов. Сегодня мы ещё более детально поговорим о вебе — причём не только о протоколе HTTP, но и о данных, которые по нему передаются.

Кто такие клиент и сервер?

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

Сервер — это программа, которая читает пришедшие запросы, обрабатывает их и возвращает ответ. Например, если браузер прислал запрос GET /clients/1, то сервер может взять из базы данных пользователя с номером 1, и отправить страницу с этими данными.

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

Из чего состоят сайты

Как правило, в качестве ответа сервера отдают страницы, содержащие HTML-разметку (англ. hypertext markup language — язык гипертекстовой разметки). В них содержится контент, который необходимо отобразить. Пример простой HTML-страницы:

<!DOCTYPE html>
<!--
Вот так обозначаются комментарии. Они не будут видны
на странице, но их можно посмотреть в исходном коде.

Весь HTML состоит из тегов. Тег выглядит так: <html></html>.
Внутри тега могут быть данные: <p>Данные</p>.
У тега могут быть атрибуты: <a href="/test">Ссылка на test</a>.
Некоторые теги могут не иметь закрывающего: <br>.

Вот и всё.
-->

<html>
  
  <head>
    
    <meta charset="utf-8" />

    
    <title>Simple Web Page</title>
  </head>

  
  <body>
    
    <h1>Важная страница</h1>
    
    <p>
      Здесь какой-нибудь длинный текст про то,
      почему страница такая важная.
    </p>
  </body>
</html>

В браузере эта страница будет выглядеть примерно так:

HTML сам по себе довольно прост, но ничего не умеет. На каждом сайте разные цвета, шрифты, размеры блоков и картинок — всё это нельзя сделать с помощью одной HTML-разметки. На помощь приходит CSS (англ. cascading stylesheets — каскадные таблицы стилей) — специальный язык для описания внешнего вида документа.

Например, если мы можем создать файл style.css со следующим содержанием:

body {
    background-color: darkgreen;
    /*
        color задаёт цвет текста.
        Кстати, комментарии тут немного другие.
    */
    color: lightblue;
    text-align: center;
}

h1 {
    /* Сначала попробовать Arial, а если его нет -
       шрифт без засечек по умолчанию. */
    font-family: Arial, sans-serif;
}

Подключим его на нашу страницу, добавив в <head> тег <link rel="stylesheet" href="style.css" />, и получим намного более красивую страницу:

Примечание

  • В HTML и CSS не бывает ошибок. Если в разметке будут незакрытые теги, неизвестные теги или атрибуты, браузер всё равно попытается это каким-либо образом отобразить. Возможно, результат будет не лучшим, но скорее всего весь контент отобразится.

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

Магия браузера

На самом деле, браузер не делает ничего сверхъестественного — мы можем делать HTTP-запросы вручную. Для этого мы можем воспользоваться утилитой curl. Этот способ не такой удобный, но зато он даёт больше возможностей:

Флаг -v позволит нам видеть заголовки как запроса, так и ответа. В запросе есть заголовок User-Agent, в котором передаётся название браузера. Если сделать запрос на адрес http://httpbin.org/user-agent, то сервер вернёт значение этого заголовка. Попробуйте открыть страницу из браузера и сделать запрос с помощью curl. Сравните результаты.

HTTP

Вернёмся к протоколу HTTP и углубимся в детали. Начнём с типа запроса — обычно его называют методом. Два основных метода, которые используются почти всегда — GET и POST. Однако, в некоторых случаях сервера обрабатывают и другие запросы:

МетодОписание
GETПолучить данные с сервера
POSTПередать данные на сервер
OPTIONSКакие методы поддерживаются сервером
HEADВернуть только заголовки от аналогичного GET-запроса
PUTЗагрузить ресурс на сервер
DELETEУдалить ресурс с сервера

Как правило, если сервер не может обработать запрос с требуемым методом, он возвращает ошибку 405 (Method Not Allowed — метод не поддерживается). Вы можете вручную отправлять запросы различных типов, указывая флаг -X для curl:

Примечание

  • По соглашению для HTTP используется порт 80, а для HTTPS — 443. Но никто не запрещает владельцам сайтов использовать другие порты. Чтобы открыть сайт по нестандартному порту, указывают его номер через двоеточие: http://example.org:8080/test.html.

Адреса страниц — их ещё называют URL (англ. uniform resource location — унифицированное местоположение ресурса), состоят из нескольких частей.

Путь очень похож на путь к файлу в обычной файловой системе. Более того, некоторые серверы просто отдают всем пользователям одни и те же файлы (особенно, когда речь идёт о стилях и скриптах), и они действительно просто отправляют пользователю файл из указанной пользователем директории. При этом .. и . работают так же, как в консоли: если набрать http://example.com/folder/../file.html, то браузер превратит это в http://example.com/file.html. Однако, если отправить такой запрос вручную, и сервер обработает его некорректно, то он может отдать какие-то непубличные файлы. Об этом мы поговорим позднее.

Параметры (их ещё называют строкой запроса) задают, какую страницу нужно выбрать или по какому слову искать. Путь и параметры передаются в первой строке HTTP-запроса, например: GET /offers/search?query=Best&sort=down HTTP/1.1.

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

На URL есть и ограничения. Во-первых, набор символов в URL сильно ограничен. Для передачи кавычек, русских букв, пробелов и других символов используется кодировка urlencode, мы рассказывали о ней в главе «Криптография». Во-вторых, его длина не может превышать 2048 символов, иначе он может быть обработан некорректно. В случае, если на сервер нужно передать большое количество данных, используют методы, отличные от GET, а сами данные передают после заголовков. Попробуйте сделать POST-запрос с данными:

Выводы

  1. По протоколу HTTP общаются клиент и сервер. Клиент — это обычно браузер, а сервер — специальная программа, доступ к которой мы не имеем.

  2. Контент в интернете состоит из данных — они содержатся в HTML-разметке, стилей в формате CSS и скриптов на JavaScript.

  3. Запросы можно делать вручную с помощью утилиты curl.

  4. Адрес страницы называется URL и состоит из протокола, домена, порта, пути, строки запроса и якоря.

  5. Путь страницы в URL работает так же, как путь в обычной файловой системе.

§5.3. Браузер, который изменяет мир ⟶