In diesem Codelab erfahren Sie, wie die Funktion „Same-Origin“ beim Abrufen von Ressourcen funktioniert.
Einrichten: Seite vom selben Ursprung abrufen
Die Demo wird unter https://same-origin-policy-fetch.glitch.me gehostet.
Auf dieser einfachen Webseite wird fetch verwendet, um eine Ressource von https://same-origin-policy-fetch.glitch.me/fetch.html zu laden. Da index.html und fetch.html denselben Ursprung haben, sollte 200 in der Livevorschau angezeigt werden.
1. Seite von einem anderen Ursprung abrufen
Ändern Sie die Abruf-URL in https://www.google.com.
Was sehen Sie in der Livevorschau?
Der Browser hätte die Abrufanfrage blockieren müssen, da Sie eine Ressource von einem anderen Ursprung angefordert haben. Das bedeutet, dass ein Angreifer keine plattformübergreifenden Ressourcen lesen kann, selbst wenn er die Kontrolle über den Browser eines Nutzers übernommen hat.
2. Ressourcen zwischen verschiedenen Ursprüngen abrufen
Ändern Sie die Abruf-URL in https://api.thecatapi.com/v1/images/search.
Was sehen Sie in der Livevorschau?
Die Abruf-URL hat einen anderen Ursprung, aber Sie sollten den Statuscode 200 sehen. Warum? Moderne Webanwendungen fordern häufig ressourcenübergreifende Ressourcen an, um Drittanbieter-Scripts zu laden oder einen API-Endpunkt abzufragen. Für diese Anwendungsfälle gibt es den Mechanismus CORS (Cross-Origin Resource Sharing), mit dem dem Browser mitgeteilt wird, dass das Laden einer ressourcenübergreifenden Ressource zulässig ist. Weitere Informationen zu CORS finden Sie unter Ressourcen zwischen Ursprungen sicher freigeben.