In Entwicklung und Sicherheit | Letztes Updateated: 4. Mai 2023

Cloudways bietet verwaltetes Cloud-Hosting für Unternehmen jeder Größe zum Hosten einer Website oder komplexer Webanwendungen.

CORS erklärt: Bedeutung der domänenübergreifenden gemeinsamen Nutzung von Ressourcen in der Webentwicklung

By Kingsley Silas

Sie fragen sich, was CORS (Cross-Origin Resource Sharing) ist?

In Spionagefilmen haben Sicherheitskräfte eine codiert Art der Informationsübermittlung untereinander. Da sie meist Informationen übermitteln, die gegen sie verwendet werden können, wenn sie in die Hände ihrer Feinde geraten, müssen sie sicherstellen, dass es sich bei den Empfängern der Informationen um vertrauenswürdige Parteien handelt. Gleiches gilt für diejenigen, die die genannten Informationen übermitteln. Wenn das sender Vertrauen und Empfänger genießen, kann die Glaubwürdigkeit und Sicherheit der Informationen gewährleistet werden.

Eine Kopie dieses Szenarios findet in der Kommunikation zwischen b stattrowsEs handelt sich dabei um eine sogenannte Same-Origin-Richtlinie.

Was ist die Same-Origin-Richtlinie?

Ist Ihnen schon einmal aufgefallen, dass Webseiten nicht auf Ressourcen einer anderen Website zugreifen können? Das liegt an der Same-Origin-Richtlinie, einer Sicherheitsfunktion in Web Browsers, dass prevverhindert, dass Webseiten auf Ressourcen (wie Cookies, Skripts und andere Daten) von einer anderen Domain zugreifen als der, die die Seite bereitgestellt hat.

Ein Ursprung wird durch die Kombination aus Protokoll, Domäne und Portnummer einer URL definiert. Die meisten browsAnbieter wie Chrome, Firefox, Safari und Edge implementieren eine Same-Origin-Richtlinie, um die Sicherheit Ihrer Daten zu gewährleisten.

Nun, warum brauchen wir diese Politik? Um dies zu verstehen, werfen wir einen Blick auf die Funktionsweise des Internets. Sie besuchen eine Website, Ihr browsEr sendet eine Anfrage an die Server-Hosting diese Website, und der Server antwortet, indem er die Ressourcen zurücksendet, die zum Anzeigen der Seite erforderlich sind. Diese Ressourcen können HTML, CSS, JavaScript und Bilder umfassen.

Stellen Sie sich vor, dass eine Webseite auch Anfragen an andere Domains stellen könnte. Um mit unserer Spionagefilm-Prämisse fortzufahren: Ein Geheimagent einer anderen Agentur möchte mit einem Agenten einer anderen Organisation oder eines anderen Landes in Kontakt treten, Zugang anfordern und Informationen weitergeben. Wenn ihnen diese Möglichkeit gewährt wird, eröffnet sich die later organization to huge security vulnerabilities. They can steal sensitive information and potentially ihnen schaden.

The same-origin policy is in place to precisely tackle this problem. Although there are some misunderstandings about SOP, it doesn’t mean you can’t load resources from different origins or send information to another origin.

Allerdings legt die SOP Regeln fest, die den Zugriff und die Interaktion zwischen verschiedenen Ressourcen wie Skripten, CSS, Iframes, Bildern und Videos einschränken. Es ist wie ein Wächter, der Webseiten in ihrer eigenen Domäne und p hältrevverhindert, dass sie auf Ressourcen anderer Domänen zugreifen.

This keeps you safe from malicious attacks that could steal your data or trick you into performing unwanted actions.

Was ist CORS?

In einem realen Fall, in dem Sicherheitsmitarbeiter die Regel festlegen, dass die Kommunikation nur zwischen ihren Mitarbeitern als Sicherheitsmaßnahme erfolgen soll, ähnelt dies der Richtlinie mit demselben Ursprung. Es kann jedoch Fälle geben, in denen sie mit der Außenwelt interagieren müssen. Oder mit Mitarbeitern anderer Sicherheits-Outfits können sie dafür eine andere Sicherheitsmaßnahme implementieren überprüfen diese Agenten. Diese Überprüfung kann je nach den beteiligten Mitarbeitern auf unterschiedliche Weise erfolgen. Bei der Kommunikation im Internet CORS ist der Mechanismus, der es ermöglicht, dass browsBenutzer verwenden sie, um auf die von ihnen stammenden Ressourcen zuzugreifenally Dies ist nicht möglich, da die Ressource einen anderen Ursprung hat.

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der zusätzliche HTTP-Header verwendet, um b mitzuteilenrowsErmöglicht es, einer Webanwendung, die an einem Ursprung läuft, Zugriff auf ausgewählte Ressourcen von einem anderen Ursprung zu gewähren.

Ich habe mehr als einmal über Herkunft gesprochen, und Sie fragen sich wahrscheinlich, was das bedeutet. Ein Ursprung wird durch das Protokoll, die Domäne und den Port der URL definiert. Wenn Sie Ihre API an einem Ursprung wie https://api haben.geekflare.com:3001 und Ihr Frontend unter https://geekflare.com, die Ursprünge sollen unterschiedlich sein. In dieser Situation benötigen Sie CORS, um auf beiden Seiten auf Ressourcen zugreifen zu können.

Wenn Anfragen an einen Server gestellt werden, wird der browsBenutzer (Client) und Server senden Anfragen und Antworten, HTTP-Header sind enthalten. Zu diesen Headern gehören auch zusätzliche Header für prevent die browsEr verhindert, dass die Kommunikation blockiert wird.

Warum wird das browsEr blockiert die Kommunikation?

Es ist BrowsEr Sicherheitsfunktionen. Dies geschieht, wenn die Anfrage von einem anderen Ursprung als dem des Clients kommt. Die zusätzlichen Header, die als Ergebnis von CORS eingefügt werden, dienen dazu, dem Client mitzuteilen, dass er die empfangene Antwort verwenden kann.

Häufige Probleme mit CORS

Als Webentwickler benötigen Sie Zugriff auf Ressourcen aus verschiedenen Domänen – beispielsweise beim Erstellen einer Webanwendung, die verwendet APIs aus mehreren Quellen. Sie implementieren CORS, wodurch Webserver angeben können, welche anderen Domänen auf ihre Ressourcen zugreifen dürfen, sodass Sie weiterhin die gewünschten Web-Apps erstellen können. Dieses Verhalten wird auf der Serverseite implementiert, sodass es auf der Clientseite nicht neu konfiguriert werden kann.

Wenn Sie auf einen CORS-Fehler stoßen, bedeutet dies, dass der Server Ihre Anfrage zum Zugriff auf seine Ressourcen von einer anderen Domäne abgelehnt hat, weil er die erforderlichen Sicherheitsstandards nicht erfüllt.

Dies kann passieren, wenn der Server nicht die richtigen Einstellungen vorgenommen hat. Aber keine Sorge – es gibt eine einfache Möglichkeit, das Problem zu beheben. Stellen Sie einfach sicher, dass der Access-Control-Allow-Origin-Header richtig konfiguriert ist. Dadurch wird dem Server mitgeteilt, welche Domänen auf seine Ressourcen zugreifen dürfen. Wenn er also nicht richtig eingerichtet ist, können Probleme auftreten.

Hier sind einige andere Probleme, auf die Sie stoßen können:

Wenn Sie versuchen, a nicht einfache HTTP-Methode (wie DELETE oder PUT) in einer Cross-Origin-Ressourcenfreigabeanforderung ist es wichtig sicherzustellen, dass der Server dies zulässt. BrowsDa andere Anbieter standardmäßig nur einfache Methoden zulassen, müssen Sie den Header „Access-Control-Allow-Methods“ explizit festlegen, wenn Sie eine andere Methode verwenden möchten.
Wenn Sie solche Anfragen stellen, müssen Sie außerdem vorsichtig sein, wenn Sie Anmeldeinformationen (z. B. Cookies oder Autorisierungsheader) von b sendenrowser, dass der Server zulässt.
Darüber hinaus antwortet der Server nicht korrekt, wenn die „Preflight“-Anfrage für eine nicht einfache Anfrage (z. B. eine mit benutzerdefinierten Headern) erfolgt. revbedeutet, dass es nicht unterstützt wird.
Wenn eine Webseite versucht, auf Ressourcen zuzugreifen (gehostet auf einem Content Delivery Network) wie Bilder, Skripts oder Stylesheets von einer anderen Domäne, lässt der Server, der die Ressource hostet, möglicherweise keine Anfragen von der Domäne zu, auf der die Seite gehostet wird.

Glücklicherweise gibt es einige Möglichkeiten, dies zu tun resolve dieses Problem. Eine Lösung besteht darin, den Server so zu konfigurieren, dass er ursprungsübergreifende Anfragen durch Senden der entsprechenden Informationen zulässtate Überschriften.

Eine weitere Option besteht darin, einen Proxyserver zu verwenden, um die Anforderung im Namen Ihrer Webanwendung zu stellen, oder JSON-P zu verwenden, um die Antwort in eine Callback-Funktion zu verpacken.

Darüber hinaus gibt es Bibliotheken, die Cross-Origin-Anfragen auf der Client-Seite vereinfachen, indem sie die Header handhaben und eine Anfrage-API ohne Probleme bereitstellen.

Indem Sie diese verschiedenen Lösungen ausprobieren, können Sie diese Probleme umgehen und sicherstellen, dass Ihre Webanwendung auf die Ressourcen zugreifen kann, die sie benötigt, um ordnungsgemäß zu funktionieren.

Ein Wort der Vorsicht – Diese Techniken können ihre eigenen Sicherheitsrisiken haben, daher ist es wichtig, sie sorgfältig zu verwenden!

CORS-Header

Einer der sichere Header Dies kann entweder ein Antwort- oder ein Anforderungsheader sein.

Antwort-Header

Dies sind die Header, die der Server in seiner Antwort zurücksendet.

Access-Control-Allow-Origin: <origin>: Hiermit wird der Ursprung angegeben, der auf die Ressource auf dem Server zugreifen darf. Es kann angegeben werden, dass nur Anforderungen von einem bestimmten Ursprung zulässig sind - Access-Control-Allow-Origin: https://geekflare.com, oder dass der Ursprung keine Rolle spielt - Access-Control-Allow-Origin: *.
Access-Control-Expose-Headers: <headers>: Wie der Name schon sagt, werden hier die Header aufgelistet, die browsEr hat Zugriff auf.
Access-Control-Max-Age: <seconds>: Dieser Indikatorates ist die Dauer, für die die Antwort einer Preflight-Anfrage zwischengespeichert werden kann.
Access-Control-Allow-Credentials: <boolean>: Dieser Indikatorateist das browsEr kann die Antwort nutzen, wenn die erste Anfrage mit einem Berechtigungsnachweis gestellt wurde.
Access-Control-Allow-Methods: <methods>: Dieser Indikatorateist die Methode(n), die beim Versuch, auf eine Ressource zuzugreifen, zugelassen wurde(n).
Access-Control-Allow-Headers: <headers>: Dieser Indikatorates Die HTTP-Header können in einer Anfrage verwendet werden.

Hier ist ein Beispiel dafür, wie die Antwort aussehen wird

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Content-Length: 0
Date: Sat, 16 Nov 2019 11:41:08 GMT+1
Connection: keep-alive

Header anfordern

Hier sind die Header, die die Anforderung eines Clients enthalten sollte, um den CORS-Mechanismus nutzen zu können.

Origin: <origin>: Dieser Indikatorates der Ursprung der Kundenanfrage. Bei der Arbeit mit einem Frontend und Backend, wie stated zuvor wird dies der Host Ihrer Frontend-Anwendung sein.
Access-Control-Request-Method: <method>: Dies wird in einer Preflight-Anfrage zur Anzeige verwendetate die HTTP-Methode, die für die Anfrage verwendet wird.
Access-Control-Request-Headers: <header>: Dies wird in einer Preflight-Anfrage zur Anzeige verwendetate die HTTP-Header, die für die Anfrage verwendet werden.

Hier ist ein Beispiel dafür, wie eine Anfrage aussehen wird

curl -i -X OPTIONS localhost:3001/api \
-H 'Access-Control-Request-Method: GET' \
-H 'Access-Control-Request-Headers: Content-Type, Accept' \
-H 'Origin: http://localhost:3000'

Preflight-Anfragen

Was könnte es bedeuten, nachdem hier und da Preflight-Anfragen erwähnt wurden?

Preflight-Anforderungen treten auf, wenn der Client vor der Hauptanforderung eine Preflight-Anforderung senden muss. Das Preflight-Anfrage ist eher ein Sonde um festzustellen, ob der Server die Hauptanforderung unterstützt, die gestellt werden soll. Wenn eine positive Bestätigung erhalten wird, wird die Hauptanforderung gesendet.

Wenn eine Anfrage keine Preflight-Anfrage ist, wird sie als a bezeichnet einfache Anfrage.

Implementierung von CORS

Meistens möchten Sie Dinge im Backend Ihrer Anwendung einrichten. Die Implementierung hängt vom verwendeten Framework ab. In diesem Tutorial werden wir uns ansehen, wie es in NodeJS und Rails gemacht wird.

Schienen

Ich empfehle Ihnen, die Rack-Cors Juwel. Dann müssen Sie dies zu Ihrem hinzufügen config/application.rb Datei.

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*',
       headers: :any,
       expose: %i(access-token expiry token-type uid client),
       methods: %i(get post put patch delete options head),
       credentials: true
  end
end

KnotenJS

In Node.js sieht dies folgendermaßen aus.

app.all(‘*’, (req, res, next) => {
  res.header(‘Access-Control-Allow-Origin’, ‘*’);
  res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
  res.header(‘Access-Control-Allow-Headers’, ‘*’);
  res.header(‘Access-Control-Allow-Credentials’, true);
  next();
});

Im Code-Snippet richten wir den Ursprung, die Methoden, Header und Anmeldeinformationen ein, denen der Zugriff auf die auf unserem Server verfügbaren Ressourcen gestattet werden soll. Informationen zur Implementierung in Apache oder Nginx finden Sie hier Guide.

Fazit

CORS lockert die Richtlinie, sodass Ihr browser can access the resources you want it to. Understanding what it is, why it’s essential, and how to set it up will help in figuring out the issues you might face as you build your web applications.