HTTPQUERY
Deutsch

Access-Control-Allow-Origin

Verwendung

Hinweis

CORS (Cross-Origin Resource Sharing) ist ein Browser-Mechanismus, der Webseiten daran hindert, Antworten zu lesen, die von einer anderen Origin ausgeliefert werden, sofern der Server den Zugriff nicht ausdrücklich erlaubt. Browser setzen den Origin-Header bei Cross-Origin-Anfragen automatisch. JavaScript kann den Origin-Header nicht verändern.

Jede CORS-Antwort enthält Access-Control-Allow-Origin, um dem Browser mitzuteilen, ob Frontend-Code einer bestimmten Origin die Antwort lesen darf. Ohne einen passenden Wert verhindert der Browser, dass die Antwort JavaScript erreicht.

Server, die den Zugriff erlauben möchten, haben drei Möglichkeiten: eine Wildcard, eine explizite Origin oder null. Die meisten produktiven APIs wählen die Origin dynamisch aus, indem sie den eingehenden Origin-Request-Header mit einer Positivliste abgleichen. Stimmt die Origin überein, gibt der Server den Wert zurück. Da sich die Antwort je nach Anfrage ändert, ist ein Vary: Origin-Header erforderlich, damit Caches für jede Origin eine eigene Kopie speichern.

Was CORS auslöst

Jeder fetch()- oder XMLHttpRequest-Aufruf an eine andere Origin löst die CORS-Durchsetzung aus. Auch das Laden von Schriften über @font-face, WebGL-Texturen und canvas.drawImage() mit Cross-Origin-Bildern lösen CORS-Prüfungen aus. Anfragen mit benutzerdefinierten Headern, mit nicht einfachen Methoden wie PUT, DELETE oder PATCH oder mit einem Content-Type von application/json lösen vor der eigentlichen Anfrage eine Preflight-OPTIONS-Anfrage aus. Standardnavigation wie das Anklicken von Links oder das Laden von Seiten im Browser löst kein CORS aus.

* (Wildcard)

Erlaubt jeder Origin, die Antwort zu lesen. Die Wildcard ist nur für Anfragen ohne Credentials gültig.

Access-Control-Allow-Origin: *

Hinweis

Die Wildcard ist mit Anfragen mit Credentials nicht kompatibel. Wenn Access-Control-Allow-Credentials auf true steht, muss der Server eine explizite Origin zurückgeben.

Explizite Origin

Ein einzelner Origin-Wert, bestehend aus Schema, Hostname und optionalem Port. Das ist der Standardansatz für APIs, die auf bekannte Aufrufer beschränkt sind.

Access-Control-Allow-Origin: https://example.com

Pro Antwort ist nur eine Origin zulässig. Server, die mehrere Origins unterstützen, prüfen den Origin-Request-Header und antworten mit dem übereinstimmenden Wert, wobei sie Vary: Origin zur Antwort hinzufügen.

null

Steht für eine undurchsichtige oder datenschutzrelevante Origin. Manche Sandbox-Dokumente und lokale Datei-URLs senden null als ihre Origin.

Access-Control-Allow-Origin: null

Hinweis

Von einer Antwort mit null wird abgeraten. Auch bösartige Dokumente aus Sandbox-iframes tragen eine null-Origin, wodurch sich dieser Wert leicht fälschen lässt.

Beispiel

Ein Server spiegelt die anfragende Origin dynamisch zurück und fügt für korrektes Cache-Verhalten einen Vary-Header hinzu.

Access-Control-Allow-Origin: https://example.com
Vary: Origin

Ein öffentliches CDN, das statische Assets an beliebige Aufrufer ausliefert, verwendet die Wildcard.

Access-Control-Allow-Origin: *

Eine Cross-Origin-Antwort mit Credentials kombiniert die explizite Origin mit dem Credentials-Header.

Access-Control-Allow-Origin: https://dashboard.example.re
Access-Control-Allow-Credentials: true
Vary: Origin

Fehlersuche

Cross-Origin-Anfragen schlagen fehl, wenn der Browser die Origin der Antwort nicht der anfragenden Seite zuordnen kann.

Die Konsole zeigt “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”. Der Server hat den Header überhaupt nicht mitgeschickt. Prüfen Sie, ob die serverseitige CORS-Konfiguration für die konkrete Route und die konkrete HTTP-Methode greift. Stellen Sie in nginx sicher, dass die add_header-Direktive im richtigen location-Block steht. Stellen Sie in Apache sicher, dass Header set innerhalb des passenden oder steht. Testen Sie mit curl, um das Problem vom Browserverhalten zu isolieren: curl -v -H “Origin: https://example.com” https://api.example.re/data

Die Wildcard * funktioniert nicht bei Anfragen mit Credentials. Browser weisen Antworten zurück, die Access-Control-Allow-Origin: * mit Access-Control-Allow-Credentials: true kombinieren. Die Lösung besteht darin, den eingehenden Origin-Header zu lesen, den Wert gegen eine Positivliste zu validieren und die übereinstimmende Origin zurückzugeben. Fügen Sie der Antwort Vary: Origin hinzu, damit Caches für jede Origin eine eigene Kopie speichern.

Origin-Reflexion ohne Validierung. Das unveränderte Zurückspiegeln des Origin-Request-Headers ohne Abgleich mit einer Positivliste öffnet die API für jede beliebige Domain. Angreifer nutzen dies aus, um über eine von ihnen kontrollierte Seite Daten zu stehlen. Vergleichen Sie die eingehende Origin stets mit einer Liste vertrauenswürdiger Werte, bevor Sie sie zurückspiegeln.

Ein CDN cacht eine Antwort mit der falschen Origin. Wenn der Server einen dynamischen Origin-Wert zurückgibt, aber Vary: Origin weglässt, speichert ein CDN den ersten Origin-Wert und liefert jeder nachfolgenden Origin dieselbe gecachte Antwort aus. Fügen Sie Vary: Origin bei jeder Antwort hinzu, die eine dynamische Origin zurückspiegelt. In Cloudflare wird das bei Verwendung der verwalteten CORS-Transformation automatisch erledigt. Prüfen Sie bei anderen CDNs, ob die Origin Teil des Cache-Schlüssels ist.

Der Preflight gelingt, die eigentliche Anfrage schlägt jedoch fehl. Die OPTIONS-Antwort enthält die CORS-Header, die nachfolgende GET-, POST- oder PUT-Antwort hingegen nicht. Viele Server-Frameworks behandeln OPTIONS getrennt von den übrigen Methoden. Stellen Sie sicher, dass die CORS-Header allen Antworttypen hinzugefügt werden und nicht nur den Preflight-Antworten. Platzieren Sie in Express die CORS-Middleware vor den Route-Handlern, damit jede Antwort die Middleware durchläuft.

Die Fehlersuche mit curl zeigt korrekte Header, der Browser blockiert dennoch. Öffnen Sie die DevTools, wechseln Sie zum Tab Network und prüfen Sie die Antwort-Header, die der Browser tatsächlich erhalten hat. Proxys, Load-Balancer oder CDN-Edge-Regeln entfernen oder überschreiben CORS-Header mitunter zwischen dem Origin-Server und dem Browser. Vergleichen Sie die curl-Ausgabe mit der DevTools-Ausgabe, um die Schicht zu finden, die den Header entfernt.