🔑 CORS - Cross Origin Resource Sharing

Das Handwerk der Ursprungsdomänen

CORS steht für Cross-Origin Resource Sharing und ist ein Sicherheitsmechanismus, der in Webbrowsern implementiert ist, um den Zugriff auf Ressourcen (wie APIs oder Daten) von verschiedenen Ursprungsdomänen zu steuern. Es handelt sich um eine Standardmethode, die es einer Webanwendung ermöglicht, sicher mit Ressourcen auf einem anderen Server (oder einer anderen Domain) zu interagieren, während gleichzeitig das Risiko von Sicherheitslücken wie Cross-Site Request Forgery (CSRF) und Cross-Site Scripting (XSS) minimiert wird.

Grundlegende Funktionsweise von CORS

1. Same-Origin Policy: Standardmäßig gilt in Webbrowsern die sogenannte Same-Origin Policy. Diese Richtlinie besagt, dass Skripte, die auf einer bestimmten Domain ausgeführt werden, keinen Zugriff auf Daten oder Ressourcen einer anderen Domain haben. Dies ist eine Sicherheitsmaßnahme, um zu verhindern, dass bösartige Webseiten auf sensible Informationen von anderen Seiten zugreifen.

2. CORS-Header: Wenn eine Webanwendung (z. B. eine JavaScript-Anwendung, die im Browser läuft) auf eine Ressource von einer anderen Domain zugreifen möchte, sendet der Browser eine CORS-Anfrage. Der Server, der die angeforderte Ressource bereitstellt, muss dann spezielle HTTP-Header zurückgeben, um dem Browser zu signalisieren, dass der Zugriff auf diese Ressource erlaubt ist.

CORS-Header

Hier sind einige wichtige CORS-Header, die der Server in seiner Antwort zurückgeben kann:

• Access-Control-Allow-Origin: Dieser Header gibt an, welche Ursprünge (Domains) auf die Ressource zugreifen dürfen. Zum Beispiel:
  • Access-Control-Allow-Origin: * – Erlaubt den Zugriff für alle Domains.
  • Access-Control-Allow-Origin: https://example.com – Erlaubt nur den Zugriff von https://example.com.

• Access-Control-Allow-Methods: Gibt an, welche HTTP-Methoden (z. B. GET, POST, PUT, DELETE) für den Zugriff auf die Ressource erlaubt sind.

• Access-Control-Allow-Headers: Gibt an, welche Header in der Anfrage zulässig sind.

• Access-Control-Allow-Credentials: Gibt an, ob Anmeldeinformationen (wie Cookies) für die Anfrage verwendet werden dürfen.

• Access-Control-Expose-Headers: Gibt an, welche benutzerdefinierten Header im Antwort-Objekt exponiert werden dürfen, sodass der Client darauf zugreifen kann.

Beispiel für eine CORS-Anfrage

Angenommen, Sie haben eine JavaScript-Anwendung auf https://my-app.com, die auf eine API auf https://api.example.com zugreifen möchte. Die Anfrage könnte so aussehen:

fetch('https://api.example.com/data', {
    method: 'GET',
    credentials: 'include' // Sendet Cookies mit der Anfrage, falls erlaubt
})
.then(response => {
    if (!response.ok) {
        throw new Error('Netzwerkantwort war nicht ok.');
    }
    return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Es gab ein Problem mit der Fetch-Operation:', error));

Der Server https://api.example.com muss dann einen CORS-Header wie folgt zurückgeben:

Access-Control-Allow-Origin: https://my-app.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Credentials: true

Preflight-Anfragen

Wenn eine CORS-Anfrage bestimmte Bedingungen erfüllt (z. B. Verwendung von HTTP-Methoden wie PUT oder DELETE oder das Setzen bestimmter benutzerdefinierter Header), sendet der Browser zunächst eine Preflight-Anfrage (OPTIONS-Anfrage), um zu überprüfen, ob der Server die CORS-Anfrage erlaubt. Der Server muss dann die entsprechenden CORS-Header zurückgeben, um diese Preflight-Anfrage zu genehmigen.

Fazit

CORS ist ein wesentliches Sicherheitskonzept, das es Webanwendungen ermöglicht, auf Ressourcen von anderen Domains zuzugreifen, während gleichzeitig die Risiken von Sicherheitslücken minimiert werden. Durch die Verwendung von CORS-Headern können Server kontrollieren, welche Domains auf ihre Ressourcen zugreifen dürfen, und sicherstellen, dass sensible Daten geschützt bleiben.