Czym jest CORS?

Marek Krzeszowiec

13 Paź

10 minut

CORS (ang. Cross-Origin Resource Sharing) to mechanizm bezpieczeństwa oparty na protokole HTTP, kontrolowany i wymuszany przez klienta (przeglądarkę internetową). Jest obecny we wszystkich popularnych przeglądarkach internetowych. CORS jest zaimplementowany głównie w przeglądarkach internetowych, ale może być również używany w klientach API jako opcja. Służy do kontrolowania dostępu do zasobów na stronach internetowych z różnych domen, zapewniając bezpieczną komunikację między nimi.

Jak działa?

Wszystko zaczyna się po stronie klienta, przed wysłaniem docelowego żądania. Klient (przeglądarka) wysyła tzw. żądanie CORS preflight do serwera z parametrami w nagłówkach HTTP (nagłówki CORS). Serwer odpowiada używając tych samych nagłówków z różnymi lub tymi samymi wartościami. Przeglądarka decyduje, na podstawie odpowiedzi CORS preflight, czy może wysłać główne żądanie do serwera i zgłosi błąd, jeśli odpowiedź nie spełnia wymagań CORS preflight.

Nawet jak przeglądarka nie spełnia wymagań CORS preflight, to nadal można wykonać udane żądanie za pomocą narzędzi takich jak curl, Postman.

CORS preflight

Gdy przeglądarka wysyła żądanie do serwera, najpierw wysyła żądanie HTTP Options request. Nazywa się to żądaniem CORS preflight. Następnie serwer odpowiada listą dozwolonych metod i nagłówków. Jeśli przeglądarka może wykonać rzeczywiste żądanie, wysyła rzeczywiste żądanie. Jeśli nie, wyświetla błąd i nie kontynuuje wysyłania głównego żądania.

CORS preflight: Server-Client Requests Scheme

Nagłówki CORS

Nagłówki CORS to nagłówki HTTP, które są używane do kontrolowania polityki CORS. Są one używane w zapytaniach, w których przeglądarka wysyła żądanie CORS preflight do serwera, a serwer odpowiada za pomocą:

Access-Control-Allow-Origin wskazuje, jakie pochodzenie może pobierać zasoby. Użyj jednego lub więcej źródeł, np: https://foo.io,http://bar.io.
Access-Control-Allow-Methods wskazuje jakie metody HTTP są dozwolone. Użyj jednego lub więcej przecinków metod HTTP, np: GET,PUT,POST.
Access-Control-Allow-Headers wskazuje, jakie nagłówki żądań są dozwolone. Użyj jednego lub więcej nagłówków, np: Authorization,X-My-Token.
Access-Control-Allow-Credentials wskazuje, czy wysyłanie plików cookie jest dozwolone. Domyślnie: false.
Access-Control-Max-Age - wskazuje jak długo wynik żądania powinien być buforowany, w sekundach. Domyślnie: 0.

Jeśli zdecydujesz się użyć Access-Control-Allow-Credentials=true, musisz być świadomy faktu, że nie możesz użyć symboli wieloznacznych * w nagłówkach Access-Control-Allow-*. Wymagane jest wyraźne wymienienie wszystkich dozwolonych źródeł, metod i nagłówków. nagłówków.

Zobacz pełną listę nagłówków CORS.

cors request and response headers

Zablokowane zapytanie

Gdy przeglądarka blokuje żądanie z powodu polityki CORS, to wyświetli w konsoli:

Access to XMLHttpRequest at 'http://localhost:8080/' from origin
'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present
on the requested resource.

Powyższy błąd CORS mówi, że przeglądarka nie mogła uzyskać dostępu do zasobu (https://localhost:8080) ze źródła (https://localhost:3000), ponieważ serwer na to nie zezwolił. Stało się tak, ponieważ serwer nie odpowiedział z nagłówkiem Access-Control-Allow-Origin z pochodzeniem lub z symbolem wildcard * w odpowiedzi CORS preflight.

Żądanie może zostać zablokowane przez politykę CORS nie tylko z powodu nieprawidłowego pochodzenia, ale także nieprawidłowego nagłówka HTTP, metody HTTP lub nagłówka Cookie.

Mylące błędy CORS

W niektórych przypadkach, gdy serwer ma zaimplementowane rate-limiter, load balancer lub serwer autoryzacji, to można otrzymać fałszywy błąd CORS. Zablokowane lub odrzucone żądania przez serwer powinny odpowiadać kodami statusu błędu. Np:

500 internal server error
429 too many requests
403 forbidden
401 unauthorized
wszystkie inne niż 2XX or 3XX

Możesz zobaczyć, że żądanie zostało zablokowane z powodu nieudanego żądania wstępnego, ale w rzeczywistości usługa po prostu je odrzuca. Należy zawsze sprawdzać kod statusu i treść odpowiedzi, aby uniknąć niepotrzebnego debugowania. Przeglądarka prawidłowo ostrzega o niepowodzeniu żądania preflight CORS, ale przyczyną błędu niekoniecznie musi być związana z konfiguracją CORS.

Jak naprawić?

Naprawa głównie sprowadza się do wysłania zapytania z poprawnymi nagłówkami. Istnieje kilka sposobów na rozpoczęcie odpowiadania z właściwym CORS. Można użyć serwera proxy lub oprogramowania pośredniczącego w serwerze.

Należy pamiętać, że nagłówki Access-Control-* są cachowane w przeglądarce internetowej zgodnie z wartością w nagłówku Access-Control-Max-Age. Upewnij się, że wyczyściłeś pamięć podręczną przed przetestowaniem zmian. Możesz również wyłączyć buforowanie w przeglądarce .

1. Skonfiguruj swój serwer

Jeśli jesteś właścicielem serwera, to przede wszystkim musisz skonfigurować odpowiedzi CORS. Można to osiągnąć na wiele sposobów i na wielu warstwach aplikacji. Najbardziej powszechnym sposobem jest użycie reverse-proxy, bramy API lub dowolnej innej usługi routingu, która oferuje dodawanie nagłówków do odpowiedzi.

Istnieje wiele usług, które można wykorzystać do tego celu, niektóre z nich to: HAProxy, Linkerd, Istio, Kong, nginx, Apache, Traefik.

Jeśli twoja infrastruktura zawiera tylko aplikację bez żadnych dodatkowych warstw, możesz po prostu dodać obsługę CORS w kodzie aplikacji.

Oto kilka popularnych przykładów włączenia CORS:

Apache: modyfikacja pliku .htaccess,
Nginx: modyfikacja pliku konfiguracyjnego](https://enable-cors.org/server_nginx.html),
Traefik: use middlewares,
Spring Boot: użyj adnotacji @EnableCORS,
ExpressJS: use app.use(cors())](https://expressjs.com/en/resources/middleware/cors.html),
NextJS: use request helpers](https://nextjs.org/docs/api-routes/api-middlewares#cors-support).

Tutaj można znaleźć więcej przykładów włączania CORS w różnych frameworkach i językach językach: enable-cors.org.

Jeśli nie masz dostępu do serwera z którego chcesz pobrać dane, musisz użyć jednego z następujących rozwiązań opisanych poniżej.

2. Wyłącz sprawdzanie CORS w przeglądarce

Możesz całkowicie wyłączyć mechanizm CORS w swojej przeglądarce. Aby wyłączyć sprawdzanie CORS w Google Chrome, należy uruchomić ją z flagami --disable-web-security i --user-data-dir. W ten sposób Google Chrome nie będzie będzie wysyłać żądań CORS preflight i nie będzie weryfikować nagłówków CORS.

# Windows
 chrome.exe --user-data-dir="C://chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

# macOS
 open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

# Linux
 google-chrome --user-data-dir="~/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

3. Zainstaluj rozszerzenie przeglądarki

Korzystanie z rozszerzenia przeglądarki może być szybkim i łatwym sposobem na rozwiązanie problemów z CORS w środowisku programistycznym. Największą zaletą korzystania z rozszerzenia przeglądarki jest to, że nie trzeba zmieniać kodu ani konfiguracji. Z

z drugiej strony, musisz zainstalować rozszerzenie w każdej przeglądarce internetowej, której używasz do testowania swojej aplikacji internetowej.

jak naprawić CORS używając rozszerzenia

Rozszerzenia przeglądarki zmieniają przychodzące żądanie preflight, dodając niezbędne nagłówki, aby oszukać przeglądarkę. Jest to przydatne rozwiązanie do pracy lokalnej z produkcyjnym API, które akceptuje żądania tylko z domeny produkcyjnej.

Przykładowe rozszerzenie w [Google Web Store] (https://chrome.google.com/webstore/search/cors?hl=en-US) lub w Mozilla Add-ons Library. W niektórych przypadkach domyślna konfiguracja może nie wystarczyć; upewnij się, że zainstalowane rozszerzenie jest poprawnie skonfigurowane. Należy Należy również pamiętać, że pozostawienie rozszerzenia włączonego na czas nieokreślony może powodować problemy na niektórych stronach internetowych. Zaleca się używać ich tylko do celów deweloperskich.

Wszystkie powyższe polecenia uruchamiają Google Chrome w odizolowanej piaskownicy. Nie będą one miały wpływu na główny profil Chrome.

Wyłącz zabezpieczenia w Google Chrome, aby wyeliminować błąd CORS](/images/blog/cors/pl/disabled.jpg)

4. Konfiguracja serwera proxy

Jeśli szukasz rozwiązania, które nie wymaga zmiany ustawień przeglądarki, powinieneś zapoznać się z serwerem proxy.

Ideą korzystania z serwera proxy jest wysyłanie żądania do serwera, a następnie serwer wysyła żądanie do rzeczywistej usługi, której chcesz użyć. Serwer proxy można zbudować samodzielnie w wybranym języku i frameworku. Będziesz musiał skonfigurować CORS i zaimplementować funkcję przekazywania otrzymanych żądań do innej usługi.

Użyj serwera proxy, aby naprawić błąd CORS](/images/blog/cors/pl/proxy.jpg)

Serwer proxy jest dobrym rozwiązaniem, jeśli nie masz dostępu do usługi, z której zamierzasz korzystać. Istnieją gotowe do użycia i open-source, ale należy zawsze upewnić się, że nie próbują one przechwytywać żądań za pomocą nagłówków autoryzacji i przekazywać je do usług stron trzecich. Takie naruszenia bezpieczeństwa mogą być niebezpieczne w skutkach dla ciebie i potencjalnych użytkowników usługi.

Lista usług CORS o otwartym kodzie źródłowym, które można znaleźć w Internecie:

Przed skorzystaniem z którejkolwiek z tych usług należy zapoznać się z kodem najnowszej wersji.

Jak testować?

Używanie przeglądarki do testowania konfiguracji CORS może być trudnym zadaniem. Możesz użyć narzędzia takiego jak CORS Tester, test-cors.org. Jeśli wolisz rozwiązanie z wierszem poleceń, to możesz użyć curl.

curl -v -X OPTIONS http://codino.pl

Chcesz więcej o CORS?

Polecam przeczytać szczegółowy artykuł MDN, jeśli chcesz dowiedz się więcej o szczegółach CORS.