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

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

Исторически Mozilla Firefox был первым браузером, под который независимые разработчики могли создавать расширения. Одним из таких расширений стал Firebug: это был набор инструментов, которые сильно упрощали и ускоряли разработку сайтов, отладку вёрстки и поведения страниц. Впоследствии инструменты разработчика начали входить в стандартную поставку Safari, а затем и браузеров Opera, Chrome и даже Microsoft Edge — и быстро развиваться. Firefox тоже стал включать такие инструменты и развивать их, и в конце концов разработка Firebug была остановлена в пользу развития функциональности самого браузера. При этом именно Firebug определил то, как выглядят сейчас инструменты разработки во всех браузерах.

В этом параграфе мы рассмотрим браузер Chromium и его веб-инспектор, а в следующем — Firefox. Так вышло, что нужная нам функциональность инспекторов разных браузеров отличается незначительно — даже сочетания клавиш почти те же самые — и вы в этом убедитесь сами. Для первого знакомства эта разница точно не будет существенной.

Как экспериментировать

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

При изучении сайтов полезен режим инкогнито (называемый также приватный просмотр). В режиме инкогнито каждый сайт видит вас будто впервые: все данные, которые сайт мог сохранять на компьютере, в рамках инкогнито-режима оказываются ему недоступны, но он может начать сохранять их заново. Если все окна режима инкогнито закрыть, собранные в нём данные будут забыты; однако пока существует хоть одно инкогнито-окно, они продолжают сохраняться в памяти компьютера.

Исходный код

Самое простое действие, которое всегда можно сделать ещё до вызова инспектора — просмотр исходного HTML-кода страницы. Вызвать его может пункт контекстного (доступного по щелчку правой кнопкой на странице) меню Просмотр кода страницы, либо комбинация клавиш Ctrl-U. Откроется отдельная вкладка с исходным кодом страницы — его можно читать и изучать.

Исходный код в виде текста изучать не всегда удобно. Кроме того, эта вкладка не отражает изменений, которые могли произойти со страницей за то время, пока она была открыта — таких как, например, динамическая подгрузка данных.

Разбираться с текстовым исходным кодом мешает и то, что современные сайты, особенно высоконагруженные, всё чаще прибегают к минификации кода — преобразованию, минимизирующему размер кода без изменений его функциональности: автоматическому устранению всех необязательных пробелов, замене длинных названий на короткие и так далее. Поскольку данных нужно передавать меньше, минифицированный сайт загружается быстрее и меньше нагружает сеть. Правда, в результате код, который получает пользователь, оказывается нечитаемым, хоть и работает точно так же. Посмотрите, например, исходный код главной страницы Яндекса (yandex.ru). Всё слито в одну строчку, вместо слов какие-то короткие комбинации букв — всё ради эффективности.

На помощь приходит инспектор.

Elements (элементы)

Нажмите правой кнопкой в любое место страницы. В русской версии Chromium нужный нам пункт меню неинформативно назван Просмотр кода элемента. В английской версии название точное — Inspect. Нажмите его.

Во вкладке Elements видно элементы, из которых состоит страница. Они показаны в виде иерархической структуры, их можно сворачивать и разворачивать. Если элементы на странице меняются, это будет немедленно отображено. При наведении мыши показывается, где находится тот или иной элемент, и какое место он занимает. Чтобы не искать нужный элемент в дереве, можно воспользоваться кнопкой в левом верхнем углу инспектора и нажать на нужную часть страницы.

В правой части перечислены CSS-стили — правила, определяющие внешний вид элемента: цвет, размер, шрифт и так далее. Там же есть другие вкладки с информацией, относящейся к элементам, но мы не будем их рассматривать.

Элементы можно не только изучать, но и изменять. Двойным щелчком по любому элементу и любому CSS-правилу можно его отредактировать. Для элементов изменения вступят в силу при нажатии Enter, стили же будут изменяться прямо во время набора.

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

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

Sources (источники)

Во вкладке Sources видно все файлы, образующие страницу: изображения, файлы стилей, скриптов и так далее. Некоторые из них можно редактировать прямо на месте, немедленно видя результат своих действий. Другие — например, файлы шрифтов — доступны только для просмотра.

Network (сеть)

Во вкладке Network показаны все сетевые запросы, которые сделала страница. Из соображений производительности запросы, сделанные до открытия вкладки, не фиксируются, и чтобы увидеть весь процесс загрузки с самого начала, нужно перезагрузить страницу.

Посмотрите на трафик, который ходит по сети, если включить какое-нибудь видео. Наблюдайте, как оно загружается по кусочкам.

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

Нажав на запрос правой кнопкой, можно скопировать его в виде команды: Copy → Copy as cURL. В буфер обмена попадёт команда curl с параметрами: её можно вставить в терминал и тем самым сделать запрос, полностью идентичный тому, что был сделан браузером. Скопированную команду, конечно, можно отредактировать. А ещё с помощью того же меню можно заблокировать повторные запросы на этот адрес (Block request URL), либо запросы целиком на весь домен (Block request domain).

Application (приложение)

В разделе Application нас прежде всего интересует секция Storage (хранилище), а в ней — Cookies (куки) и, в меньшей степени, Local Storage (локальное хранилище) и Session Storage (сессионное хранилище).

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

Хранилища Local Storage и Session Storage устроены похожим образом, но вмещают в себя гораздо больше информации, чем куки. При этом на сервер они автоматически не передаются — с ними работает сама страница. В них могут храниться, например, временные настройки сайта. Session Storage хранится временно, до закрытия окна браузера, а Local Storage не удаляется, пока пользователь не решит очистить хранилище. Содержимым хранилищ тоже можно управлять с помощью инспектора.

Также к данным, сохраняющимся на компьютере, относится кэш — про него секция Cache. В кэш попадают ответы на запросы, которые не должны часто меняться, такие как изображения и файлы шрифтов; при повторной необходимости сделать такой запрос браузер может не скачивать информацию заново, а достать её сразу из кэша (либо всё же сделать короткий запрос с указанием времени имеющейся в кэше копии и убедиться, что она актуальна). Страница напрямую не имеет доступа к кэшу; в ответах сервера могут быть лишь предписания браузеру закэшировать или, наоборот, не кэшировать ответ. Однако он может влиять на функционирование страницы. Инспектор позволяет просматривать и чистить кэш.

Ещё больше инструментов

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

В меню, доступном через вертикальные три точки справа, есть раздел More tools — больше инструментов. В частности, инструмент Sensors — сенсоры — позволяет указать географические координаты, и любая страница, пытающаяся запросить точное местоположение, будет получать именно эти координаты, а не реальные данные.

Что пока неактуально

Console (консоль). Туда попадают ошибки, а ещё в ней можно писать код. Это тема следующего параграфа.

Performance, Memory, Lighthouse. Это средства замера производительности; в контексте информационной безопасности они, вероятнее всего, не понадобятся.

Другие инструменты из More tools тоже нужны скорее для продвинутой веб-разработки, чем для исследований в области безопасности.

Не бойтесь изучать инспектор, пробовать разную его функциональность, понимать, как устроены те или иные сайты. Узнаете много интересного и полезного.