X-Frame-Options für Express.js konfigurieren

Schritt-für-Schritt-Anleitung: X-Frame-Options und CSP frame-ancestors in Express.js einrichten — mit Helmet oder manuellem Middleware.

Header prüfen Plattform entdecken
Express.js · Schritt für Schritt
Von Wolf-Agents Security Team · Aktualisiert: 26. März 2026

Clickjacking-Schutz in Express.js

X-Frame-Options verhindert, dass Ihre Express-Anwendung in fremden iFrames eingebettet wird. Die einfachste Methode ist helmet.frameguard() — ein Einzeiler, der X-Frame-Options automatisch setzt. Für Defense-in-Depth setzen Sie zusätzlich frame-ancestors als CSP-Direktive. Alternativ können Sie den Header auch manuell per Middleware setzen.

X-Frame-Options ist mit 10 von 166 Punkten ein Faktor im Wolf-Agents Web Security Check. Die Konfiguration dauert weniger als 5 Minuten.

Ausführliche Einführung in Clickjacking-Schutz

1 Schritt 1 von 2

X-Frame-Options und frame-ancestors konfigurieren

Verwenden Sie helmet.frameguard() für X-Frame-Options und ein zusätzliches Middleware für frame-ancestors. Beide Header zusammen bieten Defense-in-Depth gegen Clickjacking.

app.js — Mit Helmet (empfohlen) Produktiv 
// Clickjacking-Schutz — Defense-in-Depth
const helmet = require('helmet');

// X-Frame-Options: DENY
app.use(helmet.frameguard({ action: 'deny' }));

// CSP frame-ancestors als zusätzlichen Schutz
app.use((req, res, next) => {
  res.set('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});
Alternative: Ohne Helmet

Wenn Sie Helmet nicht verwenden möchten, setzen Sie beide Header manuell:

app.js — Manuelles Middleware Alternative 
// Clickjacking-Schutz — manuell
app.use((req, res, next) => {
  res.set('X-Frame-Options', 'DENY');
  res.set('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});
2 Schritt 2 von 2

Header verifizieren

Starten Sie Ihren Express-Server und verifizieren Sie beide Header mit curl.

Terminal Verifizieren 
# Express-Server starten
node app.js

# X-Frame-Options-Header prüfen
curl -sI http://localhost:3000 | grep -i x-frame

# Erwartete Ausgabe:
# X-Frame-Options: DENY

# frame-ancestors prüfen
curl -sI http://localhost:3000 | grep -i content-security

# Erwartete Ausgabe:
# Content-Security-Policy: frame-ancestors 'none'
Stellen Sie sicher, dass das Security-Middleware vor allen Route-Handlern eingebunden ist. Express führt Middleware in Reihenfolge aus — Header werden nur gesetzt, wenn das Middleware durchlaufen wird.

Auch verfügbar für:

NginxApacheWordPressNext.jsCloudflareCaddy

Wie steht Ihre Domain bei X-Frame-Options?

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

Web Security Check starten Monitoring ab 199 EUR/Mo

Häufig gestellte Fragen

Helmet oder manuelles Middleware — was ist besser?

Helmet ist die empfohlene Methode — es setzt neben X-Frame-Options auch andere Security Header automatisch. Manuelles Middleware gibt Ihnen volle Kontrolle, erfordert aber mehr Code. Für die meisten Express-Anwendungen ist Helmet die bessere Wahl.

Setzt Helmet auch frame-ancestors?

helmet.frameguard() setzt nur X-Frame-Options. Für frame-ancestors verwenden Sie helmet.contentSecurityPolicy() mit der frameSrc-Direktive oder setzen den CSP-Header manuell. Beide Header zusammen bieten Defense-in-Depth.

Was passiert, wenn ich helmet() ohne Optionen aufrufe?

helmet() setzt standardmäßig X-Frame-Options: SAMEORIGIN. Das ist eine sichere Default-Konfiguration. Für DENY verwenden Sie helmet.frameguard({ action: 'deny' }).

Wird der Header auch bei Express-Error-Handlern gesetzt?

Ja, wenn das Middleware vor dem Error-Handler eingebunden ist. Express führt Middleware in Reihenfolge aus — binden Sie das Security-Middleware vor allen Route-Handlern ein.

Kann ich verschiedene Policies für verschiedene Routen setzen?

Ja. Statt app.use() können Sie das Middleware auf spezifische Routen beschränken: app.use('/admin', helmet.frameguard({ action: 'deny' })). So können Sie z.B. die Admin-Seite strenger schützen als das Frontend.