CORS - co to jest i kiedy sprawia problemy

Cel prezentacji

Co przekazesz słuchaczom?

Słuchacze zrozumieja, czym jest CORS (Cross-Origin Resource Sharing), dlaczego przegladarki blokuja niektore zadania oraz jak prawidłowo skonfigurować serwer, aby umozliwic bezpieczna komunikacje miedzy roznymi domenami.

Plan prezentacji (8-12 min)

Wprowadzenie (2 min) - Czym jest Same-Origin Policy i dlaczego istnieje
Teoria: CORS (2 min) - Mechanizm zezwalania na cross-origin requests
Teoria: Preflight (2 min) - Kiedy przegladarka wysyła OPTIONS
Demo praktyczne (4 min) - Błąd CORS w konsoli i jego rozwiązanie
Podsumowanie (2 min) - Najczestsze błędy i dobre praktyki

Kluczowe zagadnienia

Same-Origin Policy

Co to jest Same-Origin?

Dwa URL-e maja to samo origin, gdy maja identyczne:

Protokół (http vs https)
Domena (example.com vs api.example.com)
Port (80 vs 8080)

Przegladarka blokuje JavaScript przed dostepem do zasobow z innego origin że wzgledow bezpieczeństwa.

URL A	URL B	Same Origin?
`https://example.com/page`	`https://example.com/api`	Tak
`https://example.com`	`http://example.com`	Nie (protokół)
`https://example.com`	`https://api.example.com`	Nie (subdomena)
`https://example.com:443`	`https://example.com:8080`	Nie (port)

Jak działa CORS

Simple Request - przegladarka od razu wysyła zadanie:

Warunki prostego requestu:

Metoda: GET, HEAD lub POST
Nagłówki: tylko standardowe (Accept, Content-Type itp.)
Content-Type: text/plain, application/x-www-form-urlencoded lub multipart/form-data

GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com

---

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Content-Type: application/json

Preflight Request - przegladarka najpierw pyta o pozwolenie:

Kiedy wystepuje preflight:

Metoda: PUT, DELETE, PATCH
Niestandardowe nagłówki (np. Authorization, X-Custom-Header)
Content-Type: application/json

OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

---

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Request z credentials (cookies, auth):

Wymaga specjalnej konfiguracji po obu stronach:

Frontend: credentials: 'include'
Backend: Access-Control-Allow-Credentials: true
UWAGA: Nie można użyć * w Allow-Origin!

// Frontend
fetch('https://api.example.com/data', {
  credentials: 'include'
});

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Credentials: true

Nagłówki CORS

Response Headers

Access-Control-Allow-Origin - dozwolone origin(y)
Access-Control-Allow-Methods - dozwolone metody HTTP
Access-Control-Allow-Headers - dozwolone nagłówki
Access-Control-Allow-Credentials - czy cookies dozwolone
Access-Control-Max-Age - czas cachowania preflight
Access-Control-Expose-Headers - nagłówki dostepne dla JS

Request Headers

Origin - skad pochodzi request (automatycznie)
Access-Control-Request-Method - metoda do użycia (preflight)
Access-Control-Request-Headers - nagłówki do użycia (preflight)

Sugestie wizualne

Slajd 1: Same-Origin Policy

Diagram pokazujacy:

Strona na domenie A (np. frontend.com)
Strzałka do API na tej samej domenie - DOZWOLONE (zielona)
Strzałka do API na innej domenie - ZABLOKOWANE (czerwona)
Informacja: “Przegladarka chroni użytkownika”

Slajd 2: Przepływ CORS

Schemat sekwencyjny:

Przegladarka -> Serwer: Request z nagłówkiem Origin
Serwer -> Przegladarka: Response z Access-Control-Allow-Origin
Przegladarka: Sprawdza czy origin pasuje
JavaScript: Dostaje dane (lub błąd)

Slajd 3: Preflight flow

Diagram pokazujacy dwa requestty:

OPTIONS (preflight) - “Czy mogę?”
Właściwy request - “Wysyłam dane” Z zaznaczeniem, że preflight jest cachowany (Max-Age)

Slajd 4: Typowy błąd CORS

Screenshot z konsoli przegladarki z bledem:

Access to fetch at 'https://api.example.com/data' from origin
'https://frontend.com' has been blocked by CORS policy

Demo praktyczne

Przygotowanie do demo

Scenariusz demo 1: Wywołanie błędu CORS

Utworz plik HTML na localhost:3000
Dodaj fetch do API na localhost:8080
Otworz DevTools (F12) -> Console
Pokaz błąd “blocked by CORS policy”
Pokaz w Network, że request został wysłany (serwer go dostał!)

<!-- index.html na localhost:3000 -->
<!DOCTYPE html>
<html>
<head><title>CORS Demo</title></head>
<body>
  <h1>CORS Test</h1>
  <button onclick="fetchData()">Pobierz dane</button>
  <pre id="result"></pre>

  <script>
    async function fetchData() {
      try {
        // To wywoła błąd CORS jeśli serwer nie ma odpowiednich nagłówków
        const response = await fetch('http://localhost:8080/api/data');
        const data = await response.json();
        document.getElementById('result').textContent = JSON.stringify(data, null, 2);
      } catch (error) {
        document.getElementById('result').textContent = 'Błąd: ' + error.message;
        console.error('CORS Error:', error);
      }
    }
  </script>
</body>
</html>

Scenariusz demo 2: Naprawienie błędu CORS

Pokaz kod serwera bez nagłówków CORS
Dodaj nagłówek Access-Control-Allow-Origin
Zrestartuj serwer
Pokaz, że teraz request działa

<?php
// api.php na localhost:8080 - PRZED (bez CORS)
header('Content-Type: application/json');
echo json_encode(['message' => 'Hello from API']);

<?php
// api.php na localhost:8080 - PO (z CORS)
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:3000');

// Obsługa preflight
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type');
    exit(0);
}

echo json_encode(['message' => 'Hello from API']);

Scenariusz demo 3: Preflight w akcji

Zmien request na POST z Content-Type: application/json
Pokaz w DevTools dwa requesty (OPTIONS + POST)
Omow, dlaczego preflight jest potrzebny

Warianty wymagan

Wymagania minimalne:

Wyjasnij Same-Origin Policy i po co istnieje
Opisz czym jest CORS i jaki problem rozwiązuje
Pokaz 1 schemat komunikacji
Pokaz przykład błędu w konsoli

Ocena: 3.0 (minimum)

Wymagania rozszerzone:

Pokaz minimalny zestaw nagłówków CORS
Wytłumacz preflight (OPTIONS) na przykładzie
Omow typowe błędy (np. * z credentials)
Demo z naprawieniem błędu CORS

Ocena: 4.0-5.0

Pytania do dyskusji

Pytanie 1

Dlaczego curl i Postman nie maja problemow z CORS, a przegladarka tak?

Pytanie 2

Czy ustawienie Access-Control-Allow-Origin: * jest bezpieczne? W jakich przypadkach?

Pytanie 3

Co się stanie, jeśli serwer nie obsługuje metody OPTIONS?

Pytanie 4

Jak CORS wpływa na bezpieczeństwo aplikacji webowych?

Czeste błędy i antywzorce

Dobre praktyki

Whitelist origins

Zdefiniuj liste dozwolonych origin i sprawdzaj przychodzacy nagłówek Origin.

Ogranicz metody

Nie dawaj * - wymien tylko te metody HTTP, które naprawde potrzebujesz.

Ustaw Max-Age

Cachuj odpowiedzi preflight, aby zmniejszyc liczbe requestow OPTIONS.

Testuj w przegladarce

Postman nie testuje CORS - zawsze sprawdzaj w prawdziwej przegladarce.

Zasoby

MDN: Cross-Origin Resource Sharing (CORS) Oficjalna dokumentacja CORS od Mozilli.

MDN: Same-origin policy Wyjaśnienie polityki tego samego pochodzenia.

CORS in Action Swietny artykuł Jake'a Archibalda o CORS.

Test CORS Narzedzie do testowania konfiguracji CORS.