Ви натискаєте кнопку «Показати ще», і на екрані з’являються нові картки. Видима зміна триває мить, однак браузеру іноді доводиться попросити дані в іншої програми й дочекатися відповіді.
Вебзастосунок — це програмна система, якою користуються через браузер або інші вебтехнології. Так працюють, наприклад, пошта, інтернет-магазини й навчальні платформи: вони реагують на дії людини, показують дані та часто зберігають поточний стан роботи.
У цій статті ми зупинимо один клік і простежимо його можливий шлях. Це допоможе відрізняти роботу браузера від роботи сервера, розуміти повідомлення між ними та не сприймати результат на екрані як магію.
До кліку: браузер уже має код і стан
Браузер показує сторінку не як нерухому фотографію. Він отримує документи, стилі, зображення і часто програмний код. Код може реагувати на дії людини: відкривати меню, перевіряти поле форми або запитувати додаткові дані.
Браузер також підтримує стан — інформацію про поточну ситуацію: що відкрито, які елементи вибрано та які дані вже завантажено. Частина стану може існувати лише в поточній вкладці. Інша частина може зберігатися на сервері, наприклад кошик, пов’язаний з обліковим записом.
Після кліку: один можливий шлях
Припустімо, що додаткових карток у браузері ще немає.
- Код у браузері виявляє клік.
- Браузер діє як клієнт і створює HTTP-запит із методом та адресою потрібного ресурсу.
- Запит надходить до сервера — програми, яка приймає запити й повертає відповіді. Зазвичай вона працює на віддаленому комп’ютері, хоча під час розробки може працювати й локально.
- Сервер опрацьовує запит, за потреби звертається до даних і формує HTTP-відповідь.
- Відповідь містить статус, службові поля та, можливо, дані нових карток.
- Код у браузері оновлює стан і перемальовує потрібну частину екрана.
Це лише один можливий шлях. Не кожен клік спричиняє запит до сервера: уже завантажене меню браузер може відкрити сам. Відповідь також не обов’язково містить готову HTML-сторінку. Сервер може повернути дані, зображення або повідомлення про помилку.
Вебсторінка, вебсайт і вебзастосунок
Вебсторінка — це окремий документ, доступний за адресою. Вебсайт — пов’язаний набір сторінок і ресурсів. Вебзастосунок — програмна система, з якою людина взаємодіє через вебтехнології.
Чіткої межі між цими поняттями не завжди існує. Сторінка статті може бути переважно документом, але водночас містити пошук, коментарі та особисті закладки. Інтернет-магазин поєднує інформаційні сторінки зі станом кошика, обліковими записами, оплатою та серверними правилами.
Практичніше з’ясувати, що виконує браузер, що виконує сервер, де зберігається стан і якими повідомленнями обмінюються ці частини.
Що містять HTTP-запит і відповідь
HTTP визначає правила обміну повідомленнями між клієнтом і сервером. Запит містить метод, ціль запиту, службові поля та іноді тіло. Відповідь містить статус, службові поля й необов’язкове тіло з документом або даними.
Метод GET призначений для отримання представлення ресурсу. Інші HTTP-методи можуть, залежно від призначення запиту, створювати або змінювати дані. Тому перша навчальна вправа обмежена ручним перезавантаженням публічної сторінки. Ми спостерігаємо її головний документ і не повторюємо запити, наслідків яких не розуміємо.
Як спостерігати разом із ШІ-агентом
В інструментах розробника браузера є вкладка Network. Вона показує запити й відповіді, які спостерігає браузер. Агент може пояснити, як знайти головний документ та прочитати його метод, статус і тип вмісту. Саму дію виконує й перевіряє учень.
Не передавайте агенту повний запис сесії. Cookies, заголовок Authorization, токени й приватні параметри можуть містити дані для доступу до облікового запису. Безпечна навчальна нотатка містить лише метод, шлях без параметрів, статус і Content-Type публічного запиту.
Спостереження має чіткі межі. Метод, статус і Content-Type підтверджують лише те, що видно в Network. Вони не розкривають автоматично мову, фреймворк чи базу даних сервера і не доводять безпечність усієї системи.
Де тут Django
Django — це серверний вебфреймворк: набір засобів, за допомогою яких розробники створюють серверну частину вебзастосунку. Залежно від завдання код Django може зіставити адресу з потрібною логікою, прочитати або змінити дані, перевірити доступ і підготувати HTML чи іншу HTTP-відповідь.
Браузер не запускає Django у вкладці. Він обмінюється HTTP-повідомленнями із серверним застосунком. Із самої вкладки Network не завжди можна встановити, чи використовує сервер саме Django.
Тепер зрозуміло, що означає фраза «Django опрацьовує вебзапит»: клієнт надсилає запит, серверний код готує відповідь, а браузер показує результат. Саме ця модель знадобиться перед вивченням будови Django-застосунків.
Офіційні джерела:
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites
- https://developer.mozilla.org/en-US/docs/Web/HTTP
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Messages
Простежте один безпечний запит разом із ШІ
Спостерігайте лише за завантаженням публічної сторінки без входу в обліковий запис. Не надсилайте агенту cookies, токени, приватні адреси або повний HAR-файл.
Виконано кроків:0 / 0
Я хочу побачити невидимий шлях у браузеріВикористайте вкладку Network лише як read-only вікно в один публічний GET-запит.
Назвіть дві сторони й два повідомлення
Відрізнити клієнта від сервера, а запит від відповіді.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Браузер ініціює запит, а сервер повертає окрему відповідь.
Безпечний контекст для агента
- Розділ статті про зупинений клік.
Дозволено
- Пояснювати схему й ставити перевірочні запитання без доступу до браузера.
Заборонено
- Відкривати сторінки, надсилати запити або видавати метафору за точний мережевий доказ.
Зупиніться, якщо
- Ви описуєте запит і відповідь як одне повідомлення.
Як перевірити
- Відтворіть схему без тексту агента й назвіть напрям кожної стрілки.
Мета: Відрізнити клієнта від сервера, а запит від відповіді. Безпечний контекст для агента: - Розділ статті про зупинений клік. Дозволено: - Пояснювати схему й ставити перевірочні запитання без доступу до браузера. Заборонено: - Відкривати сторінки, надсилати запити або видавати метафору за точний мережевий доказ. Зупиніться, якщо: - Ви описуєте запит і відповідь як одне повідомлення. Очікуваний результат: Ваша схема «браузер → запит → сервер → відповідь → браузер». Як перевірити: - Відтворіть схему без тексту агента й назвіть напрям кожної стрілки.
Перевірте межі спостереження
Вибрати публічну сторінку без акаунта й приватних даних.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Навіть read-only панель може показати заголовки або параметри, якими не слід ділитися.
Безпечний контекст для агента
- Публічна HTTPS-адреса й підтвердження, що ви вийшли з облікових записів на цьому сайті.
Дозволено
- Перевірити домен, тип сторінки й домовитися виписувати лише метод, шлях без параметрів, статус і тип вмісту.
Заборонено
- Використовувати приватні кабінети, localhost, внутрішні домени; копіювати cookies, Authorization, токени, query-параметри або тіло відповіді.
Зупиніться, якщо
- Сторінка потребує входу, містить персональні дані або безпечність адреси неясна.
Як перевірити
- Самостійно відкрийте адресу в приватному вікні й переконайтеся, що вхід не потрібен.
Мета: Вибрати публічну сторінку без акаунта й приватних даних. Безпечний контекст для агента: - Публічна HTTPS-адреса й підтвердження, що ви вийшли з облікових записів на цьому сайті. Дозволено: - Перевірити домен, тип сторінки й домовитися виписувати лише метод, шлях без параметрів, статус і тип вмісту. Заборонено: - Використовувати приватні кабінети, localhost, внутрішні домени; копіювати cookies, Authorization, токени, query-параметри або тіло відповіді. Зупиніться, якщо: - Сторінка потребує входу, містить персональні дані або безпечність адреси неясна. Очікуваний результат: Дозволений домен і чотири безпечні поля для нотатки. Як перевірити: - Самостійно відкрийте адресу в приватному вікні й переконайтеся, що вхід не потрібен.
Сплануйте одне перезавантаження
Заздалегідь визначити дію, фільтр і потрібний доказ.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Сторінка може виконати багато запитів, але для першої карти достатньо головного документа.
Безпечний контекст для агента
- Дозволена адреса й назви полів з попереднього кроку.
Дозволено
- Описати відкриття Network, фільтр Doc/Document, одне перезавантаження й ручне переписування чотирьох полів.
Заборонено
- Пропонувати Console-код, зміну запиту, повторення POST/PUT/DELETE, експорт HAR або встановлення розширень.
Зупиніться, якщо
- План містить дію, яка змінює стан, або збирає більше даних, ніж потрібно.
Як перевірити
- Перевірте, що план не потребує логіна, введення даних чи передавання заголовків агенту.
Мета: Заздалегідь визначити дію, фільтр і потрібний доказ. Безпечний контекст для агента: - Дозволена адреса й назви полів з попереднього кроку. Дозволено: - Описати відкриття Network, фільтр Doc/Document, одне перезавантаження й ручне переписування чотирьох полів. Заборонено: - Пропонувати Console-код, зміну запиту, повторення POST/PUT/DELETE, експорт HAR або встановлення розширень. Зупиніться, якщо: - План містить дію, яка змінює стан, або збирає більше даних, ніж потрібно. Очікуваний результат: План одного публічного GET-запиту з очікуваним документом у відповіді. Як перевірити: - Перевірте, що план не потребує логіна, введення даних чи передавання заголовків агенту.
Побачте головний документ
Отримати фактичні метод, шлях, статус і тип вмісту.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Network показує спостережені повідомлення, а не внутрішній код сервера.
Безпечний контекст для агента
- Погоджений план і публічна сторінка.
Дозволено
- Вручну відкрити Network, перезавантажити сторінку один раз, вибрати головний Document і виписати погоджені поля.
Заборонено
- Натискати форми чи кнопки зі зміною даних, копіювати секретні заголовки, давати агенту керування браузером або повторювати інші методи.
Зупиніться, якщо
- З’явилися дані акаунта, неочікуване перенаправлення на вхід або незрозумілий метод.
Як перевірити
- Перегляньте нотатку й переконайтеся, що в ній немає токенів, cookies чи персональних даних.
Мета: Отримати фактичні метод, шлях, статус і тип вмісту. Безпечний контекст для агента: - Погоджений план і публічна сторінка. Дозволено: - Вручну відкрити Network, перезавантажити сторінку один раз, вибрати головний Document і виписати погоджені поля. Заборонено: - Натискати форми чи кнопки зі зміною даних, копіювати секретні заголовки, давати агенту керування браузером або повторювати інші методи. Зупиніться, якщо: - З’явилися дані акаунта, неочікуване перенаправлення на вхід або незрозумілий метод. Очікуваний результат: Санітизована нотатка з методом, шляхом без параметрів, статусом і Content-Type. Як перевірити: - Перегляньте нотатку й переконайтеся, що в ній немає токенів, cookies чи персональних даних.
Зіставте нотатку з видимим результатом
Довести, що відповідь справді була документом для відкритої сторінки.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Статус і Content-Type підтверджують частину схеми, але не пояснюють усю серверну реалізацію.
Безпечний контекст для агента
- Санітизована нотатка й адреса сторінки.
Дозволено
- Повторити одне перезавантаження й порівняти ті самі поля.
Заборонено
- Робити висновки про базу, фреймворк або безпеку сервера лише з одного запиту.
Зупиніться, якщо
- Поля не відтворюються або результат залежить від входу.
Як перевірити
- Самостійно порівняйте два записи та видимий заголовок сторінки.
Мета: Довести, що відповідь справді була документом для відкритої сторінки. Безпечний контекст для агента: - Санітизована нотатка й адреса сторінки. Дозволено: - Повторити одне перезавантаження й порівняти ті самі поля. Заборонено: - Робити висновки про базу, фреймворк або безпеку сервера лише з одного запиту. Зупиніться, якщо: - Поля не відтворюються або результат залежить від входу. Очікуваний результат: Дві узгоджені спостереження й позначені межі того, чого вони не доводять. Як перевірити: - Самостійно порівняйте два записи та видимий заголовок сторінки.
Розкажіть історію одного завантаження
Пов’язати видиму сторінку з клієнтом, запитом, сервером і відповіддю.
Межі, перевірка й завдання агенту
Спочатку зрозумійте
- Браузер може виконувати додатковий код і запити після головного документа.
Безпечний контекст для агента
- Ваша схема й перевірена нотатка.
Дозволено
- Після вашого пояснення поставити уточнювальне запитання або вказати непідтверджене припущення.
Заборонено
- Писати пояснення замість вас або приписувати серверу технологію, якої не видно в доказах.
Зупиніться, якщо
- Ви не можете відділити спостережений факт від припущення.
Як перевірити
- Для кожного твердження вкажіть: його видно в браузері, у Network або це лише припущення.
Мета: Пов’язати видиму сторінку з клієнтом, запитом, сервером і відповіддю. Безпечний контекст для агента: - Ваша схема й перевірена нотатка. Дозволено: - Після вашого пояснення поставити уточнювальне запитання або вказати непідтверджене припущення. Заборонено: - Писати пояснення замість вас або приписувати серверу технологію, якої не видно в доказах. Зупиніться, якщо: - Ви не можете відділити спостережений факт від припущення. Очікуваний результат: Ваш абзац про запит і відповідь плюс одне речення про межі спостереження. Як перевірити: - Для кожного твердження вкажіть: його видно в браузері, у Network або це лише припущення.