Блок 06 · Веб-безопасность

«За кулисами сайта»

Панель разработчика

DevTools: элементы, сеть, куки и скрытые комментарии — заглядываем на «кухню» сайта.

Теория

Панель разработчика (DevTools)

DevTools — встроенный инструмент любого современного браузера. Открывается клавишей F12 или Ctrl+Shift+I. Показывает «кухню» сайта: HTML-код, стили, сетевые запросы, куки, консоль.

Основные вкладки

Elements — HTML-структура страницы; можно просматривать и редактировать прямо в браузере
Network — все запросы страницы: к каким серверам, что отправляет и получает
Application — куки, LocalStorage, SessionStorage
Console — ошибки JavaScript и место для выполнения JS-кода
Source — исходный код страницы и скриптов

hidden.html

<!-- Это HTML-комментарий — виден только в коде -->
<!-- TODO: убрать тестовый пароль admin:test123 -->  ← так бывает!

Как найти комментарии. Ctrl+U (исходный код) → Ctrl+F → искать <!--

Практикум

Практика

Практическое задание

Исследуем сайты «изнутри». Отмечай выполненные шаги.

Открой F12 на любом сайте. Найди в коде тег <title> — что в нём написано?
Перейди на вкладку Network, обнови страницу. Найди основной HTML-запрос. Какой статус-код (200? 301?)
Перейди на Application → Cookies. Какие куки установлены на сайте google.com?
CTF-задание: учитель даёт URL страницы со спрятанным флагом. Флаг — в HTML-комментарии (Ctrl+U или DevTools → Elements).

Лайфхак. Ctrl+U — быстрый способ увидеть исходный код страницы. В CTF комментарии в коде — одно из самых частых мест для флагов.