Verstehen, wie CORS in Webbrowsern funktioniert

Cross-Origin Resource Sharing (CORS) ist eine wichtige Sicherheitsfunktion in Webbrowsern, die regelt, wie Webanwendungen Ressourcen (wie Daten, Bilder oder Skripte) von einer anderen Domäne anfordern können als diejenige, die die ursprüngliche Webseite bereitgestellt hat. Es soll in erster Linie Benutzer vor bösartigen Websites schützen, die versuchen, auf vertrauliche Informationen auf anderen Websites zuzugreifen. In diesem Blog wird erklärt, wie CORS funktioniert und warum es für die Webentwicklung von entscheidender Bedeutung ist.
Was ist CORS?
Einfach ausgedrückt ist CORS ein Browsermechanismus, der steuert, welche Ressourcen eine Webseite von verschiedenen Domänen anfordern kann. Standardmäßig implementieren Browser die Same-Origin Policy (SOP), die Webseiten daran hindert, Anfragen an eine andere Domäne als die zu stellen, von der die Seite geladen wurde. Diese Richtlinie ist eine grundlegende Sicherheitsfunktion, die potenziell schädliche Interaktionen zwischen Websites verhindert.

Es gibt jedoch viele Fälle, in denen legitime Cross-Origin-Anfragen erforderlich sind – zum Beispiel, wenn eine Webanwendung Daten von einer API abrufen muss, die auf einem anderen Server gehostet wird. CORS ermöglicht solche Anfragen auf sichere Weise, indem es Servern ermöglicht, anzugeben, welche Domänen auf ihre Ressourcen zugreifen dürfen.

Wie funktioniert CORS?
CORS fügt HTTP-Header zu den Antworten eines Servers hinzu und gibt an, ob eine Cross-Origin-Anfrage zulässig ist oder nicht. Hier finden Sie eine schrittweise Aufschlüsselung der Funktionsweise von CORS:

Der Kunde stellt eine Anfrage
Wenn eine Webseite versucht, eine Anfrage (z. B. über XMLHttpRequest, Fetch oder Skripteinbindung) an einen anderen Ursprung (definiert durch Domäne, Protokoll und Port) zu stellen, prüft der Browser, ob die Anfrage gegen die Same-Origin-Richtlinie verstößt.

CORS-Preflight-Anfrage (für komplexe Anfragen)
Einige Anfragen, insbesondere solche mit Methoden wie PUT, DELETE oder mit benutzerdefinierten Headern, gelten als „komplex“. Vor dem Senden der eigentlichen Anfrage sendet der Browser eine OPTIONS-Anfrage, eine sogenannte Preflight-Anfrage. Diese Preflight-Anfrage fragt den Server, ob er die eigentliche Anfrage zulässt und überprüft die zulässigen HTTP-Methoden, Header und Ursprünge.

Server antwortet mit CORS-Headern
Der Server, der die Preflight- oder tatsächliche Anfrage empfängt, sendet eine Antwort mit spezifischen Headern zurück, die angeben, ob die Anfrage zulässig ist. Zu den wichtigsten Headern gehören:

Access-Control-Allow-Origin: Dieser Header gibt an, welche Domänen auf die Ressource zugreifen dürfen. Wenn dieser Header den Ursprung der Anfrage enthält, lässt der Browser die Antwort zu. Der Server könnte beispielsweise mit Folgendem antworten:

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods: Dieser Header gibt an, welche HTTP-Methoden (GET, POST, PUT usw.) der Server für Cross-Origin-Anfragen zulässt.

Access-Control-Allow-Methods: GET, POST

Access-Control-Allow-Headers: Dies gibt an, welche benutzerdefinierten Header in die eigentliche Anfrage einbezogen werden können.

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials: Wenn der Server Anmeldeinformationen (Cookies, HTTP-Authentifizierung) zulässt, wird dieser Header eingefügt und auf true gesetzt.

Der Browser entscheidet
Nach Erhalt der Antwort des Servers wertet der Browser die Header aus. Wenn der Server die Berechtigung über die entsprechenden CORS-Header erteilt, lässt der Browser die Cross-Origin-Anfrage zu und verarbeitet die Antwort. Wenn nicht, blockiert der Browser die Anfrage und die Webseite kann nicht auf die Ressource zugreifen.

Beispiel einer einfachen CORS-Anfrage
Stellen Sie sich ein Szenario vor, in dem eine auf https://example.com gehostete Webseite versucht, eine GET-Anfrage an eine unter https://api.example.com/data gehostete API zu stellen.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

In diesem Fall sendet der Browser die Anfrage an https://api.example.com. Wenn der API-Server so konfiguriert ist, dass er Anfragen von https://example.com zulässt, antwortet er mit dem Header:

Access-Control-Allow-Origin: https://example.com

Wenn der Header fehlt oder falsch ist, blockiert der Browser die Antwort aufgrund der CORS-Richtlinie.

CORS-Preflight-Beispiel
Bei komplexeren Anfragen initiiert der Browser eine Preflight-Anfrage, um zu prüfen, ob die Cross-Origin-Anfrage zulässig ist. Hier ist ein Beispiel für eine PUT-Anfrage, die einen Preflight auslöst:

fetch('https://api.example.com/update', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

Der Browser sendet eine OPTIONS-Anfrage wie diese:

OPTIONS /update HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Der Server sollte mit Headern antworten, die angeben, ob diese Anfrage zulässig ist:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type

Wenn diese Header vorhanden und gültig sind, fährt der Browser mit der eigentlichen PUT-Anfrage fort.

Bedeutung von CORS
CORS ist eine Sicherheitsfunktion, die Webservern einen fein abgestimmten Mechanismus zur Steuerung des Zugriffs auf ihre Ressourcen bietet. Ohne CORS könnten bösartige Websites ohne Zustimmung des Benutzers leicht vertrauliche Daten von anderen Domänen abrufen, was zu Sicherheitslücken wie Cross-Site Request Forgery (CSRF) führen würde.

Fazit
Das Verständnis von CORS ist für Webentwickler, die mit APIs und Ressourcen von Drittanbietern arbeiten, von entscheidender Bedeutung. Durch die Konfiguration geeigneter CORS-Richtlinien auf Servern können Entwickler sicherstellen, dass ihre Anwendungen sicher bleiben und gleichzeitig legitime ursprungsübergreifende Interaktionen ermöglichen.

Wenn Sie eine Web-App entwickeln und auf CORS-Fehler stoßen, ist es wichtig, die Konfiguration des Servers zu überprüfen und sicherzustellen, dass die erforderlichen Header in der Antwort gesendet werden.

Das obige ist der detaillierte Inhalt vonVerstehen, wie CORS in Webbrowsern funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!