Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
HTMLIFrameElement: `srcdoc`-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Warnung:Diese Eigenschaft analysiert ihren Eingabewert als HTML und schreibt das Ergebnis in das DOM des Rahmens.Solche APIs sind bekannt alsEinspeisepunkte für Injektionen und können potenziell ein Vektor fürCross-Site-Scripting (XSS)-Angriffe sein, wenn die Eingabe ursprünglich von einem Angreifer stammt.
Sie können dieses Risiko mindern, indem Sie immerTrustedHTML-Objekte anstelle von Zeichenfolgen zuweisen undvertrauenswürdige Typen erzwingen.SieheSicherheitsüberlegungen für weitere Informationen.
Diesrcdoc-Eigenschaft der SchnittstelleHTMLIFrameElement ruft das Inline-HTML-Markup des Dokuments des Rahmens ab oder legt es fest.
Wert
Das Abrufen der Eigenschaft gibt eine Zeichenfolge zurück, die die HTML-Serialisierung des Dokuments des Rahmens enthält.Dies istundefined, wenn der Wert nicht gesetzt ist.
Das Setzen der Eigenschaft akzeptiert entweder einTrustedHTML-Objekt oder eine Zeichenfolge.Es analysiert diese Eingabe als ein HTML-Dokument und ersetzt den Inhalt des Rahmens durch das Ergebnis.
Ausnahmen
TypeErrorWird ausgelöst, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, wennvertrauenswürdige Typen durch eine CSPerzwungen sind und keine Standardrichtlinie definiert ist.
Beschreibung
Diesrcdoc-Eigenschaft spiegelt den Inhalt des\<iframe>-Elementssrcdoc-Attributs wider und kann verwendet werden, um das HTML-Dokument zu setzen oder zu erhalten, das zum<iframe> gehört.
Bei der Einstellung der Eigenschaft sollte die Eingabe ein gültiges HTML-Dokument definieren, einschließlich derDokumenttyp-Direktive,<html>,<body> und anderen Tags.Beachten Sie jedoch, dass Browser in der Regel tolerant gegenüber ungültigem Markup sind und die meisten versuchen sollten, Eingaben zu rendern, die nur Körperinhalte enthalten.
Jedes vom Browser unterstützte Markup wird analysiert/serialisiert, einschließlichShadow roots.
Beachten Sie, dass, wenn dies gesetzt ist, es jeden in dersrc Eigenschaft gesetzten Wert überschreiben wird.
Sicherheitsüberlegungen
Diesrcdoc-Eigenschaft ermöglicht es, dass standardmäßig absolut jedes HTML-Markup in einem Rahmen ausgeführt wird.Wenn der Rahmen nicht mit der Content Security Policy (CSP)sandbox-Direktive gesichert ist (oder gesichert, aber den Wertallow-same-origin enthält), dann wird er gleich-origin mit dem übergeordneten Element sein.Das bedeutet, dass der Rahmen vollständigen Zugriff auf das DOM und die Ressourcen des übergeordneten Elements haben wird und umgekehrt.
Dies ist ein signifikanter Vektor fürCross-Site-Scripting (XSS)-Angriffe, wenn potenziell unsichere Zeichenfolgen, die von einem Benutzer bereitgestellt werden, ohne vorherige Sanitärmaßnahmen in einen Rahmen injiziert werden.Betrachten Sie den folgenden Code, in dem ein HTML-String von einem Benutzer in einen Rahmen übergeben werden könnte, der dann dem Dokument hinzugefügt wird.
const untrustedStringFromUser = `<!doctype html><script src="http://evil.com/naughty.js"></script>`;const iframe = document.createElement("iframe");iframe.srcdoc = untrustedStringFromUser;document.body.appendChild(iframe);Wenn nicht erwartet wird, dass der Rahmen Zugriff auf Ihr übergeordnetes Dokument benötigt, können Sie das Risiko mindern, indem Sie einen CSP-Sandbox ohne den Wertallow-same-origin verwenden.Der Rahmen wird dann als cross-origin Ressourcen behandelt, und Angriffe werden erheblich eingeschränkt.Sie können auch eine allgemeinere CSP verwenden, um die Orte einzuschränken, von denen Skripte und andere Ressourcen abgerufen werden dürfen.
Sie können das Risiko weiter verringern, indem Sie immerTrustedHTML Objekte anstelle von Zeichenfolgen zuweisen undvertrauenswürdige Typen durchsetzen mithilfe der CSP-Direktiverequire-trusted-types-for.Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit bietet, die Eingabe zubereinigen, um potenziell gefährliches Markup zu entfernen, bevor es injiziert wird.
Beispiele
Das HTML aus einem Iframe lesen
Das Lesen vonsrcdoc veranlasst den Benutzeragenten, das Dokument des Iframes zu serialisieren.
Angenommen, das folgende HTML:
<iframe srcdoc="<!doctype html><body><p>Hello World!</p></body>"></iframe>Sie können dann das Markup wie folgt abrufen und protokollieren:
const frame = document.querySelector("#example");const frameDoc = frame.srcdoc;console.log(frameDoc); // "<!doctype html><body><p>Hello World!</p></body>"Die Inline-Quelle des Rahmens ersetzen
In diesem Beispiel werden wir das Dokument eines Rahmens ersetzen, indem wir HTML seinersrcdoc-Eigenschaft zuweisen.Um das Risiko von XSS zu mindern, erstellen wir zuerst einTrustedHTML-Objekt aus der Zeichenfolge, die das HTML enthält, und weisen dann dieses Objektsrcdoc zu.
Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, daher definieren wir zuerst dentrusted types tinyfill.Dies funktioniert als transparenter Ersatz für die Trusted Types JavaScript API:
if (typeof trustedTypes === "undefined") trustedTypes = { createPolicy: (n, rules) => rules };Als nächstes erstellen wir eineTrustedTypePolicy, die einecreateHTML() für das Transformieren einer Eingabezeichenfolge inTrustedHTML-Instanzen definiert.In der Regel verwenden Implementierungen voncreateHTML() eine Bibliothek wieDOMPurify, um die Eingabe zu bereinigen, wie unten gezeigt:
const policy = trustedTypes.createPolicy("my-policy", { createHTML: (input) => DOMPurify.sanitize(input),});Dann verwenden wir diesespolicy-Objekt, um einTrustedHTML-Objekt aus der möglicherweise unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:
// The potentially malicious stringconst untrustedString = "<!doctype html><body><p>I might be XSS</p><img src='x' onerror='alert(1)'></body>";// Create a TrustedHTML instance using the policyconst trustedHTML = policy.createHTML(untrustedString);// Inject the TrustedHTML (which contains a trusted string)const frame = document.querySelector("#example");const frameDoc = frame.srcdoc;Warnung:Während Sie eine Zeichenfolge direktsrcdoc zuweisen können, stellt dies einSicherheitsrisiko dar, wenn die einzufügende Zeichenfolge potenziell bösartige Inhalte enthalten könnte.Sie solltenTrustedHTML verwenden, um sicherzustellen, dass der Inhalt bereinigt wird, bevor er eingefügt wird, und Sie sollten einen CSP-Header setzen, umvertrauenswürdige Typen durchzusetzen.
Spezifikationen
| Specification |
|---|
| HTML # dom-iframe-srcdoc |