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.