CORS einfach erklärt

Wenn man mit dem Internet arbeitet, stößt man oft auf den Begriff „CORS“, der für Cross-Origin Resource Sharing steht. Aber was bedeutet das eigentlich und warum ist es so wichtig? Lassen Sie uns das in einfachen Worten erklären.

Im Kontext von HTTP wird eine „Herkunft“ oder „Origin“ durch verschiedene Aspekte einer URL definiert. Diese umfassen:

• Das Protokoll (z.B. http oder https)
• Den Hostnamen (z.B. tutorialwelt.de)
• Den Port (z.B. 80 oder 3000)

Solange alle drei Aspekte übereinstimmen, betrachtet der Browser zwei URLs als gleichwertig (Same-Origin). Wenn jedoch einer dieser Aspekte variiert, gelten die beiden URLs als Cross-Origin. Einige Beispiele können dies verdeutlichen:

• https://tutorialwelt.de und https://www.tutorialwelt.de (unterschiedliche Protokolle)
• http://www.tutorialwelt.de und http://dev.tutorialwelt.de (unterschiedliche Hostnamen)
• https://tutorialwelt.de und https://tutorialwelt.de:3000 (unterschiedliche Ports)

Es ist auch wichtig zu beachten, dass der Pfad (alles, was nach dem Hostnamen kommt) nicht Teil der Herkunft ist. Das bedeutet, dass https://tutorialwelt.de und https://tutorialwelt.de/articles als gleiche Herkunft betrachtet werden.

CORS kommt meistens im Kontext der Same-Origin-Policy ins Spiel, einer Sicherheitsfunktion, die von Webbrowsern implementiert wird. Sie verhindert, dass Webseiten Cross-Origin-Anfragen stellen, um bösartige Websites daran zu hindern, nicht autorisierte Anfragen an sensible Ressourcen auf anderen Domains zu stellen.

Da dies recht restriktiv sein kann, ermöglicht CORS dem Server die Festlegung, welche anderen Domains Anfragen an seine Ressourcen stellen dürfen. Dies geschieht durch die Verwendung von CORS-Headern, Origin in der Anfrage und Access-Control-Allow-Origin in der Antwort. Auf diese Weise können beispielsweise API-Server Anfragen von bestimmten Webseiten zulassen, während sie Anfragen von anderen Domains weiterhin blockieren.

Ein weiteres Anwendungsgebiet, wo CORS eine wichtige Rolle spielt, sind iFrames. Ein iFrame ist ein HTML-Element, das es ermöglicht, eine Webseite innerhalb einer anderen Webseite zu laden.

Stellen Sie sich vor, Sie haben eine Webseite und möchten in einem iFrame Inhalte von einer anderen Webseite anzeigen. Dies könnte jedoch aufgrund der Same-Origin-Policy ein Problem darstellen, da der in das iFrame eingebettete Inhalt als Cross-Origin angesehen wird.

Das bedeutet, wenn die eingebettete Webseite versucht, auf Ressourcen der Hauptseite zuzugreifen (oder umgekehrt), kann dies durch die Same-Origin-Policy blockiert werden, um die Sicherheit zu gewährleisten. Um dieses Problem zu umgehen, kann die Webseite, die in das iFrame eingebettet ist, CORS nutzen und die Hauptseite in ihrer Access-Control-Allow-Origin Antwort erlauben. Dies erlaubtder Hauptseite, auf die Ressourcen der eingebetteten Seite zuzugreifen, während gleichzeitig unerwünschte Cross-Origin Anfragen blockiert werden.

In der Praxis hängt die Möglichkeit, Inhalte zwischen verschiedenen Herkünften auszutauschen, stark von den Sicherheitseinstellungen der beteiligten Webseiten ab. Es ist wichtig zu verstehen, dass CORS und die Same-Origin-Policy dazu dienen, die Sicherheit beim Austausch von Inhalten über das Internet zu gewährleisten. Die korrekte Implementierung von CORS ist daher ein wesentlicher Faktor für die Sicherheit und Funktionalität einer jeden Webseite.