Z tego ćwiczenia w programie dowiesz się, jak źródło treści działa przy pobieraniu zasobów.
Skonfiguruj: pobieraj stronę z tego samego źródła
Wersja demonstracyjna jest przechowywana na serwerze https://same-origin-policy-fetch.glitch.me.
Ta prosta strona internetowa wczytuje zasób z usługi https://same-origin-policy-fetch.glitch.me/fetch.html przy użyciu polecenia fetch. Ponieważ komponenty index.html i fetch.html mają to samo pochodzenie, w podglądzie na żywo powinien być widoczny 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 z innego źródła. Oznacza to, że haker nie może odczytać zasobów z innych domen, nawet jeśli przejął kontrolę nad przeglądarką użytkownika.
2. Pobieranie zasobu z innych domen
Spróbuj zmienić adres URL pobierania na https://api.thecatapi.com/v1/images/search.
Co widzisz w podglądzie na żywo?
Adres URL pobierania pochodzi z innego źródła, ale powinien być widoczny kod stanu 200. Dlaczego? Nowoczesne aplikacje internetowe często żądają zasobów z innych domen, aby wczytać skrypty innych firm lub wysyłać zapytania do punktu końcowego interfejsu API. Na potrzeby tych przypadków stosujemy mechanizm o nazwie CORS (cross Origin Resource Share), który informuje przeglądarkę o dozwolonym ładowaniu zasobów z innych domen. Więcej informacji o CORS znajdziesz w artykule Bezpieczne udostępnianie zasobów z innych domen.