Как браузер отображает Web-страницу
Загрузка страницы включает разбор URL, DNS, подключение, TLS, HTTP-запрос, ответ, отображение, несколько запросов и кэш.
Web-страница не появляется сразу в том виде, в каком вы ввели URL.
На практике последовательно происходят интерпретация URL, получение IP-адреса через DNS, подключение к серверу, создание безопасного канала HTTPS, отправка HTTP-запроса, получение ответа сервера и отображение браузером.
Однако не каждый раз все выполняется с нуля. Результат DNS может быть в кэше, уже установленное соединение может использоваться повторно, а данные могут читаться из кэша браузера.
В этой статье без излишнего углубления в спецификации разбирается, что происходит до отображения Web-страницы.
Что происходит после ввода URL
Предположим, в адресную строку браузера введена строка https[:]//example.com.
Сначала браузер проверяет введенную строку.
Он решает, это поисковый запрос или URL сайта, и если это URL, интерпретирует адрес назначения.
URL обычно содержит такие сведения:
| Элемент | Пример | Смысл |
|---|---|---|
| Схема | https | Показывает, каким способом связываться |
| Имя хоста | example.com | Показывает имя веб-сайта для подключения |
| Номер порта | 443 | Показывает, к какому входу связи подключаться; часто опускается |
| Путь | /about | Показывает, какое место на сервере запрашивается |
| Строка запроса | ?id=10 | Передает серверу дополнительную информацию |
| Фрагмент | #section | Показывает место внутри страницы; обычно не отправляется серверу |
URL — удобная для человека форма указания сайта.
Но для поиска другой стороны в сети в итоге нужен IP-адрес.
Поэтому браузер переходит к поиску IP-адреса по имени хоста.
DNS ищет IP-адрес
По одному имени example.com браузер не может подключиться к серверу.
Для этого используется DNS.
DNS сопоставляет доменные имена с IP-адресами.
Браузер или OS сначала проверяет, нет ли результата DNS у себя. Если к этому домену уже обращались, IP-адрес может быть получен из DNS-кэша.
Если информации в кэше нет, выполняется запрос к DNS-резолверу. Резолвер при необходимости обращается к нескольким DNS-серверам и ищет IP-адрес для домена.
| Этап | Что происходит | Цель |
|---|---|---|
| 1 | Браузер или OS проверяет кэш | Можно ли повторно использовать ранее найденный IP |
| 2 | Выполняется запрос к DNS-резолверу | Найти IP-адрес по доменному имени |
| 3 | Получаются A- или AAAA-записи | Получить IPv4- или IPv6-адрес подключения |
| 4 | По IP-адресу выбирается назначение | Определить реальную сторону связи |
Полученный IP-адрес не обязательно всегда фиксирован.
Для одного домена могут возвращаться разные IP-адреса из-за региона, настроек DNS, балансировки нагрузки, CDN и других факторов.
Подключение к серверу
Когда IP-адрес известен, браузер подключается к серверу с этим IP-адресом.
В Web-связи важен не только IP-адрес назначения, но и номер порта.
Обычно HTTP использует порт 80, HTTPS — порт 443.
| Способ связи | Основной номер порта | Смысл |
|---|---|---|
| HTTP | 80 | Часто используется для незашифрованной Web-связи |
| HTTPS | 443 | Часто используется для Web-связи, защищенной TLS |
В HTTP/1.1 и HTTP/2 для подключения к серверу обычно используется TCP.
В HTTP/3 используется механизм QUIC, который работает поверх UDP.
Здесь детали HTTP/2 и HTTP/3 не рассматриваются. Важно, что браузер создает канал связи с сервером, используя IP-адрес и номер порта.
Кроме того, новое соединение создается не каждый раз. Если к тому же серверу уже есть соединение, браузер может использовать его повторно.
HTTPS создает безопасный канал
Если URL начинается с https, браузер связывается с сервером по HTTPS.
HTTPS — это HTTP, защищенный TLS.
TLS выполняет основные роли:
| Роль | Смысл | Важность |
|---|---|---|
| Шифрование | Делает содержимое труднее читаемым третьим лицам | Защищает пароли и содержимое страниц |
| Обнаружение подмены | Проверяет, не изменилось ли содержимое по пути | Помогает защищаться от изменений посредником |
| Проверка стороны | Проверяет, является ли назначение сервером нужного домена | Защищает от фальшивых сайтов и атак посредника |
Важно, что HTTPS — не только механизм шифрования.
Браузер проверяет сертификат, предъявленный сервером, и подтверждает, действителен ли он для домена назначения.
Благодаря этой проверке браузер может считать, что подключается к нужной стороне с высокой вероятностью.
Однако даже при HTTPS скрывается не вся информация о связи.
Например, IP-адрес назначения, время связи, объем связи не скрываются HTTPS полностью.
В зависимости от среды информация о домене назначения тоже может быть видна на маршруте.
То есть HTTPS очень важен для защиты содержимого и проверки другой стороны, но не гарантирует полную анонимность.
Страница запрашивается по HTTP/HTTPS
Когда безопасный канал создан, браузер запрашивает страницу у сервера.
Этот запрос называется HTTP-запросом.
При HTTPS содержимое HTTP-запроса отправляется защищенным TLS.
Браузер может отправлять серверу такие сведения:
| Информация | Смысл | Дополнение |
|---|---|---|
| Метод | Какую операцию нужно выполнить | При получении страницы часто используется GET |
| Путь | Какая страница или данные нужны | Например / или /about |
| Host | Для какого домена запрос | Используется и когда один IP обслуживает несколько сайтов |
| User-Agent | Сведения о браузере и OS | Используется для определения среды и подстройки отображения |
| Accept-Language | Предпочитаемый язык | Может использоваться для выбора языка страницы |
| Referer | С какой страницы был переход | Может не отправляться из-за настроек или спецификации |
| Cookie | Идентификационные данные, сохраненные сайтом | Используются для входа и сохранения настроек |
Сервер смотрит на запрос и решает, какие данные вернуть.
Даже при одном URL ответ может меняться в зависимости от состояния входа, Cookie, языковых настроек, типа устройства и другого.
Сервер возвращает данные
Сервер, получив запрос браузера, возвращает HTTP-ответ.
HTTP-ответ содержит статус-код, заголовки, тело и другое.
| Элемент | Пример | Смысл |
|---|---|---|
| Статус-код | 200 | Показывает успех запроса или ошибку |
| Заголовок | Content-Type | Показывает тип данных, политику кэша и другое |
| Тело | HTML и т.п. | Основные данные, которые использует браузер |
Центр Web-страницы — HTML, но одной HTML-страницы не всегда достаточно.
Многие Web-страницы отображаются из нескольких видов данных.
| Данные | Роль |
|---|---|
| HTML | Описывает структуру страницы |
| CSS | Задает цвета, отступы, расположение, размер текста и другой вид |
| JavaScript | Выполняет обработку и динамические изменения на странице |
| Изображения | Показывает фотографии, иконки, схемы и другое |
| Шрифты | Настраивает внешний вид текста |
| Видео / аудио | Воспроизводит медиаконтент |
Браузер сначала получает HTML, затем дополнительно получает CSS, JavaScript, изображения, шрифты и другое, указанное в HTML.
Поэтому даже открытие одной страницы часто вызывает несколько HTTP-запросов.
Браузер отображает экран
После получения данных сервером браузер преобразует их в форму, которую можно показать на экране.
В общих чертах выполняются такие процессы:
| Этап | Что происходит |
|---|---|
| Разбор HTML | Считывается структура страницы |
| Применение CSS | Применяются правила внешнего вида |
| Расчет layout | Решается, где разместить элементы |
| Отрисовка | Текст, изображения, фон и другое показываются на экране |
| Выполнение JavaScript | При необходимости меняет содержимое или поведение страницы |
Важно, что браузер не получает от сервера уже готовый экран.
Сервер возвращает материалы: HTML, CSS, JavaScript, изображения и другое.
Браузер интерпретирует их и собирает страницу под размер экрана, настройки и поддерживаемые функции.
Поэтому одна и та же страница может выглядеть по-разному на ПК, смартфоне, в разных браузерах, при разной ширине экрана и настройках.
Даже одна страница может вызвать несколько связей
При отображении Web-страницы важно, что открытие одной страницы не всегда означает связь только с одним сервером.
Даже если тело страницы получено с example.com, изображения, реклама, аналитика, внешние шрифты и внешние скрипты могут загружаться с других доменов.
| Назначение связи | Цель | Пример |
|---|---|---|
| Сервер основной страницы | Получить HTML | Текст и структура страницы |
| Сервер изображений | Получить изображения | Изображения статьи и иконки |
| Рекламный сервер | Показать рекламу | Баннеры и рекламные скрипты |
| Сервер аналитики | Измерить доступ | Теги аналитики |
| Сервер внешних шрифтов | Загрузить шрифт | Web-шрифты |
| Сервер внешних скриптов | Добавить функции | Встраиваемые виджеты и элементы UI |
Пользователь видит «одну открытую страницу», но внутри может быть связь с несколькими серверами.
Дополнительная связь может возникать не только сразу после открытия, но и при прокрутке, нажатиях, поиске, вводе в форму, воспроизведении видео.
В современном Web часто сначала загружают минимальные данные, а затем получают дополнительные данные по действиям пользователя.
Кэш может пропускать часть связи
При отображении Web-страницы не все данные каждый раз берутся с сервера.
Браузер может временно сохранять ранее полученные изображения, CSS, JavaScript и другое.
Это называется кэшем.
Если кэш действителен, браузер может использовать данные на устройстве вместо повторной загрузки с сервера.
| Объект | Эффект кэша |
|---|---|
| Результат DNS | Уменьшает необходимость снова искать IP-адрес по домену |
| Изображения | Не нужно каждый раз загружать то же изображение |
| CSS | Можно повторно использовать файлы внешнего вида страницы |
| JavaScript | Можно использовать тот же скрипт без повторной загрузки |
| Соединение | Иногда можно использовать уже существующий канал |
Кэш важен для скорости и уменьшения трафика.
Но с точки зрения анонимности и приватности нужно помнить и о данных, которые остаются в браузере: кэше, Cookie и другом.
Важный взгляд для анонимности
Для анонимности важно, что открытие Web-страницы — не одна простая связь.
В Web-доступе участвуют DNS, IP-адреса, HTTPS, Cookie, User-Agent, Referer, внешние скрипты, кэш и другие элементы.
Даже если HTTPS защищает содержимое связи, IP-адрес назначения, время, объем, заголовки браузера, идентификация через Cookie и дополнительная связь с внешними серверами остаются отдельными вопросами.
| Точка | Что проверять |
|---|---|
| DNS | Какие доменные имена запрашивались |
| IP-адрес | К каким серверам было подключение |
| HTTPS | Есть ли шифрование, обнаружение подмены и проверка другой стороны |
| Cookie | Может ли сайт определить того же пользователя |
| User-Agent | Передаются ли сведения о браузере и OS |
| Referer | Передается ли страница, с которой был переход |
| Внешняя связь | Нет ли связи с серверами кроме основной страницы |
| Кэш | Не остались ли на устройстве прошлые просмотры и полученные данные |
Особенно важно, что «содержимое связи зашифровано» и «неизвестно, кто куда обращался» — не одно и то же.
HTTPS очень важен для защиты содержимого и проверки легитимности другой стороны.
Но для анонимности нужно смотреть не только HTTPS, а отдельно DNS, IP-адреса, сведения, отправляемые браузером, Cookie, внешнюю связь и другое.
Итоги
До отображения Web-страницы в браузере поэтапно происходит несколько процессов.
Сначала браузер интерпретирует введенный URL и проверяет имя хоста.
Затем DNS ищет IP-адрес, соответствующий имени хоста.
Когда IP-адрес известен, браузер подключается к серверу.
При HTTPS TLS создает безопасный канал с шифрованием, обнаружением подмены и проверкой другой стороны.
Затем браузер отправляет HTTP-запрос, а сервер возвращает HTML, CSS, JavaScript, изображения и другие данные.
Браузер разбирает полученные данные и показывает их на экране.
Кроме того, при отображении одной страницы могут возникать дополнительные связи из-за изображений, рекламы, тегов аналитики, внешних шрифтов, внешних скриптов и другого.
Открытие Web-страницы состоит из большего числа связей и процессов, чем кажется.
Понимание этого потока помогает разложить не только базовую структуру Web, но и точки, на которые нужно смотреть при размышлении об анонимности и приватности.
Связанные инструменты
DNSLeakTest
Внешний ресурс, связанный с этой статьей. Открывайте его только если он подходит вашей ситуации и модели угроз.
Почему указано здесь: Он может помочь с темой статьи, но находится вне Anonymity Sense, поэтому перед использованием его нужно проверить.
BrowserLeaks WebRTC
Внешний ресурс, связанный с этой статьей. Открывайте его только если он подходит вашей ситуации и модели угроз.
Почему указано здесь: Он может помочь с темой статьи, но находится вне Anonymity Sense, поэтому перед использованием его нужно проверить.