W tym ćwiczeniu zobaczysz, jak działa ta sama domena podczas pobierania zasobów.
Konfiguracja: pobieranie strony z tej samej domeny
Wersja demonstracyjna jest dostępna 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 powinna wyświetlać się wartość 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ółdzielenia, 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 należące do osoby trzeciej 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 domenami.