iframe sandbox: Alle Tokens mit Live-Demo zum Umschalten | We.Inc
Schalte jedes iframe-sandbox-Token ein und aus und sieh, wie Skripte, Formulare, Pop-ups und Alerts funktionieren oder blockiert werden. Alle Tokens erklärt.
Ein leeres sandbox-Attribut sperrt ein iframe komplett ab: keine Skripte, kein Absenden von Formularen, keine Pop-ups, keine Alerts und ein opaker Origin, der jede Same-Origin-Prüfung nicht besteht. Jedes allow-Token, das du hinzufügst, gibt genau eine Fähigkeit zurück. Schalte die Tokens unten um, sieh genau, was kaputtgeht, und kopiere dann die kleinste Kombination, die dein Embed braucht.
Typische Aufgaben und die Tokens, die sie brauchen
Eingebetteter Inhalt
Empfohlener sandbox-Wert
Statische HTML-Vorschau, die du erzeugt hast
sandbox (leer)
Interaktive Demo oder Ausgabe eines Code-Playgrounds
sandbox="allow-scripts"
Formular eines Drittanbieters, das seine Antworten absendet
sandbox="allow-scripts allow-forms allow-same-origin" (nur bei einem anderen Origin)
Widget mit Links, die sich in einem neuen Tab öffnen
Das sandbox-Attribut ist der günstigste Sicherheitsgewinn, den du einem iframe mit fremdem Inhalt geben kannst: HTML von Nutzern, ein Werbeplatz, die Vorschau einer generierten Seite. Schwierig ist nur zu wissen, welche Tokens ein bestimmtes Embed braucht, denn ein fehlendes Token scheitert meist lautlos. Der Live-Frame unten führt echte Tests aus, sodass du jeden Fehler siehst, statt zu raten. Die Grundlagen des Einbettens findest du in unserem Leitfaden zu HTML-iframes und Videos.
Hake Tokens in der Liste an. Der Frame rechts lädt mit genau diesem sandbox-Wert neu, der darüber als kopierbarer Code angezeigt wird.
Ist allow-scripts aus, zeigt der Frame nur seine Ersatzzeile, weil darin nichts ausgeführt werden kann.
Schalte allow-scripts ein, und der Frame meldet seinen eigenen Origin und bietet Buttons zum Absenden eines Formulars, zum Öffnen eines Pop-ups und zum Anzeigen eines Alerts.
Jeder Button meldet, ob der Browser die Aktion erlaubt hat. Füge das passende Token hinzu und drücke ihn erneut, um zu vergleichen.
Beginne mit einer leeren sandbox und füge Tokens einzeln hinzu, bis das Embed funktioniert. Aus einer langen Liste Tokens zu entfernen ist schwerer nachzuvollziehen.
Kombiniere allow-scripts und allow-same-origin nie für Inhalte von deinem eigenen Origin. Die eingebettete Seite kann dann ihre eigene sandbox entfernen.
Nutze für HTML von Nutzern lieber srcdoc oder eine separate Subdomain, damit selbst ein Fehler bei den Tokens nicht an die Cookies deiner Hauptseite herankommt.
Sandboxing allein schränkt Kamera, Mikrofon oder ähnliche Funktionen nicht ein. Nutze dafür zusätzlich das allow-Attribut für die Permissions Policy.
Wenn Links im Frame normale Tabs öffnen sollen, füge allow-popups-to-escape-sandbox hinzu, sonst übernimmt der neue Tab dieselben Einschränkungen.
Häufige Fragen
Was bewirkt ein leeres sandbox-Attribut?
Es aktiviert alle Einschränkungen auf einmal. Das eingebettete Dokument kann keine Skripte ausführen, keine Formulare absenden, keine Pop-ups oder Modals öffnen, nicht im obersten Fenster navigieren, weder Zeiger noch Ausrichtung sperren und keine Downloads starten. Außerdem gilt es als Inhalt aus einem eindeutigen Origin, der mit keinem anderen übereinstimmt.
Warum ist allow-scripts zusammen mit allow-same-origin gefährlich?
Liegt das eingebettete Dokument auf demselben Origin wie deine Seite, erlauben diese beiden Tokens zusammen seinem Skript, nach oben zu greifen und das sandbox-Attribut zu löschen. Am Ende ist es dann nicht sicherer als ein gewöhnliches iframe. Für Inhalte von einem wirklich anderen Origin ist die Kombination unproblematisch, denn diese können deine Seite ohnehin nicht anfassen.
Mein Formular in der sandbox tut beim Absenden nichts. Warum?
Ohne allow-forms wird das Formular zwar angezeigt, aber das Absenden löst keine Validierung aus und schickt keine Daten an einen Server. Füge allow-forms hinzu. Braucht das Formular außerdem Cookies oder Speicher seiner eigenen Website, benötigt es auch allow-same-origin.
Kann ein iframe in der sandbox meine ganze Seite umleiten?
Nur wenn du allow-top-navigation hinzufügst, oder allow-top-navigation-by-user-activation, das es nur erlaubt, nachdem die Person in den Frame geklickt hat. Lässt du beide weg, kann ein Embed deine Seite nicht durch eine andere Website ersetzen.
Reicht sandbox aus, um nicht vertrauenswürdiges HTML sicher anzuzeigen?
Es ist die wichtigste Schutzschicht, aber nicht die einzige. Liefere nicht vertrauenswürdige Inhalte von einem separaten Origin oder per srcdoc aus, lass allow-same-origin aus, wenn Skripte aktiv sind, und ergänze eine Content-Security-Policy für das eingebettete Dokument, wenn du steuerst, wie es ausgeliefert wird.
Was der opake Origin verändert
Ohne allow-same-origin erhält das eingebettete Dokument einen speziellen Origin, der die Same-Origin-Policy immer verletzt. Sein self.origin lautet als String "null".
Diese eine Regel schaltet eine Menge ab, weil die eingebettete Seite nicht mehr als Teil ihrer eigenen Website zählt. Widgets, die auf eigene Cookies oder gespeicherten Zustand angewiesen sind, brechen hier oft, und deshalb verlangen so viele allow-same-origin.
Lautlose Fehler sind die Regel
Ein blockiertes Pop-up wirft keinen Fehler; window.open gibt einfach null zurück. Ein blockierter Alert kehrt sofort zurück, ohne etwas anzuzeigen. Ein blockiertes Formular bleibt einfach stehen. Wenn sich ein Embed seltsam verhält, prüfe die Browserkonsole des Frames, bevor du dem Code des Embeds die Schuld gibst.
Deshalb meldet die Demo auf dieser Seite die Ergebnisse innerhalb des Frames: Du siehst dasselbe stille Verhalten, auf das auch ein echtes Embed stoßen würde.
sandbox, allow und CSP erfüllen verschiedene Aufgaben
sandbox begrenzt, was das eingebettete Dokument tun darf. Das allow-Attribut legt eine Permissions Policy für Funktionen wie Kamera, Vollbild oder Standortbestimmung fest. Content-Security-Policy, vom Server der eingebetteten Seite gesendet, begrenzt, welche Skripte und Ressourcen sie lädt.
Ein sorgfältiges Embed nicht vertrauenswürdiger Inhalte nutzt alle drei, und der frame-ancestors-Teil der CSP beantwortet die umgekehrte Frage: wer eine Seite überhaupt einbetten darf.
Alle sandbox-Tokens
Tokens werden durch Leerzeichen getrennt, Groß- und Kleinschreibung spielt keine Rolle. Alles, was nicht aufgeführt ist, bleibt blockiert.
sandbox-Tokens und was jedes erlaubt
Token
Erlaubt
Skripte ausführen, aber keine Pop-up-Fenster öffnen
Den echten Origin des Dokuments statt eines opaken behalten
Formulare absenden (sonst werden sie angezeigt, senden aber nichts)
alert(), confirm(), print() und prompt() verwenden
Fenster mit window.open() oder target="_blank" öffnen
Diese neuen Fenster ohne die sandbox öffnen lassen
Dateien über Links oder Navigation herunterladen
Die oberste Seite navigieren
Die oberste Seite navigieren, aber erst nach einem Klick
Nicht-HTTP-Protokolle wie mailto: öffnen
Die Pointer Lock API verwenden
Die Bildschirmausrichtung sperren
Eine Präsentationssitzung starten
Nicht partitionierte Cookies über die Storage Access API anfordern
Muster zum Kopieren
HTML von Nutzern mit deaktivierten Skripten anzeigen
Der Button im Frame hat einen onclick-Handler, doch mit einer leeren sandbox wird er nie ausgeführt.
Drittanbieter-Widget auf einem anderen Origin
Das Widget führt sein eigenes Skript aus und sendet sein Formular ab, und Links können echte Tabs öffnen. Deine Seite umleiten kann es nicht.
Dieselben Einschränkungen als Response-Header
Ein Server kann seine eigene Seite per CSP in eine sandbox stecken. Das gilt auch, wenn die Seite direkt statt in einem Frame geöffnet wird.
Tokens umschalten und den Frame testen
Der Frame unten ist ein srcdoc-Dokument. allow-same-origin wird hier nicht angeboten, weil ein srcdoc-Frame dann den Origin dieser Seite teilen würde, genau die Kombination, vor der die Tipps warnen.
Skripte sind blockiert, daher kann in diesem Frame nichts ausgeführt werden.
Tokens
Aktuelles Attribut
Skripte ausführen, aber keine Pop-up-Fenster öffnen
Den echten Origin des Dokuments statt eines opaken behalten
Formulare absenden (sonst werden sie angezeigt, senden aber nichts)
alert(), confirm(), print() und prompt() verwenden
Fenster mit window.open() oder target="_blank" öffnen
Diese neuen Fenster ohne die sandbox öffnen lassen
Dateien über Links oder Navigation herunterladen
Die oberste Seite navigieren
Die oberste Seite navigieren, aber erst nach einem Klick
Nicht-HTTP-Protokolle wie mailto: öffnen
Die Pointer Lock API verwenden
Die Bildschirmausrichtung sperren
Eine Präsentationssitzung starten
Nicht partitionierte Cookies über die Storage Access API anfordern
sandbox-Testframe
Skripte wurden ausgeführt. Der Origin dieses Frames ist: {v}
Formular absenden
Pop-up öffnen
Alert anzeigen
Formular wurde abgesendet.
Formular wurde nicht abgesendet.
Pop-up wurde geöffnet (und wieder geschlossen).
Pop-up blockiert: window.open hat null zurückgegeben.
Alert wurde angezeigt.
Alert blockiert: Er kehrte sofort zurück, ohne etwas anzuzeigen.