So verwenden Sie CORS mit Nginx

Was ist CORS

CORS, auch bekannt als Cross-Origin Resource Sharing, ist eine Technik, die in modernen Webbrowsern verwendet wird und den Zugriff auf Ressourcen steuert, die auf einem Webserver gehostet werden. CORS verwendet zusätzliche Header wie origin, access-control-origin und viele mehr, um zu bestimmen, ob die angeforderte Ressource zum Senden an den Browser berechtigt ist the. Der Hauptzweck von CORS besteht darin, zu verhindern, dass eine Webanwendung, die in einem Webbrowser ausgeführt wird, auf Ressourcen zugreift, die in einem anderen Ursprung gehostet werden, wenn keine Berechtigung vorliegt. Dies bedeutet, dass die Webanwendung keine Ressourcen wie Bilder, Skripte oder CSS herunterladen kann jeglicher Inhalt usw. wenn sie nicht im selben Ursprung gehostet werden (normalerweise sollten sich alle in derselben Domäne befinden) wie die Webanwendung, es sei denn, der Server ist so konfiguriert, dass dieses Verhalten zulässt. Durch diese Implementierung in einem Webbrowser können Benutzer ihre Daten vor Unbefugten schützen. Ein Hacker kann heimlich eine Webseite modifizieren, während er mitten in der Verbindung ist, um das Geschäft des Benutzers zu stören oder Zugang zu wertvollen Daten zu erhalten. Es gibt jedoch auch Vorteile von CORS, wie es Entwicklern ermöglicht, Ressourcen aus Kostengründen oder einfach aus Bequemlichkeit von einer anderen Quelle zu laden. In diesem Fall müssen sie ihren Webserver ändern, um solche Anfragen zuzulassen. Dieser Artikel zeigt, wie Sie dies mit Leichtigkeit auf einem Nginx-Webserver erledigen können.

Was löst eine CORS-Anfrage aus

Nicht alle Anfragen lösen eine CORS-Anfrage aus, da die Ressourcen normalerweise im selben Ursprung wie die Webanwendung gehostet werden. Wenn es anders ist, wird CORS ausgelöst. CORS hat zwei Arten von Anfragen, einfache Anfrage und CORS Preflighted-Anfrage.

Simple Request funktioniert wie eine normale Anfrage, der Webbrowser sendet eine Anfrage an den Server, um eine bestimmte Ressource herunterzuladen, wenn der Benutzer sie initiiert hat, dann überprüft der Webserver den Ursprung der Anfrage und vergleicht sie mit den Regeln im Webserver, wenn dies der Fall ist abgestimmt, die Ressource wird bereitgestellt. Dieser Anforderungstyp verwendet die Header OIRIGN und ACCESS-CONTROL-ALLOW-ORIGIN, um zu bestimmen, ob die Ressource bereitgestellt werden soll oder nicht. Einfache Anfrage wird nur ausgelöst, wenn Anfragemethoden wie GET, HEAD, POST verwendet werden und Header wie Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width verwendet werden. Selbst dann lösen nicht alle Inhaltstypen eine einfache Anfrage aus. Hier lösen nur Formularcodierungstypen eine einfache Anfrage aus.

Die Art der Preflighted-Anfrage ist etwas anders, da es in der ersten Runde keinen direkten Zugriff auf die Ressourcen gibt. Wenn die oben genannten Bedingungen irgendwie geändert werden, entweder durch Verwendung eines anderen Anforderungsheaders oder eines anderen Inhaltstyps, wird eine Preflighted-Anfrage ausgelöst. Bei Preflighted-Anfragen stellt der Webbrowser zuerst sicher, dass er auf die Ressource zugreifen kann, indem er mit dem Webbrowser kommuniziert. Es verwendet die HTTP OPTION-Anfragemethode, um die erste Anfrage zu initiieren, dann verwendet es GET-, POST-ähnliche Anfragetypen, um die Ressourcen herunterzuladen.

So konfigurieren Sie Nginx zur Unterstützung von CORS-Anfragen

In diesem Abschnitt wird gezeigt, wie Sie einen nginx-Webserver konfigurieren, um die gemeinsame Nutzung von ursprungsübergreifenden Ressourcen zu ermöglichen. Dies ist nur möglich, wenn der Entwickler Zugriff auf den Webserver hat, da die Konfigurationsdatei von Nginx geändert werden muss.

Verwenden Sie das folgende einfache Code-Snippet, um CORS-Anfragen zuzulassen. Dies muss in die Standarddatei des nginx-Dienstes in Ubuntu oder einer anderen Plattform kopiert werden.

Lage \
if ($request_method = 'OPTIONS')
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Zugriffskontrolle-Zulassen-Methoden"POST, OPTIONEN';
add_header 'Zugriffskontrolle-Max.-Alter' 1728000;
add_header 'Inhaltstyp"text/plain;charset=utf-8';
zurück 204;

if ($request_method = 'POST')
add_header 'Access-Control-Allow-Origin"https://localhost;
add_header 'Zugriffskontrolle-Zulassen-Methoden' 'POST';

Das grundlegende Code-Snippet geht wie oben. Es enthält Anweisungen wie request_method, add_header, um den Anfragetyp zu identifizieren, und setzt den Header der Antwort, damit er vom Browser gelesen wird. Der Header Access-control-allow-origin definiert, auf welchen Ursprung die Ressource Zugriff hat, beispielsweise wenn eine in github gehostete Webanwendung auf ein in myOwnServer gehostetes Bild zugreifen möchte.com, dann sollte die URL von github als Wert der Access-control-allow-origin-Direktive in myOwnServer verwendet werden.com, dann, wenn die in github gehostete Webanwendung Anfragen an myOwnServer sendet.com, um die Bilddatei herunterzuladen, alle angeforderten haben die Erlaubnis erhalten. Der Access-Control-allow-Method-Header definiert, welche Anforderungstypen die Webanwendung, die die Anforderungen sendet, unterstützt, der Rest der Header ist dann für sein maximales Alter zum Cachen der Anforderungen und den unterstützten Inhaltstyp bestimmt.

Wie oben beschrieben, sendet der Browser nach Abschluss der OPTION-Anfrage eine weitere Anfrage zum Herunterladen der Ressourcen, wenn die erste Anfrage erfolgreich war, seine Header werden in der ersten request_method gesetzt, wenn Klammern.

Abgesehen von den oben genannten Anweisungen gibt es in Nginx einige andere wichtige Anweisungen, die in CORS-Anfragen verwendet werden können. Eine der wichtigsten Anweisungen ist access-control-allow-headers. Sie setzt den Antwort-Header mit erlaubten Header-Namen für die Überprüfung durch den Browser. Eine Webanwendung kann für verschiedene Zwecke eigene Header haben, und wenn solche Header in den nachfolgenden Anforderungen nach der anfänglichen OPTIONS-Anfrage vorhanden sind, sollten alle diese Header vom Webserver zugelassen werden, bevor die angeforderte Ressource freigegeben wird.

Es ist wichtig, dass sich dieses Code-Snippet an der richtigen Stelle in der Nginx-Standarddatei befindet, da Nginx je nach übereinstimmender URL verschiedene Standortblöcke ausführt. Wenn ein solcher Standortblock dieses Code-Snippet nicht enthält, wird er überhaupt nicht ausgeführt. und daher ist es wichtig, dies zur Sicherheit in allen Standortblöcken zu verwenden. Einige der wichtigen Standortblöcke sind Images, PHP (~ \.php$), CSS, etc… Blöcke.

Speichern Sie nach dem Speichern des oben genannten Code-Snippets die Nginx-Datei und laden Sie den Nginx-Dienst neu, damit die Änderungen wirksam werden.

Fazit

CORS ist als Cross-Origin-Resource-Sharing bekannt und ist eine Technik zur Kontrolle des Zugriffs auf Ressourcen. Diese Ressourcen können eine beliebige Datei sein, vom Bild bis zu einer Javascript-Datei. Der Hauptzweck von CORS besteht darin, die Sicherheit von Webanwendungen zu erhöhen, um Man-in-the-Middle-Angriffe zu verhindern. CORS kann jedoch auch Vorteile haben. In diesem Fall muss CORS aktiviert werden, da dies standardmäßig nicht zulässig ist. Der grundlegende CORS-Anfragetyp ist der einfache Anfragetyp, er verwendet nur die Anweisungen ORIGIN und ACCESS-CONTROL-ALLOW-ORIGIN, und mit dieser Hilfe kann Nginx dem Webbrowser die Berechtigung erteilen, je nach Herkunft auf die angeforderte Ressource zuzugreifen. CORS ist in jedem Fall sehr nützlich und sollte vorsichtig verwendet werden.