Zasady dotyczące tego samego źródła i żądania pobierania

Mariko Kosaka

Z tego ćwiczenia w Codelabs dowiesz się, jak działa ta sama domena podczas pobierania zasobów.

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.