language Podstawy HTTP i internetu

Poznaj jak działa internet, podstawy protokołu HTTP i bezpieczeństwa webowego. Zrozumienie tych konceptów jest kluczowe dla tworzenia aplikacji webowych.

cloud Jak działa internet?

Model klient-serwer

Twoja przeglądarka ↔ Serwer
"Daj mi stronę!"
← HTML + CSS + JS

Każda wizyta na stronie to rozmowa HTTP:

person
1. Ty

"Chcę zobaczyć stronę X"

dns
2. Serwer

"Oto pliki HTML, CSS, JavaScript"

web
3. Przeglądarka

Buduje stronę z otrzymanych plików

swap_horiz Metody HTTP

HTTP używa różnych "metod" (czasowników) do różnych operacji. Na początku skupimy się na dwóch najważniejszych:

GET Pobieranie danych

Kiedy używamy:
  • Wchodzenie na stronę
  • Wyszukiwanie
  • Pobieranie obrazków
Przykład:
GET /search?q=javascript HTTP/1.1 Host: example.com
⚠️ UWAGA: Dane widoczne w URL!
example.com/search?q=javascript

POST Wysyłanie danych

Kiedy używamy:
  • Wysyłanie formularzy
  • Logowanie się
  • Tworzenie konta
Przykład:
POST /login HTTP/1.1 Host: example.com Content-Type: application/x-www-form-urlencoded username=jan&password=***
✅ ZALETA: Dane ukryte w ciele żądania!

Inne metody (poznamy później):

PUT DELETE PATCH HEAD OPTIONS

security Bezpieczeństwo - złote zasady

Problem z GET i hasłami:

❌ ŹLE - GET z hasłem:
<form method="GET" action="/login"> <input name="username"> <input name="password" type="password"> </form>
Efekt: https://example.com/login?username=jan&password=tajne123 😱

Problemy:
  • Hasło widoczne w URL
  • Zapisane w historii przeglądarki
  • Może być udostępnione przez przypadek
✅ DOBRZE - POST z hasłem:
<form method="POST" action="/login"> <input name="username"> <input name="password" type="password"> <button type="submit">Zaloguj</button> </form>
Zalety POST:
  • Dane ukryte w ciele żądania
  • Nie widoczne w URL
  • Nie zapisywane w historii

info Kody statusu HTTP

Serwer odpowiada kodem, który mówi co się stało. Skupimy się na najważniejszych kodach:

✅ 2xx - Sukces

200 OK - wszystko w porządku
201 Created - nowy zasób utworzony

↗️ 3xx - Przekierowania

301 Moved Permanently - strona przeniesiona na stałe
302 Found - tymczasowe przekierowanie

❌ 4xx - Twoja wina

400 Bad Request - błędne żądanie
401 Unauthorized - musisz się zalogować
403 Forbidden - brak dostępu
404 Not Found - nie znaleziono strony
418 I'm a teapot - żart programistów ☕

⚠️ 5xx - Wina serwera

500 Internal Server Error - błąd serwera
503 Service Unavailable - serwer przeciążony

https HTTPS i bezpieczeństwo

Co to jest HTTPS?

HTTPS = HTTP + szyfrowanie

HTTP = rozmowa "na głos" (każdy może podsłuchać)
HTTPS = rozmowa "szyfrem" (tylko ty i serwer rozumiecie)

🔍 JAK SPRAWDZIĆ BEZPIECZEŃSTWO:

  1. Szukaj kłódki w pasku adresu 🔒
  2. Kliknij na kłódkę - zobaczysz certyfikat
  3. DevTools → Security - szczegóły bezpieczeństwa

🛡️ ZŁOTE ZASADY BEZPIECZEŃSTWA:

  • ✅ ZAWSZE HTTPS dla formularzy
  • ❌ NIGDY hasła w metodzie GET
  • 🔍 Sprawdzaj kłódkę przed logowaniem

cookie Cookies - podstawy

Co to są cookies?

Cookies = małe pliki tekstowe, które strona zapisuje w przeglądarce

Do czego służą:

account_circle
Logowanie

Pamiętanie, że jesteś zalogowany

palette
Preferencje

Język, motyw strony

shopping_cart
Koszyk

Zakupy w sklepie

Prosty przykład:

// Zapisanie motywu document.cookie = "theme=dark"; // Sprawdzenie motywu if (document.cookie.includes('theme=dark')) { // ustaw ciemny motyw }

🔍 JAK SPRAWDZIĆ COOKIES:

  1. F12 → Application → Cookies
  2. Znajdź nazwę strony
  3. Zobacz listę wszystkich cookies

quiz Serwer testowy - praktyczne ćwiczenia

🧪 Adres serwera testowego:

web4.wsb.digitdrop.pl

🔢 Testowanie kodów statusu
🍪 Testowanie cookies
🔒 Testowanie bezpieczeństwa

📝 ZADANIE PRAKTYCZNE:

  1. Otwórz każdy z powyższych linków
  2. W DevTools sprawdź:
    • Kod statusu (zakładka Network)
    • Cookies (zakładka Application)
    • Certyfikat HTTPS (kłódka w pasku adresu)

arrow_forward Następne kroki

Teraz gdy znasz podstawy HTTP, czas na praktyczne ćwiczenia z DevTools:

developer_mode Przejdź do ćwiczeń DevTools
home