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.

Nuxt 3 · Schritt für Schritt

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.

1 Schritt 1 von 3

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
// 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
// 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 Middleware
// server/middleware/x-frame.ts — Nitro Middleware
export default defineEventHandler((event) => {
  setHeader(event,
    'X-Frame-Options',
    'DENY'
  );
})
2 Schritt 2 von 3

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.

X-Frame-Options vs. frame-ancestors

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.

3 Schritt 3 von 3

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.

Terminal Verifizieren
# 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.