Technologie

Wie kann ich NGINX konfigurieren, um CORS-Header korrekt zu setzen?

Melden
  1. Grundlagen der CORS-Header
  2. Einfaches Beispiel zur CORS-Konfiguration in NGINX
  3. CORS mit Preflight-Unterstützung und spezifischen Einstellungen
  4. Behandlung von Cookies und Credentials
  5. Wichtige Hinweise zur NGINX-Konfiguration
  6. Zusammenfassung

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der Browsersicherheit durch kontrollierten Zugriff auf Ressourcen von einer anderen Domäne ermöglicht. Wenn Sie NGINX als Webserver oder Reverse Proxy verwenden und Ressourcen für andere Domänen freigeben möchten, müssen die passenden CORS-Header korrekt gesetzt werden. Diese Header teilen dem Browser mit, welche externen Ursprünge auf Ihre Inhalte zugreifen dürfen und welche Methoden oder Header erlaubt sind.

Grundlagen der CORS-Header

Die wichtigsten CORS-Header sind Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers und Access-Control-Allow-Credentials. Der Header Access-Control-Allow-Origin legt fest, welche Ursprünge (Domains) auf die Ressourcen zugreifen dürfen. Hier kann entweder ein spezifischer Ursprung angegeben werden oder ein Sternchen (*), welches alle Domains zulässt.

Weitere Header wie Access-Control-Allow-Methods und Access-Control-Allow-Headers sind besonders wichtig für sogenannte Preflight-Requests, die der Browser vor komplexen Anfragen sendet, um zu prüfen, ob diese erlaubt sind. Access-Control-Allow-Credentials erlaubt das Senden von Cookies und HTTP-Authentifizierungsinformationen, wenn aktiviert.

Einfaches Beispiel zur CORS-Konfiguration in NGINX

Eine grundlegende Möglichkeit ist, den Header Access-Control-Allow-Origin in der Server- oder Location-Direktive in der NGINX-Konfigurationsdatei hinzuzufügen. Zum Beispiel können Sie in der Konfiguration innerhalb eines server-Blocks oder location-Blocks folgenden Eintrag anfügen:

add_header Access-Control-Allow-Origin "*";

Dadurch wird allen Domains der Zugriff auf die Ressourcen gewährt. Dies ist ausreichend, wenn keine weiteren Einschränkungen notwendig sind.

CORS mit Preflight-Unterstützung und spezifischen Einstellungen

Oftmals sind jedoch komplexere Anfragen nötig, die durch sogenannte Preflight-OPTIONS-Anfragen überprüft werden. Diese müssen vom NGINX-Server behandelt werden, indem Sie die benötigten Methoden und Header erlauben und entsprechende Antwortheader senden. Um dies zu erreichen, können Sie eine eigene Location für OPTIONS-Anfragen definieren und die entsprechenden Header setzen.

Ein Beispiel hierfür sieht wie folgt aus:

location /api/ { if ($request_method = OPTIONS) { add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; add_header Access-Control-Allow-Headers "Authorization, Origin, Content-Type, Accept"; add_header Access-Control-Max-Age 1728000; add_header Content-Length 0; add_header Content-Type text/plain; return 204; } add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; add_header Access-Control-Allow-Headers "Authorization, Origin, Content-Type, Accept";}

Hier wird bei Anfragen mit der Methode OPTIONS eine schnelle Response mit Status 204 zurückgegeben, welche die erlaubten Methoden und Header kommuniziert. Gleichzeitig sind die Header bei allen anderen Methoden ebenfalls gesetzt, damit der Browser den Zugriff zulässt. Der Header Access-Control-Max-Age gibt an, wie lange die Preflight-Antwort vom Browser gecached werden darf, um unnötige Preflight-Anfragen zu vermeiden.

Behandlung von Cookies und Credentials

Falls Ihre Anwendung Cookies oder andere Anmeldeinformationen verwendet und Sie diese im Cross-Origin-Kontext erlauben möchten, müssen Sie den Header Access-Control-Allow-Credentials mit dem Wert true setzen. Gleichzeitig darf der Wert von Access-Control-Allow-Origin nicht auf * gesetzt sein, sondern muss exakt den erlaubten Ursprungswert enthalten.

Ein Beispiel hierfür sieht so aus:

set $cors_origin "";if ($http_origin ~* "^https?://(www\.)?(example\.com|example2\.de)$") { set $cors_origin $http_origin;}add_header Access-Control-Allow-Origin $cors_origin;add_header Access-Control-Allow-Credentials "true";

In diesem Beispiel überprüft NGINX, ob der Ursprungsheader Origin einer oder mehreren erlaubten Domains entspricht, und gibt diesen Wert zurück. Damit wird die Zugriffssteuerung dynamisch gesetzt und es ist sichergestellt, dass die Verwendung von Credentials funktioniert.

Wichtige Hinweise zur NGINX-Konfiguration

Beachten Sie, dass die Direktive add_header standardmäßig nur bei erfolgreichen Antworten gesetzt wird. Wenn Sie Header auch bei Fehlerseiten oder OPTIONS-Antworten senden möchten, müssen Sie eventuell die Option always verwenden, etwa so:

add_header Access-Control-Allow-Origin "*" always;

Ebenso sollten Sie Ihre Konfigurationsdateien sorgfältig testen, beispielsweise mit nginx -t, um Syntaxfehler zu vermeiden und Neustarts oder Reloads von NGINX nach Änderungen nicht zu vergessen.

Zusammenfassung

Die korrekte CORS-Konfiguration in NGINX erfordert das Setzen der nötigen Header wie Access-Control-Allow-Origin und, bei komplexeren Anwendungen, auch Access-Control-Allow-Methods, Access-Control-Allow-Headers sowie Access-Control-Allow-Credentials. Dabei sollte die Behandlung von Preflight-OPTIONS-Anfragen berücksichtigt werden, um eine reibungslose Kommunikation zwischen Browser und Server zu gewährleisten. Die Einrichtung kann sowohl einfach mit statischen Header-Werten erfolgen als auch dynamisch durch Prüfung der Origin-Header und gezieltes Setzen der Werte.

Mit dieser Konfiguration ist Ihr NGINX-Server in der Lage, CORS-Anfragen korrekt zu bedienen und sicher den Zugriff aus anderen Origins zu steuern.

0

Kommentare