iframe-Sicherheit: Clickjacking und X-Frame-Options
Verhindern Sie Clickjacking-Angriffe mit X-Frame-Options und CSP
iframe-Sicherheit: Clickjacking und X-Frame-Options ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Clickjacking?
Beim Clickjacking (UI Redressing) wird eine Zielwebsite in ein transparentes iframe über einer Täuschungsseite eingebettet. Der Benutzer glaubt, auf die Täuschungsseite zu klicken, klickt aber tatsächlich auf die verborgene, authentifizierte Seite darunter und führt dadurch unbemerkt Aktionen auf der Zielwebsite aus.
Funktionsweise eines Clickjacking-Angriffs
Der Angreifer lädt victim.com in ein transparentes iframe, das über einer Schaltfläche „Klicken Sie, um zu gewinnen!“ positioniert ist. Wenn der Benutzer klickt, klickt er tatsächlich auf die Schaltfläche „Konto löschen“ von victim.com – authentifiziert durch sein eigenes Sitzungscookie bei victim.com. Phishing ist dafür nicht erforderlich.
X-Frame-Options-Header
X-Frame-Options: DENY verhindert, dass die Seite in irgendeinem iframe geladen wird. X-Frame-Options: SAMEORIGIN erlaubt das Einbetten nur durch Seiten desselben Origins. Setzen Sie diesen Header serverseitig auf allen authentifizierten Seiten, um Clickjacking zu verhindern.
Content-Security-Policy frame-ancestors
Content-Security-Policy: frame-ancestors 'none' ist der moderne, flexiblere Ersatz für X-Frame-Options: DENY. frame-ancestors 'self' ersetzt SAMEORIGIN. Mit frame-ancestors können Sie auch bestimmte vertrauenswürdige Origins erlauben: frame-ancestors https://trusted.example.com.
JavaScript-Frame-Busting
Früheres Frame-Busting verwendete JavaScript, um aus Frames auszubrechen. Diese Techniken lassen sich durch das sandbox-Attribut leicht umgehen, da es das Frame-Buster-Skript blockiert. Verwenden Sie immer serverseitige Header (X-Frame-Options oder CSP frame-ancestors) – JavaScript-Frame-Busting ist nicht zuverlässig.
Wann Framing erlaubt werden sollte
Legitime Anwendungsfälle für Framing sind das Einbetten eigener Inhalte in den eigenen Origin (SAMEORIGIN) sowie das Erlauben eines bestimmten Partners, Ihr Widget einzubetten (frame-ancestors mit einem bestimmten Origin). Gestalten Sie die Richtlinie so, dass diese Fälle erlaubt und alle anderen abgelehnt werden.
Kombinierter Ansatz
Setzen Sie sowohl X-Frame-Options (für ältere Browser) als auch CSP frame-ancestors (für moderne Browser), um eine möglichst umfassende Abdeckung zu erreichen. Wenn beide vorhanden sind, hat frame-ancestors in Browsern mit CSP-Unterstützung Vorrang. Durch das Senden beider Header ist der Clickjacking-Schutz in allen User-Agents gewährleistet.
Risiken von Same-Origin-iframes
Auch Same-Origin-iframes können Risiken bergen: Ein gespeichertes XSS in einer eingebetteten Seite könnte über parent.document auf das übergeordnete Dokument zugreifen, wenn beide denselben Origin haben. Verwenden Sie für Same-Origin-iframes, die keinen Zugriff auf das übergeordnete Dokument benötigen, sandbox ohne allow-same-origin, um den Schaden durch Schwachstellen in eingebetteten Inhalten zu begrenzen.
Schutz testen
Überprüfen Sie den Clickjacking-Schutz: Sehen Sie im Netzwerk-Tab des Browsers nach, ob die Antwortheader X-Frame-Options oder CSP frame-ancestors enthalten. Tools wie securityheaders.com analysieren Header. Erstellen Sie eine Test-HTML-Seite mit einem iframe, das auf Ihre Website verweist, und überprüfen Sie, dass es nicht geladen werden kann.
Einbettungen von Drittanbietern
Wenn Sie Inhalte von Drittanbietern einbetten (YouTube, Google Maps), sind Sie die einbettende Website. Stellen Sie sicher, dass der eingebettete Dienst das Framing in seiner eigenen X-Frame-Options-Richtlinie erlaubt. Sie können keine Website einbetten, die Framing verhindert – das ist beabsichtigt und schützt die Benutzer des eingebetteten Dienstes.
CSP frame-ancestors in Meta-Tags
Anders als die meisten CSP-Direktiven kann frame-ancestors nicht über ein HTTP-equiv-Meta-Tag gesetzt werden, sondern muss als HTTP-Antwortheader übertragen werden. Dadurch wird sichergestellt, dass Angreifer den Schutz nicht entfernen können, indem sie das eingebettete HTML manipulieren, bevor der Browser die Meta-Tags liest.
Wissensüberprüfung
Warum ist JavaScript-Frame-Busting-Code ein unzuverlässiger Schutz gegen Clickjacking?
Zusammenfassung
Beim Clickjacking werden authentifizierte Seiten in transparenten iframes eingebettet, um Klicks umzuleiten. Schutz: serverseitige Header mit X-Frame-Options: DENY oder CSP frame-ancestors: none. Setzen Sie beide für browserübergreifenden Schutz. JavaScript-Frame-Busting ist unzuverlässig – verwenden Sie immer HTTP-Header. frame-ancestors bietet eine feingranulare Allowlist vertrauenswürdiger Origins, die X-Frame-Options nicht unterstützt.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „iframe-Sicherheit: Clickjacking und X-Frame-Options“ kostenlos?
Ja — der vollständige Text von „iframe-Sicherheit: Clickjacking und X-Frame-Options“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „iframe-Sicherheit: Clickjacking und X-Frame-Options“?
Verhindern Sie Clickjacking-Angriffe mit X-Frame-Options und CSP Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „iframe-Sicherheit: Clickjacking und X-Frame-Options“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das iframe-Element: src und sandbox
- iframe-Sicherheit: Clickjacking und X-Frame-Options
- Die Elemente embed und object
- Lazy Loading für iframes