Was ist ein Sandbox-Iframe?

Ein Sandbox-Iframe ist ein eingebettetes Browserdokument mit zusätzlichen Einschränkungen, die von den Iframes angewendet werden Sandkasten Attribut. Mit einem leeren Sandkasten Wert, der Browser startet von einer restriktiven Grundlinie; individuell erlauben-* Token geben nur die Funktionen zurück, die der eingebettete Inhalt benötigt. Für eine HTML-Vorschau ist das sicherste nützliche Design nicht „dem Code vertrauen“. Es geht darum, „der Vorschau eine separate Grenze zu geben, die Mindestberechtigungen hinzuzufügen und Geheimnisse aus dem Experiment herauszuhalten.“

Was ändert sich, wenn ein Iframe in einer Sandbox gespeichert wird?

Ein gewöhnlicher Iframe erstellt einen verschachtelten Browserkontext. Same-Origin-Richtlinie, Berechtigungsrichtlinie, Inhaltssicherheitsrichtlinie und die eigenen Header der Frame-Site sind weiterhin wichtig, aber dem Frame werden nicht automatisch alle Browserfunktionen entzogen.

Hinzufügen Sandkasten fordert den Browser auf, eine zusätzliche Reihe von Einschränkungen aufzuerlegen. Die WHATWG HTML Standard definiert das Attribut als einen ungeordneten, durch Leerzeichen getrennten Satz von Token. Wenn kein Token vorhanden ist, bleibt die entsprechende Sandbox-Einschränkung bestehen. Durch das Hinzufügen eines Tokens wird eine bestimmte Einschränkung aufgehoben.

Diese Richtung kann leicht falsch verstanden werden:

```html

<iframe sandbox srcdoc="<p>Statische Vorschau</p>"></iframe>

```

Dies ist die restriktive Form. Es bedeutet nicht „keine Sandbox-Optionen ausgewählt“. Dies bedeutet, dass die Sandbox aktiv ist und keine ihrer optionalen Funktionen wiederhergestellt wurde.

```html

<iframe

sandbox="allow-scriptsallow-forms"

srcdoc="<button type='button'>Ausführen</button>">

</iframe>

```

Diese Version erlaubt Skripte und Formularverhalten, während andere Einschränkungen bestehen bleiben. Das genaue Sicherheitsergebnis hängt immer noch davon ab, woher der Inhalt kommt und was die umgebende Anwendung offenlegt.

Welche Einschränkungen gelten standardmäßig?

Der vollständige Standard enthält mehr Details als eine Checkliste, aber diese Kategorien erklären die meisten Vorschauverhalten.

Die MDN-Iframe-Referenz listet die aktuellen Token auf und erklärt, was jedes einzelne wiederherstellt. Überprüfen Sie diese Referenz, anstatt eine alte Tokenliste in eine langlebige Sicherheitskontrolle zu kopieren.

Was ermöglichen die allgemeinen Wiederherstellungstokens?

Betrachten Sie jeden Token als eine Fähigkeitsentscheidung und nicht als einen Komfortschalter.

Einige Token interagieren. Es ist notwendig, sie einzeln zu überprüfen, aber nicht ausreichend. Der Ursprung des gerahmten Dokuments, ggf srcdoc oder eine Remote-URL, die Inhaltssicherheitsrichtlinie des Hosts und jede Nachrichtenbrücke zwischen Frame und übergeordnetem Frame wirken sich alle auf die Grenze aus.

Das Diagramm beschreibt eine Berechtigungsgrenze. Es wird nicht behauptet, dass ein Tokensatz beliebigen Code unschädlich macht.

Warum ist ein undurchsichtiger Ursprung wichtig?

Ohne gleichen Ursprung zulassenSandbox-Inhalte werden so behandelt, als kämen sie von einem speziellen Ursprung, der die normalen Prüfungen auf denselben Ursprung nicht besteht. Entwickler nennen dies oft einen undurchsichtigen oder einzigartigen Ursprung.

Für eine Inline srcdoc Vorschau, diese Trennung ist wertvoll. Die Vorschau kann ein Dokument rendern, ohne dass es als derselbe Anwendungsursprung wie die Editorseite behandelt wird. Es kann nicht einfach auf das übergeordnete DOM zugreifen oder den Speicher desselben Ursprungs lesen, als wäre es eine weitere Komponente des Hosts.

Undurchsichtiger Ursprung bedeutet nicht „offline“ oder „Netzwerk deaktiviert“. Wenn Skripte zulässig sind, kann der Vorschaucode weiterhin Netzwerkanfragen stellen, die die Browserrichtlinien und das Ziel zulassen. Es kann CPU und Speicher nutzen, sein eigenes DOM manipulieren und über Kanäle kommunizieren, die der Host bewusst offenlegt. Die Grenze reduziert die Autorität; Der Code wird dadurch nicht zertifiziert.

MDN warnt insbesondere vor Kombinationen Allow-Skripte und gleichen Ursprung zulassen wenn der eingebettete Inhalt denselben Ursprung hat und sein eigenes Sandbox-Attribut entfernen kann. Die wichtige Lektion ist kontextabhängig: Stellen Sie nicht beide Funktionen wieder her, nur weil ein Beispiel ohne sie fehlschlägt.

Wie konfiguriert die ClockTools-Vorschau ihre Sandbox?

Das Leben ClockTools Echtzeit-Editor HTML Erstellt die Vorschau mit srcdoc. Wenn JavaScript aktiviert ist, lautet der Iframe-Sandbox-Wert:

Erlaube-Skripte, Erlaube-Formulare, Erlaube-Modale

Die Implementierung verzichtet bewusst darauf gleichen Ursprung zulassen, Popups zulassen, Top-Navigationsberechtigungen und Download-Berechtigungen. Die Benutzeroberfläche kennzeichnet die Vorschau als Undurchsichtiger SandkastenDadurch wird die Ursprungsentscheidung sichtbar gemacht, anstatt sie im Quellcode zu verbergen.

Diese Konfiguration unterstützt gängige Lehrbeispiele: Skripte können die Vorschau aktualisieren, Formulare können Browservalidierung und Übermittlungsverhalten ausüben und modale Beispiele können ausgeführt werden. Es wandelt unbekannten Code nicht in vertrauenswürdigen Code um. Die eigene Anleitung des Herausgebers fordert Benutzer daher auf, Geheimnisse zu vermeiden und unbekannte Skripte zu überprüfen.

Die Seite erfasst auch Konsolenmeldungen und stellt ein Fenster zur Dokumentenprüfung bereit. Dabei handelt es sich um Beobachtbarkeitsfunktionen, nicht um Sandbox-Berechtigungen. Ein Konsolenfenster hilft bei der Erklärung eines Fehlers. es verhindert nicht eine Anfrage. Eine strukturelle Prüfung kann ein fehlendes Etikett aufdecken; Es wird keine vollständige Sicherheitsüberprüfung durchgeführt.

Was hat ein Fähigkeitscheck ergeben?

Ich habe das gerenderte Vorschauelement im Live-Arbeitsbereich ClockTools überprüft, anstatt mich nur auf Marketingtext zu verlassen.

Der Iframe-Titel lautete „Live HTML-Vorschau“, was der unterstützenden Technologie auch eine Zweckbezeichnung für das eingebettete Dokument verleiht.

Diese Inspektion bestätigt die konfigurierte Grenze zu diesem Zeitpunkt. Es beweist nicht, dass jedes mögliche Skript sicher ist, und es ersetzt nicht eine Überprüfung der Nachrichtenbrücke, der Handhabung externer Ressourcen, der Inhaltssicherheitsrichtlinie oder zukünftiger Codeänderungen.

Welche Token-Kombinationen verdienen besondere Vorsicht?

Verwenden Sie eine bedrohungsbasierte Überprüfung anstelle eines universellen Token-Rezepts.

Allow-Skripte plus gleichen Ursprung zulassen

Dieses Paar kann die Isolierung erheblich schwächen, wenn das eingebettete Dokument denselben Ursprung hat, und seine Einbettungsbedingungen beeinflussen. Wenn beides erforderlich ist, stellen Sie nicht vertrauenswürdige Inhalte von einem bewusst separaten Ursprung bereit und analysieren Sie die Fluchtwege, anstatt das Attribut als einzige Grenze zu betrachten.

Formulare plus Netzwerkzugriff

Formulare zulassen stellt die Übermittlung wieder her, aber Skripte und gewöhnliche HTML-Elemente können Anfragen auch auf andere Weise senden. Geben Sie niemals Zugangsdaten, private Kundendaten oder Inhabertokens in eine nicht vertrauenswürdige Vorschau ein und gehen Sie davon aus, dass die Sandbox sie enthält.

Popups plus Escape-Verhalten

Popups zulassen Lässt einen Frame einen neuen Browserkontext öffnen. Erlaube-Popups-zu-Escape-Sandbox Lässt den neuen Kontext geerbte Sandbox-Flags vermeiden. Das kann bei einer bewusst isolierten Anzeige oder einem externen Link sinnvoll sein, erweitert aber die Bewertungsoberfläche.

Top-Navigation

Top-Navigationsberechtigungen ermöglichen es dem Frame, unter definierten Bedingungen die Hostseite zu ersetzen. Ein Code-Spielplatz braucht das selten. Wenn die Navigation Teil der Lektion ist, sollten Sie erwägen, das Ziel abzufangen und anzuzeigen, anstatt die Vorschausteuerung für die Seite der obersten Ebene zu gewähren.

Was kann eine Sandbox nicht schützen?

Eine Sandbox ist ein Browsermechanismus und keine vollständige Plattform für feindlichen Code.

• Es hindert einen Benutzer nicht daran, denselben Inhalt direkt außerhalb des Frames zu öffnen.
• Es ist keine Garantie dafür, dass zulässige Skripte schnell, höflich oder frei von Endlosschleifen sind.
• Es blockiert nicht automatisch jede Netzwerkanfrage.
• Es bereinigt weder HTML noch beweist es, dass eine URL sicher ist.
• Bereits in der Vorschau platzierte Geheimnisse werden nicht gesichert.
• Es ersetzt nicht die serverseitige Validierung für echte Formulare.
• Zugänglichkeit, Semantik oder browserübergreifendes Verhalten werden nicht überprüft.
• Es schützt keinen anderen Dienst, der eine Anfrage aus der Vorschau akzeptiert.

Die Grenze ändert sich auch im Laufe der Zeit, da sich Browser und Standards weiterentwickeln. Das Funktionsverhalten sollte in den Browsern getestet werden, die die Zielgruppe tatsächlich verwendet, und die Token-Liste sollte anhand der aktuellen Spezifikationen überprüft werden.

Wie sollte man eine Browsercode-Vorschau gestalten?

Beginnen Sie mit dem Leeren Sandkasten Attribut hinzufügen und dann jeweils eine Funktion hinzufügen. Erstellen Sie für jede Ergänzung einen kleinen Akzeptanztest und einen entsprechenden Missbrauchstest.

Halten Sie das Nachrichtenprotokoll des übergeordneten Frames eng. Überprüfen Sie den Absender, die Nachrichtenform und die zulässigen Befehle. Akzeptieren Sie keinen willkürlichen Code oder Navigationsanweisungen über eine allgemeine „Ausführen“-Nachricht, es sei denn, es handelt sich dabei um das explizit isolierte Produkt, das Sie erstellen möchten.

Bieten Sie einen JavaScript-Aus-Modus für die statische Inspektion an. Fügen Sie Steuerelemente zum Stoppen, Zurücksetzen oder Neuladen für außer Kontrolle geratene Beispiele hinzu. Oberflächenkonsolenfehler ohne Spiegelung vertraulicher übergeordneter Daten in den Frame. Behandeln Sie externe Stylesheets und Skripte als Netzwerkabhängigkeiten, deren Hosts und zukünftige Inhalte außerhalb der Kontrolle des Herausgebers liegen.

Für ein gezieltes Experiment ist die Echtzeit-HTML-Editor macht reaktionsfähige Breiten, Konsolenerfassung, Prüfungen und seinen undurchsichtigen Sandbox-Status verfügbar. Für Release-Arbeiten, die Pakete, Server, Anmeldeinformationen, Tests oder Bereitstellungen betreffen, verschieben Sie den Code in ein lokales Repository und verwenden Sie einen umfassenderen Entwicklungs- und Sicherheitsüberprüfungs-Workflow.