AWS CloudFront und S3: Content-Security-Header setzen

Wie man Content-Security-Header korrekt über AWS CloudFront und S3 konfiguriert, um die Sicherheit seiner Webanwendungen zu erhöhen.

Content-Security-Header sind ein wichtiger Baustein für die Absicherung moderner Webanwendungen. Sie schützen vor Angriffen wie Cross-Site Scripting (XSS), Clickjacking und anderen Injection-Attacken, indem sie dem Browser mitteilen, welche Ressourcen geladen und ausgeführt werden dürfen.

Der alte Weg: Eigene Funktion

Bisher war der gängige Ansatz bei AWS CloudFront, eine CloudFront Function zu erstellen, die die gewünschten Security-Header in jede Response einfügt. Eine solche Funktion sieht typischerweise so aus:

 

function handler(event) {
    var response = event.response;
    var headers = response.headers;
    headers['cache-control'] = {value: 'public, max-age=86400'};
    headers['content-security-policy'] = { value: "default-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; object-src 'none'; font-src 'self'; media-src 'self'; manifest-src 'self'"};
    headers['permissions-policy'] = {value: 'accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()'};
    return response;
}

 

Diese Funktion musste anschließend in den Behavior-Einstellungen der CloudFront-Distribution unter Viewer response hinzugefügt werden. Das funktionierte zwar, war aber umständlich zu verwalten und erforderte Programmierkenntnisse.

Der neue Weg: Response Headers Policy

Seit Mai 2023 bietet AWS CloudFront eine deutlich einfachere Alternative: die Response Headers Policy. Damit lassen sich Security-Header direkt über die AWS-Konsole konfigurieren, ganz ohne eigenen Code.

So geht's Schritt für Schritt:

  1. Navigiere zu CloudFront > Policies > Response headers in der AWS-Konsole.
  2. Erstelle eine neue Policy mit einem aussagekräftigen Namen.
  3. Füge unter Security headers die gewünschten Header hinzu, zum Beispiel Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options und X-Frame-Options.
  4. Für Header wie Permissions-Policy, die nicht direkt als Security-Header verfügbar sind, nutze den Bereich Custom headers.
  5. Bearbeite deine CloudFront-Distribution und wähle unter Behavior > Response header policy die neu erstellte Policy aus.
  6. Führe eine Cache-Invalidierung durch, damit die neuen Header sofort wirksam werden.

Fazit

Das Setzen von Content-Security-Headern ist für jede moderne Webanwendung unverzichtbar. Während der alte Weg über CloudFront Functions funktionierte, vereinfacht die neue Response Headers Policy den Prozess erheblich. Die Konfiguration erfolgt jetzt komfortabel über die Konsole, ist leichter zu warten und erfordert keinen eigenen Code mehr. Wer seine CloudFront-Distribution absichern möchte, sollte auf die neue Methode umsteigen.