Как браузер вычисляет полный адрес

Когда браузер загружает новую страницу он скачивает с сервера не только HTML разметку, но также картинки, CSS и JS файлы. Все эти ресурсы перечислены внутри HTML разметки, выглядит она примерно так:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <img src="/images/photo.png" alt="Привед!">
</body>
</html>

Чтобы отобразить страницу браузер должен скачать картинку <img src="/images/photo.png" alt="Привед!">. Но если он просто возьмёт ссылку и попробует скачать файл, то ничего не выйдет. Ссылка на странице указана относительная /images/photo.png, в ней не хватает адреса сайта. Полный адрес браузеру придётся вычислить самостоятельно.

Внутри HTML разметки часто встречаются относительные адреса. В них не указаны протокол https и домен dvmn.org, необходимые для отправки запроса к серверу. Браузеру приходится на лету рассчитывать полный адрес. За основу он берет адрес самой HTML страницы — базовый адрес. Дальше рассмотрим несколько примеров, и в качестве базового адреса возьмем странице Девмана:

https://dvmn.org/modules/

Если в разметке встретился относительный адрес без стартового слеша photo.png, то браузер добавит его к базовому адресу и получится так:

https://dvmn.org/modules/photo.png

Если же адрес начинается со слеша /photo.png, то браузер откидывает часть базового адреса /modules/ и оставляет лишь хост https://dvmn.org. Это подобно тому, как в *nix системах путь может начинаться с корня файловой системы /var/lib/.... Получится ссылка:

https://dvmn.org/photo.png
Адрес HTML страницы Адрес картинки Полный адрес картинки
https://dvmn.org/modules/ photo.png https://dvmn.org/modules/photo.png
https://dvmn.org/modules/ /photo.png https://dvmn.org/photo.png
https://dvmn.org/modules/ http://example.com/photo.png http://example.com/photo.png

База — это адрес той HTML страницы, на которой были собраны ссылки.

И помните, что даже если сейчас на странице сайта все адреса начинаются со слеша /, то это ещё не значит, что так будет и в будущем. Сайты в интернете постоянно обновляются - меняются настройки CMS, добавляется контент. Вполне возможно, что на одной из страниц внезапно изменится способ записи адреса.

Читать дальше

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.