atpv

Навчальні матеріали з автоматизації технологічних процесів та виробництв, розроблені спільнотою

<- До підрозділу Коментувати

Протокол HTTP: практична частина

Тривалість: 2 акад. години.

Мета: навчитися працювати з засобами тестування та налагодження HTTP.

Лабораторна установка

  • Апаратне забезпечення: ПК.
  • Програмне забезпечення: WireShark, браузер.

Роботу рекомендується виконувати на віртуальній машині з Windows 10. Як створити віртуальну машину описано у практичному занятті Встановлення та налаштування ВМ з Windows 10

Порядок виконання роботи

Для перевірки роботи протоколу HTTP, відлагодження та тестування HTML, CSS і JavaScript в завантажених сторінках використовуються різноманітні інструменти Веб-розробника (WEB Developer Tools). Деякі з них є частиною браузерів, таких як Google Chrome або Mozila FireFox. У даному практичному завданні показані приклали з використанням інструментів WEB Developer Tools, що вбудовані в Mozilla FireFox. Зокрема, для аналізу і тестування HTTP запитів використовується Монітор мережі.

Для перевірки роботи запитів HTTP використовуватимуться сервіси сайту https://barcatreader.onrender.com. Ці сервіси дають можливість декодувати штрих-коди та QR-коди що передаються на сайт у вигляді зображення. Слід відмітити, що є багато програм, які можуть це робити в онлайн, дана використовується тільки в якості прикладу.

1. Встановлення браузера FireFox

  • У прикладах в лабораторній роботі використовується українська версія FireFox. Для спрощення роботи завантажте та встановіть її за наступним посиланням https://www.mozilla.org/uk/firefox/download/thanks/. При виконанні лабораторної роботи дозволяється використовувати і інші інструменти.

2. Перевірка роботи ВЕБ-застосунку BarCat Reader

  • Відкрийте сторінку в браузері https://barcatreader.onrender.com/ і перевірте її роботу. Для цього завантажте будь-який файл з зображенням штрих-коду, наприклад звідси (див. рис.1).

рис.1

рис.1. Зовнішній вигляд ВЕБ-застосунку BarCat Reader

Натисніть «Завантажити», оберіть файл з штрих-кодом, завантажте його та натисніть відповідну кнопку “Декодувати” при вдалій обробці запиту буде повернений результат з кодом, подібно до наведеного на рис.2.

рис.2

рис.2. Результат декодування

3. Робота з Монітором мережі FireFox

  • Активуйте в браузері FireFox інструмент монітору мережі «Веб-розробка->Мережі» (CTRL+Shift+E), або аналогічний в інших браузерах.
  • Виставте опцію «Вимкнути кеш» з панелі інструментів Монітору мережі. Це потрібно щоб не використовувалася інформація в кеші на Вашому ПК.
  • Відкрийте в браузері сторінку https://barcatreader.onrender.com/.
  • Проконтролюйте, щоб мережних запитів було 9. Якщо це не так - зробіть оновлення сторінки браузера іі знову впишіть вказану адресу.
  • Подивіться список мережних запитів, які були зроблені при завантаженні сторінки, зокрема зверніть увагу на наступні значення:
    • скільки запитів було зроблено
    • які методи (спосіб) та типи запитів
    • які були повернуті результати (стани), скористуйтеся даним ресурсом Вікіпедії для визначення стану

рис.3

рис.3. Робота з Монітором мережі FireFox

4. Аналіз заголовків 1-го мережного запиту та відповіді

  • Виберіть перший запис у списку запит і відкрийте панель «Заголовки».
  • Ознайомтеся з призначенням використаних в запиті заголовків з ресурсів Інтернет, наприклад з Вікіпедії.
  • Заповніть перші два поля таблиці, наведеної нижче, для пояснення заголовків в запиті. Для зручності розшифрування можете скористатися посиланнями в колонці Заголовок. Інші поля можете розібрати за бажанням.

Таб.1. Пояснення значень заголовків запиту

Заголовок Значення Пояснення значень заголовків
Accept-Encoding gzip, deflate, br  
Accept-Language uk-UA,uk;q=0.8,en-US;q=0.5,en;q=0.3  
Cache-Control no-cache  
Connection keep-alive  
Host barcatreader.onrender.com  
Pragma no-cache  
Upgrade-Insecure-Requests 1  
User-Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0  

рис.4

рис.4. Аналіз заголовків 1-го мережного запиту

  • Заповніть поля таблиці для заголовку Location для пояснення відповіді . Для зручності розшифрування можете скористатися посиланнями в колонці Заголовок.

Таб.2. Пояснення значень заголовків відповіді

Заголовок Значення Пояснення значень заголовків
Location /  

рис.5.

рис.5. Аналіз заголовків відповіді для 1-го мережного запиту

  • Перегляньте вміст відповіді у вкладці «Відповідь» на перший запит. Зробіть висновок щодо результату запиту. Впишіть результати в перший рядок таблиці 3.

Таб.3. Пояснення до запитів та відповідей

№ Запит (метод, URL) Пояснення до запиту, ініціатор Відповідь (стан – пояснення ) Пояснення до відповіді
1 GET https://barcatreader.onrender.com/ Запит на документ, ініціював користувач в рядку браузеру 200 - ???  
2 …      

5. Аналіз заголовків інших мережних запитів та відповідей

  • Аналогічно проаналізуйте другий запит та відповідь на нього. Зверніть увагу на зовнішній вигляд у вікні «Перегляд» у порівнянні з виглядом завантаженої сторінки у браузері. Чим вони відрізняються?

  • Відкрийте “Корисне навантаження відповіді” на панелі «Відповідь» (у форматі HTML). Для того, щоб зручніше проаналізувати вміст завантаженої сторінки:
    • скопіюйте цей текст
    • відкрийте на іншій закладці браузеру посилання https://www.freeformatter.com/html-formatter.html
    • помістіть скопійований текст в поле «Option 1: Copy-paste your HTML document here»
    • натисніть на кнопку «format HTML».

  • У вікні «Formatted HTML:» з’явиться відформатований код сторінки в форматі HTML. Проаналізуйте HTML код. Якщо ви до цього не знайомилися з мовою розмітки HTML - можете прочитати цей урок.

  • Зверніть увагу на тег link в заголовку HTML (допомога по призначенню тегу тут), та img (допомога по призначенню тегу тут).

  • Проаналізуйте 3-й та 4-й запити та відповіді. За якої причини з`явилися ці запити? Занотуйте для себе результат для захисту лабораторної.

  • Для розуміння 5-го запиту, прочитайте цю статтю. Занотуйте для себе результат для захисту лабораторної.

6. Аналіз заголовків та змісту POST

  • Використовуючи кнопку «Очистити» (зображення відерка) що знаходиться на панелі інструментів Монітору мережі, очистіть список запитів.

  • Завантажте будь-який файл з зображенням штрих-коду, як робили це в п.5.2. Натисніть «Декодувати». При вдалій обробці запиту буде повернений результат з кодом.

  • Використовуючи подробиці мережного запиту POST продивіться та проаналізуйте Заголовки. Зробіть копію екранів з заголовками та впишіть пояснення в таблиці 4. Для пришвидшення пошуку призначення заголовків користуйтесь посиланнями, що прив’язані до назв заголовків. Про типи MIME можна прочитати тут.

Таб.4. Пояснення значень заголовків запиту

Заголовок Значення Пояснення значень заголовків
Content-Length    
Content-Type    

  • Використовуючи подробиці мережного запиту POST продивіться та проаналізуйте параметри безпеки (вкладка “Безпека”).

  • Зробіть копію екрану корисного навантаження запиту.

7. Аналіз відповіді на POST

  • Відкрийте корисне навантаження відповіді на панелі «Відповідь» (у форматі HTML).
  • Для того, щоб зручніше проаналізувати вміст завантаженої сторінки:
    • скопіюйте його в буфер
    • відкрийте на іншій закладці браузеру посилання https://www.freeformatter.com/html-formatter.html
    • помістіть скопійований текст в поле «Option 1: Copy-paste your HTML document here» після чого натисніть на кнопку «format HTML». У вікні «Formatted HTML:» з’явиться відформатований код сторінки в форматі HTML.
  • Знайдіть місце в документі HTML, де виводиться числове значення штрих-коду.

8. Аналіз за допомогою Wireshark

Даний пункт рекомендується виконувати на віртуальній машині, так як встановлюється режим запису ключів шифрування в файл.

  • Запустіть віртуальну машину VM Windows 10.

  • У PowerShell виконайте наступну команду

setx SSLKEYLOGFILE "C:\sslkeys\keys.log"

Це встановлює змінною середовища SSLKEYLOGFILE рівною шляху розміщення ключів, для можливості доступу інших програм. Це потрібно для того, щоб можна було прослуховувати власний трафік у WireShark.

  • Перезапустіть VM Windows 10.

  • Запустіть браузер і відкрийте сайт http://gaia.cs.umass.edu/wireshark-labs/HTTP-wireshark-file4.html

  • Запустіть Wireshark, у налаштуваннях Edit → Preferences → Protocols → TLS → (Pre)-Master-Secret log filename вкажіть розміщення файлу keys.log

  • Запустіть захоплення пакетів у Wireshark, і перезавантажте сторінку без використання кешування.

  • Зробіть аналіз чи бачите Ви зміст корисного навантаження HTTPs. Якщо так, переходьте до виконання інших пунктів.

  • Деактивуйте кешування у Wireshark. Перезапуістіть у Wireshark захват пакетів.

  • Обновіть сторінку https://barcatreader.onrender.com/. Зупиніть захват пакетів.

  • Дайте відповіді на наступні питання

  • Яка IP-адреса сервера barcatreader.onrender.com?

  • Коли HTML-файл, який ви отримуєте, востаннє змінювався на сервері?

  • Зробіть аналіз HTTP трафіку, виконуючи п.6.

Автори

Практичне заняття розробив Олександр Пупена.

Допомога у створенні тестового Веб-застосунку Олексій Григорович

Feedback

Якщо Ви хочете залишити коментар у Вас є наступні варіанти:

Про проект і можливість допомогти проекту написано тут