Was ist CORS?

Ohne CORS (Cross-Origin Resource Sharing) würde der Browser den Zugriff auf die Ressourcen einer anderen Domain blockieren, um Sicherheitsbedenken zu vermeiden.

CORS wird über HTTP-Header gesteuert, die von einer Server-Antwort auf eine Anfrage des Client gesendet werden. Die Header enthalten Informationen darüber, ob eine Anfrage von einer anderen Domain akzeptiert wird oder nicht.

Ein wichtiger Nutzen von CORS ist, dass es den Seitenbetreibern ermöglicht, auf Ressourcen von anderen Domains zuzugreifen, während die Sicherheitsrichtlinien des Browsers berücksichtigt werden. Dies ermöglicht, dass Web-Anwendungen von verschiedenen Domains miteinander interagieren können.

Die CORS Header im Detail

Ein weiterer wichtiger Nutzen von CORS ist, dass es die Möglichkeit bietet, die Sicherheit von Web-Anwendungen zu erhöhen, indem es bestimmte HTTP-Header verwendet, die auch als “Security Headers” bezeichnet werden. Dazu gehören zum Beispiel:

• X-Frame-Options: Dieser Header gibt an, ob eine Web-Seite in einem Frame oder einer Iframe angezeigt werden darf oder nicht. Durch die Verwendung dieses Headers kann man verhindern, dass die Seite in einem Frame angezeigt wird, wodurch Angriffe wie “Clickjacking” verhindert werden können.
• Content-Security-Policy: Dieser Header ermöglicht es, Regeln festzulegen, die bestimmen, welche Ressourcen von einer Web-Seite geladen werden dürfen und welche nicht. Dies hilft, die Sicherheit von Web-Anwendungen zu erhöhen, indem es verhindert, dass bösartige Ressourcen geladen werden.
• Strict-Transport-Security: Dieser Header gibt an, dass eine Web-Seite nur über eine sichere HTTPS-Verbindung aufgerufen werden sollte. Dies hilft, die Sicherheit von Web-Anwendungen zu erhöhen, indem es sicherstellt, dass alle Verbindungen zu einer Web-Seite verschlüsselt sind.
  Insgesamt bietet CORS einen wichtigen Nutzen für die Entwickler von Web-Anwendungen

Die CORS Header für Apache2 und NGINX

Im folgendem Beispiel sehen Sie die Header für Apache2, welche in der Webserver-Konfiguration oder auch in der .htaccess Datei platziert werden.

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

Die Konfiguration für NGINX sieht nahezu identisch aus.

add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

Diese Header erlauben es, dass Anfragen von jeder Domain akzeptiert werden und dass alle oben genannten HTTP-Methoden verwendet werden können. Der Header “Content-Type” wird auch als erlaubter Header angegeben, damit der Client die Art der Anfrage mitteilen kann.

Sie können auch weitere CORS-Header wie “Access-Control-Max-Age” hinzufügen, um anzugeben, wie lange die Antwort des Servers gültig bleibt, oder “Access-Control-Expose-Headers”, um anzugeben, welche Header von der Antwort des Servers an den Client weitergegeben werden sollen.

Es ist wichtig zu beachten, dass diese Header nur auf Antworten von Server anwendbar sind, die auf CORS-Anfragen (mit der HTTP-Methode “OPTIONS”) von Clients gesendet werden. Sie werden nicht auf normale Anfragen (z.B. mit der HTTP-Methode “GET”) angewendet.

Nachfolgend einige weitere Beispiele:

#
# Apache2
#

# "X-Frame-Options" hinzufügen. Nur die eigene Domain ist erlaubt.
Header set X-Frame-Options "SAMEORIGIN"

# "Content-Security-Policy" hinzuzufügen
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://example.com; object-src 'none';"

# "Strict-Transport-Security" hinzuzufügen
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"


#
# NGINX
#

# "X-Frame-Options" hinzufügen. Nur die eigene Domain ist erlaubt.
add_header X-Frame-Options "SAMEORIGIN";

# "Content-Security-Policy" hinzuzufügen
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://example.com; object-src 'none';";

# "Strict-Transport-Security" hinzuzufügen
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";

Dieses letzte Beispiel, insbesondere die “Content-Security-Policy” müssen auf den Anwendungfall abgestimmt werden. Es kann vorkommen, dass das einbinden von JavaScripts und CSS nicht mehr korrekt funktionieren, wenn die Parameter nicht zum Anwendungsfall passen.

Externe Quellen:
CORS bei Wikipedia
Eine weitere gute Erklärung auf securai.de