Clickjacking-Schutz für Nuxt 3
Schritt-für-Schritt: X-Frame-Options und CSP frame-ancestors in Nuxt 3 konfigurieren — Clickjacking-Angriffe zuverlässig verhindern.
Clickjacking-Schutz in Nuxt 3
X-Frame-Options und CSP frame-ancestors verhindern, dass Ihre Website in fremde iframes eingebettet wird — der Hauptvektor für Clickjacking-Angriffe. Mit 10 von 166 Punkten ist der Clickjacking-Schutz ein relevanter Faktor im Wolf-Agents Web Security Check.
Das nuxt-security Modul setzt X-Frame-Options: SAMEORIGIN automatisch. Für maximalen Schutz empfehlen wir DENY plus frame-ancestors 'none' in der CSP — es sei denn, Ihre Anwendung muss in iframes eingebettet werden können.
X-Frame-Options konfigurieren
Setzen Sie X-Frame-Options: DENY um jede Einbettung zu verhindern. Nutzen Sie routeRules, wenn bestimmte Routen (z.B. /embed/) einbettbar sein müssen.
// nuxt.config.ts — nuxt-security (setzt DENY automatisch)
export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
headers: {
xFrameOptions: 'DENY',
// Zusätzlich in CSP:
contentSecurityPolicy: {
'frame-ancestors': ["'none'"],
},
},
},
}) // nuxt.config.ts — routeRules
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'X-Frame-Options': 'DENY',
},
},
// Ausnahme für einbettbare Seiten:
'/embed/**': {
headers: {
'X-Frame-Options': 'SAMEORIGIN',
},
},
},
}) // server/middleware/x-frame.ts — Nitro Middleware
export default defineEventHandler((event) => {
setHeader(event,
'X-Frame-Options',
'DENY'
);
}) frame-ancestors als moderne Alternative
CSP frame-ancestors ist die moderne Alternative zu X-Frame-Options und bietet mehr Kontrolle — z.B. können Sie bestimmte Domains als Einbettungs-Ziele erlauben. Setzen Sie beide Header für maximale Kompatibilität.
Moderne Browser priorisieren frame-ancestors über X-Frame-Options. Ältere Browser (IE11) unterstützen nur X-Frame-Options. Setzen Sie beide Header für maximale Kompatibilität.
Clickjacking-Schutz verifizieren
Prüfen Sie den Header im Production-Build. Der Wolf-Agents Web Security Check erkennt fehlenden Clickjacking-Schutz und bewertet sowohl X-Frame-Options als auch frame-ancestors.
# X-Frame-Options prüfen
curl -sI https://ihre-domain.de | grep -i x-frame
# Erwartete Ausgabe:
# X-Frame-Options: DENY Häufige Fehler
ALLOW-FROM ist veraltet
X-Frame-Options: ALLOW-FROM wird von modernen Browsern nicht unterstützt. Verwenden Sie CSP frame-ancestors für Domain-spezifische Einbettung.
Widerspruch zwischen X-Frame-Options und CSP
Wenn X-Frame-Options DENY und frame-ancestors 'self' gesetzt ist, priorisieren Browser frame-ancestors. Halten Sie beide Header konsistent.
Eingebettete Widgets blockiert
Wenn Ihre Nuxt-App als Widget in andere Seiten eingebettet wird, blockiert DENY die Darstellung. Nutzen Sie routeRules für pfadspezifische Ausnahmen.
Compliance-Relevanz
Clickjacking-Schutz ist eine Anforderung in OWASP Top 10 und wird in Penetrationstests standardmäßig geprüft. PCI DSS fordert Schutz gegen bekannte Angriffsvektoren — Clickjacking gehört dazu. Der Wolf-Agents Web Security Check bewertet X-Frame-Options mit bis zu 10 Punkten.
Wie steht Ihre Domain bei Clickjacking-Schutz?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.