Einführung in CORS (Cross-Origin Resource Sharing) Was ist CORS?

CORS (Cross-Origin Resource Sharing) ist eine von Webbrowsern implementierte Sicherheitsfunktion, die Webanwendungen erlaubt oder einschränkt, Anfragen an eine andere Domain als die zu stellen, die die Webseite bereitgestellt hat . Vereinfacht ausgedrückt bestimmt CORS, ob eine Webseite einer anderen Domain auf Ressourcen einer Domain zugreifen kann.

Standardmäßig erzwingen Webbrowser die Same-Origin-Richtlinie, die verhindert, dass Webseiten Anfragen an eine andere Domäne stellen als die, die die Seite bereitgestellt hat. Dies geschieht, um zu verhindern, dass böswillige Websites auf sensible Daten anderer Websites zugreifen. Manchmal müssen Webanwendungen jedoch Ressourcen von einem anderen Ursprung (Domäne, Protokoll oder Port) anfordern, und hier kommt CORS ins Spiel.

CORS in Aktion

Wenn eine Webanwendung in einer Domäne Daten von einer anderen Domäne anfordern muss, sendet sie eine HTTP-Anfrage mit spezifischen Headern, die den Ursprung der Anfrage angeben. Der Server, der die angeforderte Ressource hostet, muss dann entscheiden, ob er die Anfrage zulässt, indem er in der Antwort entsprechende CORS-Header sendet.

Wenn Sie beispielsweise eine Frontend-Anwendung erstellen, die auf http://example.com gehostet wird und diese Daten von http://api.example2.com abrufen muss, erlauben CORS-Header den Server unter api.example2. com, um anzugeben, ob Anfragen von example.com zugelassen werden.

Häufige Anwendungsfälle

CORS wird typischerweise in den folgenden Szenarien benötigt:

API-Zugriff von Drittanbietern: Viele moderne Webanwendungen sind für Dienste wie Authentifizierung, Zahlungsabwicklung oder Social-Media-Integration auf externe APIs angewiesen. CORS ist erforderlich, wenn diese APIs auf verschiedenen Domänen gehostet werden.

Frontend-Backend-Kommunikation: In Fällen, in denen Frontend und Backend einer Webanwendung auf verschiedenen Domänen oder Subdomänen gehostet werden, wird CORS verwendet, um die Kommunikation zwischen ihnen zu ermöglichen.

CDN (Content Delivery Networks): Websites verwenden häufig CDNs, um statische Assets wie Bilder, Stylesheets oder JavaScript-Dateien bereitzustellen. CORS ermöglicht es der Hauptseite, diese Ressourcen von einem CDN anzufordern, das auf einem anderen Ursprung gehostet wird.

Schlüsselparameter und Indikatoren in CORS

Access-Control-Allow-Origin: Dieser Header ist der wichtigste in CORS und gibt an, welche Ursprünge auf die Ressource zugreifen dürfen. Es kann eingestellt werden auf:

Ein bestimmter Ursprung (Access-Control-Allow-Origin: https://example.com)
Ein Platzhalter (Access-Control-Allow-Origin: *), der jedem Ursprung den Zugriff auf die Ressource ermöglicht. Dies ist jedoch nicht für Anfragen zulässig, die Anmeldeinformationen enthalten.
Access-Control-Allow-Methods: Gibt an, welche HTTP-Methoden (wie GET, POST, PUT, DELETE) beim Zugriff auf die Ressource zulässig sind. Zum Beispiel:
Zugriffskontroll-Zulassungsmethoden: GET, POST, PUT

Access-Control-Allow-Headers: Listet die HTTP-Header auf, die bei der eigentlichen Anfrage verwendet werden können. Wenn die Anfrage beispielsweise einen benutzerdefinierten Header wie X-Custom-Header enthält, sollte dieser hier angegeben werden:
Access-Control-Allow-Header: X-Custom-Header, Content-Type

Access-Control-Allow-Credentials: Gibt an, ob die Anfrage Anmeldeinformationen wie Cookies, HTTP-Authentifizierung oder clientseitige Zertifikate enthalten kann. Dies ist wichtig für APIs, die eine Authentifizierung erfordern. Zum Beispiel: Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers: Gibt an, welche Header der Browser dem anfordernden Client offenlegen soll. Standardmäßig stellen Browser nur einen begrenzten Satz von Headern wie Cache-Control und Content-Type bereit, aber Access-Control-Expose-Header können zusätzliche Header verfügbar machen.

Access-Control-Max-Age: Definiert, wie lange die Ergebnisse einer Preflight-Anfrage (siehe unten) vom Browser zwischengespeichert werden können. Es hilft, die Leistung zu verbessern, indem die Anzahl der Preflight-Anfragen reduziert wird. Zum Beispiel:
Zutrittskontroll-Maximalalter: 86400 (24 Stunden)

Preflight-Anfragen: Für bestimmte Arten von Anfragen, insbesondere solche, die Serverdaten ändern (wie PUT oder DELETE), senden Browser eine Preflight-Anfrage mithilfe der HTTP-OPTIONS-Methode. Dabei wird mit dem Server überprüft, ob die eigentliche Anfrage sicher gesendet werden kann. Die Antwort des Servers auf die Preflight-Anfrage bestimmt, ob der Browser mit der eigentlichen Anfrage fortfährt.

Wann benötigen Sie CORS?

CORS ist erforderlich, wenn:

Herkunftsübergreifende Anfragen werden gestellt: Wenn Ihr Frontend und Backend von unterschiedlichen Domänen oder Ports bedient werden oder wenn Sie von Ihrer Anwendung aus auf externe APIs zugreifen.

Zugriff auf Ressourcen, die auf einem CDN oder einem Drittanbieterdienst gehostet werden: Wenn Sie beispielsweise Schriftarten, Bilder oder andere Assets von einem CDN laden, muss der Server CORS-Header enthalten, damit Ihre Website darauf zugreifen kann.

Sicherheitsbedenken: Die Aktivierung von CORS ermöglicht zwar ursprungsübergreifende Anfragen, sollte jedoch sorgfältig konfiguriert werden, um zu verhindern, dass Ihre Anwendung böswilligen Angriffen ausgesetzt wird. Es sollten nur vertrauenswürdige Ursprünge zugelassen werden und sensible Vorgänge sollten durch zusätzliche Sicherheitsmaßnahmen wie Authentifizierungstokens geschützt werden.

Fazit

CORS ist ein entscheidender Mechanismus zur Gewährleistung der sicheren und kontrollierten gemeinsamen Nutzung von Ressourcen verschiedener Herkunft. Bei richtiger Konfiguration ermöglicht es modernen Webanwendungen die Interaktion mit Diensten und APIs von Drittanbietern und schützt gleichzeitig Benutzer vor Sicherheitsrisiken. Für jeden Webentwickler, der mit APIs, CDNs oder Multi-Domain-Anwendungen arbeitet, ist es wichtig zu verstehen, wie CORS-Header konfiguriert werden und wann und warum sie benötigt werden.

Das obige ist der detaillierte Inhalt vonEinführung in CORS (Cross-Origin Resource Sharing) Was ist CORS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!