Wie CORS funktioniert und wie man es richtig für Webanwendungen konfiguriert

Cross-Origin Resource Sharing (CORS) — ist ein Mechanismus, der es Webanwendungen ermöglicht, zu steuern, welche Ressourcen von anderen Domains zugänglich sind. Dies ist ein wichtiger Teil der Sicherheit, insbesondere wenn es um den Schutz der Benutzerdaten geht. Wenn Sie verstehen, wie CORS funktioniert, können Sie es effektiv für Ihre Anwendung konfigurieren und die Sicherheit der Informationen gewährleisten.

Grundlagen von CORS

Wenn der Browser eine Anfrage an eine andere Domain sendet (nicht die, von der die Ressource geladen wurde), sieht er dies automatisch als Cross-Domain Anfrage an. Damit die Anfrage erfolgreich ausgeführt werden kann, muss die auf dem Server gehostete Ressource die CORS-Header konfiguriert haben, die diese Anfrage erlauben.

CORS-Header

Als Antwort kann der Server folgende Header senden:

• Access-Control-Allow-Origin: Gibt an, welche Domains auf die Ressource zugreifen dürfen.
• Access-Control-Allow-Methods: Liste der HTTP-Methoden, die für die Cross-Domain-Anfrage erlaubt sind.
• Access-Control-Allow-Headers: Header, die der Client mit der Anfrage verwenden kann.

Konfiguration von CORS

Um CORS zu konfigurieren, ist es wichtig zu verstehen, welche Ressourcen Sie für den Zugriff öffnen möchten und wem der Zugriff auf diese Ressourcen gestattet ist.

Beispiel für die Konfiguration eines Node.js-Servers

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

const corsOptions = {
  origin: 'https://example.com',
  methods: 'GET,POST',
  allowedHeaders: 'Content-Type'
};

app.use(cors(corsOptions));

app.get('/', (req, res) => {
  res.json({ message: 'CORS konfiguriert!' });
});

app.listen(3000, () => {
  console.log('Server läuft auf Port 3000');
});

In diesem Beispiel verwenden wir das Middleware cors für Express, das Anfragen von der Domain https://example.com erlaubt. Dieses Beispiel zeigt, wie man nur GET- und POST-Anfragen von einer bestimmten Domain zulässt.

Beispiel für die Konfiguration eines Ruby on Rails-Servers

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :cors_preflight_check

  def cors_preflight_check
    if request.method == 'OPTIONS'
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
      render text: '', content_type: 'text/plain'
    end
  end
end

In diesem Beispiel fügen wir die Methode cors_preflight_check hinzu, um OPTIONS-Anfragen zu verarbeiten, die vor der Hauptanfrage gesendet werden. Dies ermöglicht die Konfiguration von CORS für die gesamte Anwendung. Das Sternchen (*) zeigt an, dass Anfragen von jeder Domain erlaubt sind.

Häufige Probleme mit CORS

• Blockierung von Anfragen: Dies kann passieren, wenn der Server die CORS-Header nicht korrekt konfiguriert.
• Preflight-Anfragen: Vor der Hauptanfrage kann eine Preflight-Anfrage gesendet werden, um die Berechtigungen zu überprüfen. Wenn dies nicht berücksichtigt wird, wird die Anfrage blockiert.
• Caching: CORS-Antworten können zwischengespeichert werden, was die Gültigkeit der Berechtigungen beeinflusst.

Wichtige Punkte

CORS hilft, die Sicherheit Ihrer Anwendungen zu gewährleisten, indem der Zugriff auf Ressourcen von Drittanbieterseiten eingeschränkt wird. Die Konfiguration von CORS-Headern ist ein wichtiger Schritt, der Ihre Webanwendung vor unerwünschten Anfragen schützen und die persönlichen Daten der Benutzer sicher halten kann.

Das Wissen und die korrekte Konfiguration von CORS sind ein wichtiger Aspekt in der Entwicklung von Webanwendungen, den jeder Entwickler/jede Entwicklerin berücksichtigen sollte.