Meistens sollte man seine Website auf der eigenen Domain aufbauen und keine externen Dateien dazuladen, denn das bringt Gefahren mit sich. Zum Beispiel hat man keinerlei Kontrolle über die diese Dateien. In manchen Situationen ist es aber notwendig oder erwünscht, doch etwas von außen einzubinden. Wie das geht, erfahren Sie in diesem Artikel.
Warum Dateien von anderen Domains einbinden?
Ein einfaches Beispiel ist folgendes: Man bindet Dateien von einer anderen Domain ein, über die man ebenfalls die Kontrolle hat. Dann weiß man im Allgemeinen auch, woher die externen Dateien genau kommen und ob damit alles in Ordnung ist.
Was ist ein Cross-Origin-Request (CORS)?
Ein Cross-Origin-Request (oder auch „Cross-Origin Resource Sharing“, CORS, genannt) tritt auf, wenn eine Webseite eine Anfrage an eine andere Domain, ein anderes Protokoll oder einen anderen Port stellt, als von dem ursprünglichen Dokument gehostet wird. Beispielsweise könnte eine Webseite, die unter der Domain example.com
läuft, eine Anfrage an eine Ressource auf api.anotherdomain.com
senden. Standardmäßig verhindern Browser aus Sicherheitsgründen solche Anfragen, es sei denn, der Server, von dem die Ressource angefordert wird, erlaubt diese explizit durch spezielle HTTP-Header.
Ein Sicherheitsrisiko entsteht dadurch, wenn Cross-Origin-Requests nicht korrekt kontrolliert werden. Angreifer könnten versuchen, bösartige Skripte in eine Webseite einzubinden, um vertrauliche Informationen von einem anderen Ursprung (Origin) abzurufen, wie z. B. Benutzerdaten oder API-Schlüssel. Dies wird oft als Cross-Site-Scripting (XSS) oder Cross-Site Request Forgery (CSRF) bezeichnet. Wenn eine Webseite nicht ordnungsgemäß konfiguriert ist, kann ein Angreifer Schwachstellen im CORS-Mechanismus ausnutzen, um unautorisierte Anfragen durchzuführen.
Eine externe Ressource für CORS zulassen
Um eine externe Ressource explizit über einen Cross-Origin-Request (CORS) zuzulassen, müssen Sie sicherstellen, dass der Server, von dem die Ressource stammt, die entsprechende Domain in seinen HTTP-Headern erlaubt. Dies kann durch das Setzen des Access-Control-Allow-Origin-Headers erfolgen. Dieser Header teilt dem Browser mit, welche Origins (Domains) berechtigt sind, auf die Ressourcen des Servers zuzugreifen.
Für eine korrekte Implementierung sind diese Schritte zu befolgen. Es spielt dabei keine Rolle, ob man WordPress oder sonst eine Technologie für die eigene Website verwendet.
CORS-Header in .htaccess konfigurieren
Bearbeiten der Serverkonfiguration
Wenn Sie auf einem Apache-Server arbeiten, können Sie die .htaccess
-Datei im Stammverzeichnis Ihrer WordPress-Installation bearbeiten. Fügen Sie dort den folgenden Code ein, um alle Origins (*
) zu erlauben oder eine spezifische Domain freizuschalten:
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>
Wenn Sie nur eine bestimmte Domain zulassen möchten, ersetzen Sie „*“ durch die entsprechende Domain:
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "https://example.com" </IfModule>
Ähnlich funktioniert dies auch bei Nginx, indem Sie die Server-Konfigurationsdatei ändern:
add_header 'Access-Control-Allow-Origin' 'https://example.com';
Erlauben weiterer Header und Methoden
Neben der Freigabe eines Ursprungs können Sie auch explizit angeben, welche HTTP-Methoden (wie GET
, POST
, etc.) und Header erlaubt sind (wieder für apache):
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "https://example.com" Header set Access-Control-Allow-Methods "GET, POST, OPTIONS" Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type" </IfModule>
Wichtiger CORS Sicherheitshinweis:
Es ist wichtig, CORS nur für die Domains zu erlauben, die Sie kontrollieren oder denen Sie vertrauen. Wenn Sie „*“ als Wert für Access-Control-Allow-Origin
verwenden, erlauben Sie alle Ursprünge, was ein erhebliches Sicherheitsrisiko darstellen kann. Dies kann zu unautorisierten Zugriffen und Datenlecks führen, insbesondere wenn sensible Informationen über die betroffenen Ressourcen übertragen werden.
Indem Sie die richtigen CORS-Header setzen, können Sie sicherstellen, dass externe Ressourcen korrekt geladen werden, ohne Sicherheitslücken zu schaffen. Dies kann besonders nützlich sein, wenn Sie externe JavaScript- oder CSS-Dateien von Drittanbietern nutzen, die für die Funktionalität Ihrer WordPress-Seite wichtig sind.