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.
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.
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.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.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;
});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 -- Clickjacking-Schutz (SSG)
add_header X-Frame-Options "DENY" always;
# Alternative: Nur eigene Domain darf einbetten
# add_header X-Frame-Options "SAMEORIGIN" always;// vercel.json -- Clickjacking-Schutz
{
"headers": [{
"source": "/(.*)",
"headers": [{
"key": "X-Frame-Options",
"value": "DENY"
}]
}]
}# public/_headers -- Netlify/Cloudflare Pages
/*
X-Frame-Options: DENYVerifizieren
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.
# 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' 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.