Clickjacking-Schutz für Astro konfigurieren

Schritt-für-Schritt-Anleitung: X-Frame-Options und frame-ancestors per Middleware setzen -- Schutz vor Iframe-Einbettung und UI-Redressing.

Astro · Schritt für Schritt

Clickjacking-Schutz in Astro

X-Frame-Options verhindert, dass Ihre Website in Iframes auf fremden Seiten eingebettet wird. Clickjacking-Angriffe nutzen unsichtbare Iframes, um Benutzer zu taeuschen -- ein Klick auf einen scheinbar harmlosen Button loest in Wirklichkeit eine Aktion auf der eingebetteten Seite aus. Zusammen mit frame-ancestors in der CSP ist dieser Header mit 10 von 166 Punkten im Wolf-Agents Web Security Check relevant.

In Astro setzen Sie X-Frame-Options: DENY per Middleware (SSR) oder Hosting-Konfiguration (SSG). Der modernere frame-ancestors-Ansatz über die CSP bietet mehr Flexibilitaet (z.B. bestimmte Domains erlauben), aber X-Frame-Options bleibt als Fallback für ältere Browser wichtig. Wolf-Agents setzt beide Header produktiv.

Clickjacking ist besonders gefährlich bei Astro-Anwendungen mit authentifizierten Bereichen: Ein Angreifer kann das Dashboard in einem unsichtbaren Iframe einbetten und den Benutzer dazu bringen, Aktionen wie Domainloeschung oder Kontoaenderungen auszufuehren.

Der Wolf-Agents Web Security Check prüft sowohl X-Frame-Options als auch frame-ancestors in der CSP. Für die volle Punktzahl müssen beide Header korrekt gesetzt sein. Wolf-Agents setzt X-Frame-Options: DENY und frame-ancestors 'none' in der CSP per Middleware.

1Schritt 1 von 5

X-Frame-Options per Middleware (SSR)

Setzen Sie X-Frame-Options: DENY in der Middleware. DENY verhindert jede Iframe-Einbettung. Kombinieren Sie den Header mit frame-ancestors 'none' in der CSP für maximale Abdeckung.

src/middleware.tsSSR
// src/middleware.ts -- Clickjacking-Schutz (SSR)
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();

  // X-Frame-Options (Legacy-Browser)
  response.headers.set('X-Frame-Options', 'DENY');

  // frame-ancestors in CSP (modern, bevorzugt)
  // Wird typischerweise im CSP-Header gesetzt:
  // Content-Security-Policy: ... frame-ancestors 'none'

  return response;
});
src/middleware.tsKombiniert
// src/middleware.ts -- X-Frame-Options + CSP frame-ancestors
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();

  // Beide Header setzen für maximale Kompatibilität
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('Content-Security-Policy',
    response.headers.get('Content-Security-Policy')
      ? response.headers.get('Content-Security-Policy') + "; frame-ancestors 'none'"
      : "frame-ancestors 'none'"
  );

  return response;
});
2Schritt 2 von 5

SSG-Hosting-Varianten

Für statische Deployments konfigurieren Sie X-Frame-Options auf dem Webserver oder der Hosting-Plattform. Bei Hybrid-Deployments setzen Sie den Header sowohl in der Middleware als auch auf dem Webserver, um prerenderte Seiten abzudecken.

nginx.confNginx
# Nginx -- Clickjacking-Schutz (SSG)
add_header X-Frame-Options "DENY" always;

# Alternative: Nur eigene Domain darf einbetten
# add_header X-Frame-Options "SAMEORIGIN" always;
vercel.jsonVercel
// vercel.json -- Clickjacking-Schutz
{
  "headers": [{
    "source": "/(.*)",
    "headers": [{
      "key": "X-Frame-Options",
      "value": "DENY"
    }]
  }]
}
public/_headersNetlify
# public/_headers -- Netlify/Cloudflare Pages
/*
  X-Frame-Options: DENY
3Schritt 3 von 5

Verifizieren

Prüfen Sie den X-Frame-Options-Header und testen Sie, ob Ihre Seite nicht in einem Iframe geladen werden kann. Erstellen Sie eine Test-HTML-Datei mit einem Iframe, der auf Ihre Domain zeigt. Der Browser sollte die Einbettung blockieren und in der Console eine Fehlermeldung anzeigen.

TerminalVerifizieren
# X-Frame-Options prüfen
curl -sI https://ihre-domain.de | grep -i x-frame
# X-Frame-Options: DENY

# frame-ancestors in CSP prüfen
curl -sI https://ihre-domain.de | grep -i content-security-policy
# Content-Security-Policy: ... frame-ancestors 'none'

# Iframe-Test (Browser-Console, sollte blockiert werden):
# Refused to display in a frame because 'X-Frame-Options' is set to 'DENY'
4Schritt 4 von 5

DENY vs. SAMEORIGIN: Entscheidungshilfe

DENY blockiert jede Iframe-Einbettung -- auch auf Ihrer eigenen Domain. SAMEORIGIN erlaubt Iframes von der gleichen Domain. Waehlen Sie basierend auf Ihrem Anwendungsfall:

DENY empfohlen für: Standard-Websites, Dashboards, Zahlungsseiten, Login-Formulare. Wenn kein Feature Ihrer Astro-App Iframes benötigt, ist DENY die sicherste Wahl.

SAMEORIGIN empfohlen für: Websites mit eingebetteten Widgets, Vorschau-Iframes im CMS, oder Anwendungen, die Teile der eigenen Seite in Iframes laden. Wolf-Agents verwendet DENY, da keine Iframe-Einbettung benötigt wird.

Im modernen Ansatz über frame-ancestors in der CSP können Sie einzelne Domains explizit erlauben: frame-ancestors 'self' preview.ihre-domain.de. Dies ist flexibler als X-Frame-Options und ersetzt langfristig den Legacy-Header.

Für Astro-Anwendungen mit eingebetteten Payment-Widgets (Stripe, PayPal) müssen Sie beachten: Die Payment-Provider verwenden eigene Iframes. X-Frame-Options betrifft nur das Einbetten Ihrer Seite in fremde Iframes -- das Einbetten fremder Iframes in Ihre Seite wird dadurch nicht beeinflusst.

Häufige Fehler bei Clickjacking-Schutz in Astro

ALLOW-FROM ist veraltet

X-Frame-Options: ALLOW-FROM wird von modernen Browsern nicht mehr unterstützt. Verwenden Sie stattdessen frame-ancestors in der CSP für feingranulare Kontrolle: frame-ancestors 'self' widget.ihre-domain.de.

frame-ancestors ohne X-Frame-Options

Aeltere Browser (IE11) unterstützen frame-ancestors nicht. Setzen Sie beide Header für maximale Kompatibilität -- X-Frame-Options als Fallback für Legacy-Browser.

Eigene Iframes blockiert

Wenn Sie Ihre Seite in eigenen Iframes einbetten (z.B. für eingebettete Widgets), verwenden Sie SAMEORIGIN statt DENY. In der CSP: frame-ancestors 'self' widget.ihre-domain.de.

prerender-Seiten ungeschützt

Prerenderte Seiten im Hybrid-Modus erhalten keine Middleware-Header. Setzen Sie X-Frame-Options auf dem Webserver, um alle Seiten abzudecken -- auch die statisch generierten.

Compliance-Relevanz

Clickjacking-Schutz ist eine grundlegende Sicherheitsmassnahme, die von NIS2 und PCI DSS 4.0 als Teil der UI-Sicherheit erwartet wird. OWASP listet Clickjacking als relevantes Angriffsrisiko in den OWASP Top 10. Besonders bei authentifizierten Webanwendungen mit sicherheitsrelevanten Aktionen (Zahlungen, Kontoaenderungen, Domainverwaltung) ist der Schutz vor Iframe-Einbettung unverzichtbar.

Astro-Anwendungen mit Payment-Integration (Stripe Checkout), OAuth-Login oder Team-Management-Features sind besonders gefährdet. Der Wolf-Agents Web Security Check bewertet X-Frame-Options und frame-ancestors mit bis zu 10 Punkten und prüft die korrekte Konfiguration beider Header.

Wie steht Ihre Domain bei Clickjacking-Schutz?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.