In diesem Codelab sehen Sie, wie der Same Origin-Vorgang beim Abrufen von Ressourcen funktioniert.
Einrichten: Seite vom selben Ursprung abrufen
Die Demo findet um https://same-origin-policy-fetch.glitch.me statt.
Diese einfache Webseite verwendet fetch, um eine Ressource aus https://same-origin-policy-fetch.glitch.me/fetch.html zu laden. Da index.html und fetch.html denselben Ursprung haben, sollte in der Livevorschau „200“ angezeigt werden.
1. Seite von anderem Ursprung abrufen
Versuchen Sie, die Abruf-URL in https://www.google.com zu ändern.
Was sehen Sie in der Livevorschau?
Der Browser sollte die Abrufanfrage blockiert haben, weil Sie eine Ressource angefordert haben. von einem anderen Ursprung stammen. Das bedeutet, dass ein Angreifer keine ursprungsübergreifenden auch dann, wenn sie die Kontrolle über den Browser eines Nutzers übernommen haben.
2. Cross-Origin-Ressource abrufen
Versuchen Sie, die Abruf-URL in https://api.thecatapi.com/v1/images/search zu ändern.
Was sehen Sie in der Livevorschau?
Die Abruf-URL hat einen anderen Ursprung, Sie sollten jedoch den Statuscode 200 sehen. Warum? Moderne Webanwendungen fordern oft ursprungsübergreifende Ressourcen zum Laden an Drittanbieterskripts oder Abfragen an einen API-Endpunkt senden. Um diesen Anwendungsfällen gerecht zu werden, über den Mechanismus CORS (Cross-Origin Resource Sharing) Browser, dass das Laden einer ursprungsübergreifenden Ressource erlaubt ist. Weitere Informationen zu CORS finden Sie unter Ressourcen ursprungsübergreifend freigeben.