К списку уроков

Урок 4. Web Kids

Онлайн и в Б-835, 30 октября (четверг), 15:00

Самый первый урок для начинающих в задачах категории web

1. Как работает Интернет?

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

Структура URL

Адрес сайта (URL) — это не просто набор букв, а точная инструкция для браузера.

Разберем на примере: https://www.mysite.com:80/catalog/product?id=15#price

  • Протокол: https — правила передачи данных.

  • Хост (Домен): www.mysite.com — адрес сервера.

  • Порт: :80 — "дверь", в которую мы стучимся. Обычно скрыт (для HTTP это 80, для HTTPS — 443).

  • Путь (Path): /catalog/product — путь к конкретному файлу или ресурсу на сервере.

  • Параметры (Query Params): ?id=15 — передача данных на сервер (например, "дай мне товар номер 15").

  • Якорь: #price — ссылка на конкретное место на уже загруженной странице.

Магия DNS (Domain Name System)

Компьютеры не понимают слова (google.com), они понимают IP-адреса (142.250.1.1). DNS — это адресная книга интернета.

Как это работает:

  1. Вы спрашиваете: "Где находится https://www.google.com/url?sa=E&source=gmail&q=google.com?"

  2. Запрос идет по цепочке: DNS-сервер провайдера -> Корневые сервера -> TLD сервера (.com) -> NS сервера домена.

  3. В ответ приходит IP-адрес, по которому браузер может соединиться с сайтом.

2. Язык общения: HTTP и HTTPS

Веб работает на протоколе HTTP (HyperText Transfer Protocol).

  • HTTP: Данные передаются в открытом виде (можно перехватить). Стандартный порт — 80.

  • HTTPS: Данные шифруются (Secure). Стандартный порт — 443.

Структура HTTP-запроса (Request)

Когда вы открываете сайт, браузер отправляет серверу текстовое "письмо".

GET /index.html HTTP/1.1      <-- Стартовая строка (Метод, Путь, Версия)
Host: www.example.com         <-- Заголовок: к какому сайту обращаемся
User-Agent: Mozilla/5.0       <-- Заголовок: информация о браузере
Accept: text/html             <-- Заголовок: что мы готовы принять
Cookie: session_id=123        <-- Заголовок: ваши "документы" (печеньки)
                              <-- Пустая строка (разделитель)
(Body)                        <-- Тело запроса (например, данные формы)

Основные методы запросов:

  • GET: Получить данные (открыть страницу).

  • POST: Отправить данные (логин, регистрация).

  • PUT/PATCH: Обновить данные.

  • DELETE: Удалить данные.

  • OPTIONS, HEAD: Служебные методы.

Структура HTTP-ответа (Response)

Сервер отвечает статусом и данными.

Коды состояния (Status Codes):

Код

Тип

Описание

1XX

Информационные

Запрос принят, продолжаю обработку.

2XX

Успех

Всё хорошо (например, 200 OK).

3XX

Перенаправление

Ресурс переехал (например, 301 Moved Permanently, 302 Found).

4XX

Ошибка клиента

Вы ошиблись адресом или правами (например, 404 Not Found, 403 Forbidden).

5XX

Ошибка сервера

Сервер сломался (например, 500 Internal Server Error).

3. Архитектура веб-приложений

Современный сайт — это не монолит, а система, состоящая из двух основных частей.

🖥️ Frontend (Client Side)

То, что вы видите и с чем взаимодействуете. Этот код исполняется в вашем браузере.

  • HTML: Каркас страницы (скелет).

  • CSS: Внешний вид и стиль (одежда и макияж).

  • JavaScript (JS): Логика и интерактивность (мышцы и нервная система).

⚙️ Backend (Server Side)

"Мозги" сайта. Эта часть скрыта от глаз пользователя и работает на удаленном сервере.

  • Web Server: Принимает запросы и отдает файлы (например: Nginx, Apache).

  • Logic: Языки программирования, обрабатывающие данные (например: Python (Django/Flask), PHP, Node.js).

  • Database: Хранилище информации.

    • SQL: PostgreSQL, MySQL.

    • NoSQL: MongoDB.

4. Векторы атак и Разведка

В соревнованиях CTF (Capture The Flag) и реальном пентестинге мы ищем ошибки в настройке серверов или коде веб-приложения (см. OWASP Top-10).

С чего начать исследование сайта?

  1. Robots.txt: Всегда проверяйте файл site.com/robots.txt. Там часто указаны скрытые разделы, куда "нельзя ходить поисковым роботам" (но хакерам очень интересно!).

  2. Скрытые директории: Ищите забытые разработчиками папки: .git, .svn, /admin, /backup.

  3. Анализ CMS: Если сайт работает на WordPress или Joomla, определите их версию и ищите известные уязвимости (CVE) под эти версии.

  4. Бизнес-логика: Попробуйте нестандартное поведение: купить товар за отрицательную цену или получить доступ к чужому профилю, просто поменяв id в URL (например, ?user_id=10 на ?user_id=1).

5. Инструментарий (Toolkit)

Для работы с вебом вам понадобятся правильные инструменты.

  • DevTools (F12): Встроенная панель разработчика в браузере (Chrome/Firefox).

    • Вкладка Network: Показывает все запросы, ответы и заголовки в реальном времени.

    • Вкладка Elements: Показывает HTML-код страницы и позволяет менять его "на лету" (только для вас).

  • Postman: Программа для ручной отправки HTTP-запросов. Позволяет легко менять методы (с GET на POST), редактировать заголовки и тело запроса.

  • OWASP ZAP: Мощный сканер уязвимостей и прокси-сервер. Автоматически ищет "дыры" в безопасности сайта.

6. Полезные материалы

  • How HTTPS Works Наглядный комикс о том, как работает шифрование и сертификаты в вебе. 🔗 howhttps.works

  • MDN Web Docs (HTTP Headers) Самая полная энциклопедия заголовков и веб-технологий от Mozilla. 🔗 developer.mozilla.org

  • OWASP Top 10 Список самых критических уязвимостей веб-приложений, который обновляется каждые несколько лет. Обязателен к изучению.

Задания