W tym laboratorium kodu dowiesz się, jak zasada tej samej domeny działa podczas pobierania zasobów.
Konfiguracja: pobieranie strony z tej samej domeny
Wersja demonstracyjna jest hostowana pod adresem https://same-origin-policy-fetch.glitch.me.
Ta prosta strona internetowa używa elementu fetch do wczytywania zasobu z elementu https://same-origin-policy-fetch.glitch.me/fetch.html. Ponieważ index.html i fetch.html mają ten sam element źródłowy, w podglądzie na żywo powinien wyświetlać się element 200.
1. Pobieranie strony z innego punktu początkowego
Spróbuj zmienić adres URL pobierania na https://www.google.com.
Co widzisz w podglądzie na żywo?
Przeglądarka powinna zablokować żądanie pobierania, ponieważ zażądany zasób pochodzi z innego źródła. Oznacza to, że osoba atakująca nie może odczytać zasobów z innych źródeł, nawet jeśli przejęła kontrolę nad przeglądarką użytkownika.
2. Pobieranie zasobu z wielu źródeł
Spróbuj zmienić adres URL pobierania na https://api.thecatapi.com/v1/images/search.
Co widzisz w podglądzie na żywo?
Adres URL pobierania ma inny element źródłowy, ale powinieneś zobaczyć kod stanu 200. Dlaczego? Nowoczesne aplikacje internetowe często wysyłają żądania zasobów z innych źródeł, aby wczytać skrypty innych firm lub wysyłać zapytania do punktu końcowego interfejsu API. Aby umożliwić te przypadki użycia, istnieje mechanizm o nazwie współdzielenie zasobów pomiędzy serwerami z różnych domen (CORS), który informuje przeglądarkę, że wczytywanie zasobu z innej domeny jest dozwolone. Więcej informacji o mechanizmie CORS znajdziesz w artykule Bezpieczne udostępnianie zasobów z innych domen.