W tym ćwiczeniu dowiesz się, jak działa ta sama domena podczas pobierania zasobów.
Konfiguracja: pobieranie strony z tej samej domeny
Wersja demonstracyjna jest hostowana na stronie https://same-origin-policy-fetch.glitch.me.
Ta prosta strona internetowa używa fetch do wczytywania zasobów z https://same-origin-policy-fetch.glitch.me/fetch.html. Ponieważ index.html i fetch.html mają to samo źródło, w podglądzie na żywo powinien wyświetlać się 200.
1. Pobierz stronę z innego źródła
Spróbuj zmienić URL pobierania na https://www.google.com.
Co widzisz w podglądzie na żywo?
Przeglądarka powinna zablokować żądanie pobrania, ponieważ żądany zasób pochodzi z innego źródła. Oznacza to, że atakujący nie może odczytać zasobów współdzielonych, nawet jeśli przejął kontrolę nad przeglądarką użytkownika.
2. Pobieranie zasobu współdzielenia
Spróbuj zmienić URL pobierania na https://api.thecatapi.com/v1/images/search.
Co widzisz w podglądzie na żywo?
Adres URL pobierania ma inne źródło, ale powinien wyświetlić się kod stanu 200. Dlaczego? Nowoczesne aplikacje internetowe często żądają zasobów współdzielenia, aby wczytać skrypty innych firm lub wysłać zapytanie do punktu końcowego API. Aby umożliwić takie przypadki użycia, istnieje mechanizm o nazwie CORS (Cross Origin Resource Sharing), który informuje przeglądarkę, że ładowanie zasobu współdzielenia jest dozwolone. Więcej informacji o CORS znajdziesz w artykule Bezpieczne współdzielenie zasobów między serwerami z różnych domen.