In diesem Codelab erfahren Sie, wie „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.
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 hätte die Abrufanfrage blockieren müssen, 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. Cross-Origin-Ressource abrufen
Ändern Sie die Abruf-URL in https://api.thecatapi.com/v1/images/search.
Was sehen Sie in der Livevorschau?
Die Abruf-URL ist ein anderer Ursprung, aber der Statuscode 200 sollte angezeigt werden. Warum? Moderne Webanwendungen fordern häufig ursprungsübergreifende Ressourcen an, um Skripts von Drittanbietern zu laden oder einen API-Endpunkt abzufragen. Um diesen Anwendungsfällen gerecht zu werden, gibt es einen Mechanismus namens CORS (Cross-Origin Resource Sharing), der den Browser darüber informiert, dass das Laden einer ursprungsübergreifenden Ressource zulässig ist. Weitere Informationen zu CORS finden Sie unter Cross-Origin-Ressourcen sicher freigeben.