Czym jest CORS i jak działa?

W dzisiejszym świecie, w którym przeglądarki internetowe i aplikacje webowe odgrywają kluczową rolę, nierzadko spotykamy się z pojęciem CORS. Czy kiedykolwiek zastanawiałeś się, co to dokładnie oznacza i jak wpływa na komunikację między różnymi domenami? W tym artykule zgłębimy zagadnienie CORS (Cross-Origin Resource Sharing), zrozumiemy jego znaczenie i poznamy, dlaczego jest tak istotne w świecie współczesnego internetu.

Co to jest CORS?

CORS (Cross-Origin Resource Sharing) to mechanizm stosowany w przeglądarkach internetowych, który umożliwia bezpieczną wymianę danych między różnymi domenami. Pozwala na zapytania AJAX (Asynchronous JavaScript and XML) oraz udostępnianie zasobów, takich jak czcionki, obrazy czy skrypty, przezroprzez domeny. Dzięki CORS możliwe jest łatwiejsze tworzenie bogatych i interaktywnych aplikacji internetowych, które korzystają z zasobów znajdujących się w różnych miejscach.

Dlaczego CORS jest istotny?

Gdyby nie mechanizm CORS, przeglądarki internetowe blokowałyby standardowo żądania AJAX i dostęp do zasobów pochodzących z innych domen. Jest to związane z politykami samej przeglądarki, które są zaimplementowane w celu zapewnienia bezpieczeństwa użytkowników podczas surfowania po sieci. Polityka ta to tzw. Same-Origin Policy (SOP), która zakłada, że skrypty JavaScript na stronie internetowej mają dostęp jedynie do zasobów pochodzących z tego samego źródła (protokół, domena, port).

CORS pozwala na łagodzenie tej polityki i umożliwia świadome udostępnianie zasobów między różnymi domenami. Dzięki temu strony internetowe mogą współpracować ze sobą bez konieczności przechodzenia przez serwer pośredniczący (proxy). Mechanizm ten znacząco zwiększa elastyczność i możliwości przeglądania internetu.

Jak działa CORS?

Mechanizm CORS bazuje na wprowadzeniu specjalnych nagłówków HTTP, które informują przeglądarkę o zamiarach strony internetowej w zakresie udostępniania zasobów między różnymi domenami. Nagłówek Access-Control-Allow-Origin jest kluczowy w procesie udostępniania zasobów. Przyjmuje on wartość, która określa, które domeny mają dostęp do konkretnych zasobów.

W momencie, gdy przeglądarka otrzymuje żądanie z innej domeny, w pierwszej kolejności wysyłane jest żądanie OPTIONS (preflight request), które ma na celu sprawdzenie, czy dana domena jest uprawniona do uzyskania dostępu do zasobu. W odpowiedzi na to żądanie serwer zwraca nagłówki Access-Control-Allow-Origin, które wskazują, które domeny mają dostęp. Dopiero gdy zostaną spełnione odpowiednie warunki, przeglądarka wykonuje właściwe żądania HTTP GET, POST, PUT itp.

Przykłady użycia CORS

Aby lepiej zrozumieć CORS, popatrzmy na kilka przykładów, które pokażą, jak to działa w praktyce.

Przykład 1: Pobieranie obrazów z innej domeny

Załóżmy, że masz stronę internetową, na której chcesz umieścić obrazek pochodzący z innej domeny. Bez CORS, przeglądarka zablokuje takie zapytanie, ponieważ nie jesteśmy w stanie ładować danych z innych domen. Jednak, dzięki CORS, możemy konfigurować dostęp do zasobów.

Oto przykład kodu HTML, który pobiera obrazek ze zdalnej domeny:

<img src="http://inna-domena.com/obrazek.png">

Widzisz ten kod? To zwykła linia kodu HTML. Nie dostrzegasz żadnej różnicy, ale przeglądarki wspierające CORS będą świadome, że zasób ten jest ładowany z innej domeny. Jeśli serwer, z którego pobieramy obrazek, zezwala na dostęp do zasobów (poprzez wysłanie właściwego nagłówka Access-Control-Allow-Origin), ten obrazek zostanie wyświetlony na stronie internetowej.

Przykład 2: Wysyłanie danych JSON na inną domenę

Kolejnym popularnym przykładem użycia CORS jest wysyłanie danych JSON do innej domeny. Załóżmy, że mamy formularz na stronie internetowej, który gromadzi dane użytkownika i chcemy przesłać te dane na inny serwer.

Oto przykład kodu JavaScript, który wysyła dane na inną domenę:

const dane = { imie: "Jan", nazwisko: "Kowalski" };

fetch("http://inna-domena.com/zapisz-dane", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(dane)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Znowu, jest to zwykły kod JavaScript, który korzysta z funkcji fetch do wysłania zapytania POST do zdalnej domeny. Przed wysłaniem właściwego zapytania, przeglądarka automatycznie wyśle zapytanie OPTIONS w celu sprawdzenia uprawnień domeny. Jeśli serwer zezwala na dostęp do zasobów, przeglądarka wyśle rzeczywiste zapytanie POST.

Przykład 3: Skrypt JavaScript a API

Wyobraźmy sobie, że mamy stronę internetową „www.example.com”, na której chcemy wykorzystać skrypt JavaScript, który pobiera dane z API znajdującego się na domenie „api.example.com”. Bez mechanizmu CORS przeglądarka internetowa zablokowałaby to żądanie, ze względu na różne domeny.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Dzięki zaimplementowaniu CORS na serwerze „api.example.com” i odpowiednio skonfigurowaniu nagłówków, które zezwalają na żądania z domeny „www.example.com”, możliwe jest udostępnianie danych między tymi domenami.

Podsumowanie

W dzisiejszym artykule zgłębiliśmy pojęcie CORS (Cross-Origin Resource Sharing). Dowiedzieliśmy się, jak ten mechanizm umożliwia współdzielenie zasobów między różnymi domenami, choć standardowe polityki przeglądarek blokują takie działania. Dzięki CORS możliwe jest łagodzenie Same-Origin Policy i tworzenie bardziej zaawansowanych aplikacji internetowych.

Pamiętaj jednak, że CORS należy konfigurować ostrożnie i z uwagą. Niewłaściwie skonfigurowane nagłówki CORS mogą prowadzić do poważnych luk bezpieczeństwa. Bądź odpowiedzialnym deweloperem i zawsze sprawdzaj, czy Twoje aplikacje korzystające z CORS są bezpieczne i nie narażają użytkowników na ryzyko.

Dziękuję, że podążasz ze mną w podróż poznania CORS! Miejmy nadzieję, że ten artykuł dostarczył Ci potrzebną wiedzę na temat tego ważnego aspektu współczesnego internetu. Jeśli masz jakieś pytania lub chciałbyś się podzielić swoimi doświadczeniami z CORS, śmiało podziel się nimi poniżej!