Z tego ćwiczenia w Codelabs dowiesz się, jak działa ta sama domena podczas pobierania zasobów.
Konfiguracja: pobieranie strony z tego samego pochodzenia
Prezentacja jest hostowana w https://same-origin-policy-fetch.glitch.me.
Ta prosta strona internetowa używa fetch do wczytywania zasobu z https://same-origin-policy-fetch.glitch.me/fetch.html. Ponieważ index.html i fetch.html mają to samo pochodzenie, w podglądzie na żywo powinien wyświetlać się 200.
1. Pobierz stronę z innego źródła
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żądano zasobu pochodzących z innego źródła. Oznacza to, że osoba przeprowadzająca atak nie może odczytywać zasobów z innych domen nawet jeśli przejmują kontrolę nad przeglądarką użytkownika.
2. Pobieranie zasobu z innej domeny
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 inne źródło, ale powinien być widoczny kod stanu 200. Dlaczego? Nowoczesne aplikacje internetowe często żądają załadowania zasobów z innych domen zewnętrzne skrypty lub zapytania do punktu końcowego API. Aby uwzględnić te przypadki użycia, można skorzystać z mechanizmu CORS (współdzielenia zasobów z różnych domen), który informuje przeglądarka może wczytywać zasób z innej domeny. Więcej informacji na temat CORS znajdziesz w artykule Bezpieczne udostępnianie zasobów z innych domen.