In diesem Codelab erfahren Sie, wie die Same-Origin-Policy beim Abrufen von Ressourcen funktioniert.
Einrichtung: Seite vom selben Ursprung abrufen
Die Demo wird unter https://same-origin-policy-fetch.glitch.me gehostet.
Diese einfache Webseite verwendet fetch, 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
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, da Sie eine Ressource von einem anderen Ursprung angefordert haben. Das bedeutet, dass ein Angreifer keine ursprungsübergreifenden Ressourcen lesen kann, selbst wenn er die Kontrolle über den Browser eines Nutzers übernommen hat.
2. Ursprungsübergreifende 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, aber Sie sollten den Statuscode 200 sehen. Was ist der Grund dafür? Moderne Webanwendungen fordern häufig ursprungsübergreifende Ressourcen an, um Skripts von Drittanbietern zu laden oder einen API-Endpunkt abzufragen. Für diese Anwendungsfälle gibt es einen Mechanismus namens CORS (Cross Origin Resource Sharing), mit dem dem Browser mitgeteilt wird, dass das Laden einer ursprungsübergreifenden Ressource zulässig ist. Weitere Informationen zu CORS finden Sie unter Cross-Origin-Ressourcen sicher freigeben.