CORS verstehen: Sichere ursprungsübergreifende Ressourcenfreigabe in JavaScript-js-Tutorial-php.cn

Understanding CORS: Secure Cross-Origin Resource Sharing in JavaScript

CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) ist eine Sicherheitsfunktion, die von Webbrowsern implementiert wird, um zu steuern, wie Ressourcen von einer anderen Domäne (Herkunft) als der, aus der die Ressource stammt, angefordert werden können. Es ist in der modernen Webentwicklung, insbesondere bei der Arbeit mit APIs, von entscheidender Bedeutung, da es den unbefugten Zugriff auf Ressourcen verhindert und einen sicheren Datenaustausch gewährleistet.

1. Was ist ein Ursprung?

Ein Ursprung wird durch die Kombination von

definiert

Protokoll: (z. B. http, https)
Domain: (z. B. example.com)
Port: (z. B. :80, :443)

Beispiel:

https://example.com und http://example.com haben unterschiedliche Ursprünge.
https://example.com:3000 und https://example.com:4000 sind ebenfalls unterschiedliche Ursprünge.

2. Same-Origin-Richtlinie (SOP)

Die Same-Origin-Richtlinie ist eine Sicherheitsmaßnahme, die einschränkt, wie Ressourcen auf einer Webseite mit Ressourcen eines anderen Ursprungs interagieren können.

Beispiel: Ein von https://example.com geladenes Skript kann ohne ausdrückliche Genehmigung keine Daten von https://api.otherdomain.com abrufen.

Während SOP die Sicherheit gewährleistet, schränkt es legitime Cross-Origin-Anfragen ein, und hier kommt CORS ins Spiel.

3. Was ist CORS?

CORS ist ein Mechanismus, der es Servern ermöglicht, festzulegen, wer auf ihre Ressourcen zugreifen kann, indem sie bestimmte HTTP-Header in ihre Antworten einfügen. Diese Header geben an, ob der Browser dem Client den Zugriff auf die angeforderten Ressourcen ermöglichen soll.

4. So funktioniert CORS

Wenn ein Browser eine Cross-Origin-Anfrage stellt, überprüft er die Antwortheader des Servers, um festzustellen, ob die Anfrage zulässig ist.

Wichtige Schritte:

Preflight-Anfrage (optional):

Bei bestimmten Arten von Anfragen sendet der Browser zunächst eine OPTIONS-Anfrage, um zu prüfen, ob die tatsächliche Anfrage zulässig ist.
Serverantwort:

Der Server fügt der Antwort entsprechende CORS-Header hinzu.
Browser-Entscheidung:

Wenn die Header den Erwartungen des Browsers entsprechen, wird die Ressource freigegeben. andernfalls blockiert der Browser die Anfrage.

5. Wichtige CORS-Header

Anforderungsheader:

Ursprung: Gibt den Ursprung der Anfrage an. Beispiel: Herkunft: https://example.com

Antwortheader:

Access-Control-Allow-Origin: Gibt an, welche Ursprünge auf die Ressource zugreifen dürfen.

Beispiel: Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: Gibt die zulässigen HTTP-Methoden an.

Beispiel: Access-Control-Allow-Methoden: GET, POST, PUT
Access-Control-Allow-Headers: Gibt die benutzerdefinierten Header an, die in Anfragen gesendet werden können.

Beispiel: Access-Control-Allow-Header: Inhaltstyp, Autorisierung
Access-Control-Allow-Credentials: Gibt an, ob Anmeldeinformationen (Cookies, HTTP-Authentifizierung) gesendet werden können.

Beispiel: Access-Control-Allow-Credentials: true

6. Arten von CORS-Anfragen

Einfache Anfragen:
- Dies sind einfache Anfragen (z. B. GET, POST) ohne benutzerdefinierte Header und ohne Preflight.
Preflight-Anfragen:
- Bei Anfragen mit benutzerdefinierten Headern, Anmeldeinformationen oder anderen Methoden als GET oder POST sendet der Browser eine Preflight-OPTIONS-Anfrage, um sicherzustellen, dass der Server dies zulässt.
Beglaubigte Anfragen:
- Anfragen, die Anmeldeinformationen wie Cookies enthalten, erfordern den Header Access-Control-Allow-Credentials.

7. Beispiel: CORS in Aktion

Clientseitiges JavaScript:

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

Nach dem Login kopieren

Server-Antwortheader:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

Nach dem Login kopieren

8. Umgang mit CORS im serverseitigen Code

Node.js-Beispiel mit Express:

const express = require("express");
const cors = require("cors");
const app = express();

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

Nach dem Login kopieren

9. Häufige CORS-Probleme und Korrekturen

Fehler: Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden.
- Fix: Stellen Sie sicher, dass der Server den Access-Control-Allow-Origin-Header enthält.
Fehler: Anmeldeinformationsanfragen erfordern, dass „Access-Control-Allow-Credentials“ wahr ist.
- Fix: Setzen Sie Access-Control-Allow-Credentials auf „true“ und stellen Sie sicher, dass Access-Control-Allow-Origin nicht * ist.
Preflight-Anfrage schlägt fehl:
- Fix: Stellen Sie sicher, dass der Server korrekt auf OPTIONS-Anfragen mit den erforderlichen CORS-Headern antwortet.

10. Vorteile von CORS

Erhöht die Sicherheit durch die kontrollierte gemeinsame Nutzung von Ressourcen.
Erleichtert API-Integrationen zwischen verschiedenen Domänen.
Unterstützt eine Vielzahl von Konfigurationen, um den Anwendungsanforderungen gerecht zu werden.

11. Einschränkungen von CORS

Konfigurationskomplexität für APIs, die dynamische Ursprünge erfordern.
Erhöhter Overhead für Preflight-Anfragen bei bestimmten APIs.
Aufgrund der Durchsetzung durch den Browser ist es oft schwierig, Fehler zu beheben.

12. Fazit

CORS ist eine wichtige Funktion für die sichere und funktionale ursprungsübergreifende gemeinsame Nutzung von Ressourcen in Webanwendungen. Indem Sie die CORS-Header auf Ihrem Server verstehen und richtig konfigurieren, können Sie eine reibungslose und sichere Kommunikation zwischen Domänen gewährleisten und gleichzeitig die Web-Sicherheitsstandards einhalten.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonCORS verstehen: Sichere ursprungsübergreifende Ressourcenfreigabe in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!