Baseline Widely available
Das outerHTML-Attribut der Element-Schnittstelle erhält oder setzt das HTML- oder XML-Markup des Elements und seiner Nachkommen, wobei eventuell vorhandene Shadow-Roots in beiden Fällen weggelassen werden.
Um den Inhalt eines Elements zu erhalten oder zu setzen, verwenden Sie stattdessen die innerHTML-Eigenschaft.
Das Abrufen der Eigenschaft gibt eine Zeichenfolge zurück, die eine HTML-Serialisierung des element und seiner Nachkommen enthält.
Das Setzen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder eine Zeichenfolge. Die Eingabe wird als HTML analysiert und ersetzt das Element und alle seine Nachkommen mit dem Ergebnis. Wenn der Wert auf null gesetzt wird, wird dieser null-Wert in die leere Zeichenfolge ("") umgewandelt, sodass element.outerHTML = null gleichbedeutend mit element.outerHTML = "" ist.
NoModificationAllowedError DOMException
Auslösen, wenn versucht wird, outerHTML bei einem Element zu setzen, das ein direktes Kind eines Document ist, wie z. B. Document.documentElement.
SyntaxError DOMException
Auslösen, wenn outerHTML mit einer XML-Eingabe gesetzt wird, die nicht wohlgeformt ist.
TypeError
Auslösen, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, während trusted types durch eine CSP durchgesetzt werden und keine Standardrichtlinie definiert ist.
outerHTML erhält eine Serialisierung des Elements oder setzt HTML oder XML, das analysiert werden soll, um es innerhalb des Elternelements zu ersetzen.
Wenn das Element keinen Elterknoten hat, wird das Setzen seiner outerHTML-Eigenschaft es oder seine Nachkommen nicht verändern. Zum Beispiel:
const div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
console.log(div.outerHTML); // output: "<div></div>"
Auch wenn das Element im Dokument ersetzt wird, hält die Variable, deren outerHTML-Eigenschaft gesetzt wurde, weiterhin eine Referenz auf das ursprüngliche Element:
const p = document.querySelector("p");
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";
Der zurückgegebene Wert wird einige Werte in HTML-Attributen escapen. Hier sehen wir, dass das &-Zeichen escapt wird:
const anchor = document.createElement("a");
anchor.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anchor.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>"
Einige Browser serialisieren auch die < und > Zeichen als < und >, wenn sie in Attributwerten auftreten (siehe Browser-Kompatibilität). Dies dient dazu, eine potenzielle Sicherheitslücke (Mutation XSS) zu verhindern, bei der ein Angreifer Eingaben gestalten kann, um eine Sanitisierungsfunktion zu umgehen, was einen Cross-Site-Scripting (XSS)-Angriff ermöglicht.
Die Serialisierung des DOM-Baums, die aus der Eigenschaft gelesen wird, schlieÃt keine Shadow Roots ein. Wenn Sie eine HTML-Serialisierung eines Elements erhalten möchten, die Shadow Roots einschlieÃt, müssen Sie stattdessen die Element.getHTML()-Methode verwenden. Beachten Sie, dass dies den Inhalt des Elements erhält.
In ähnlicher Weise werden beim Setzen des Inhalts eines Elements mit outerHTML die HTML-Eingaben in DOM-Elemente geparst, die keine Shadow Roots enthalten. So wird beispielsweise <template> als HTMLTemplateElement geparst, unabhängig davon, ob das shadowrootmode Attribut angegeben ist oder nicht. Wenn Sie den Inhalt eines Elements aus einer HTML-Eingabe setzen möchten, die deklarative Shadow Roots enthält, müssen Sie stattdessen Element.setHTMLUnsafe() oder ShadowRoot.setHTMLUnsafe() verwenden.
Die outerHTML-Eigenschaft ist eine potenzielle Angriffsfläche für Cross-Site-Scripting (XSS)-Angriffe, da sie verwendet werden kann, um potenziell unsichere, vom Benutzer bereitgestellte Zeichenfolgen in das DOM einzufügen. Obwohl die Eigenschaft das Ausführen von <script>-Elementen verhindert, wenn sie eingefügt werden, ist sie für viele andere Möglichkeiten anfällig, bei denen Angreifer HTML gestalten können, um bösartigen JavaScript-Code auszuführen. Zum Beispiel würde das folgende Beispiel den Code im error-Ereignishandler ausführen, weil der <img> src-Wert keine gültige Bild-URL ist:
const name = "<img src='x' onerror='alert(1)'>";
element.outerHTML = name; // shows the alert
Sie können diese Probleme mindern, indem Sie immer TrustedHTML-Objekte anstelle von Zeichenfolgen zuweisen und vertrauenswürdige Typen durchsetzen mit der require-trusted-types-for-CSP-Direktive. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu sanitisieren, um potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.
Das Lesen von outerHTML veranlasst den Benutzeragenten, das Element zu serialisieren.
Angesichts des folgenden HTMLs:
<div id="example">
<p>Content</p>
<p>Further Elaborated</p>
</div>
Sie können das Markup für das <div> wie folgt abrufen und protokollieren:
const myElement = document.querySelector("#example");
const contents = myElement.outerHTML;
console.log(contents);
// '<div id="example">\n <p>Content</p>\n <p>Further Elaborated</p>\n</div>'
In diesem Beispiel ersetzen wir ein Element im DOM, indem wir HTML der outerHTML-Eigenschaft des Elements 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 der outerHTML zu.
Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, daher definieren wir zuerst das Trusted Types Tinyfill. Dies fungiert 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() definiert, um eine Eingabezeichenfolge in TrustedHTML-Instanzen zu transformieren. Normalerweise verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe zu sanitisieren, 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 potenziell unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:
// The potentially malicious string
const untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";
// Create a TrustedHTML instance using the policy
const trustedHTML = policy.createHTML(untrustedString);
// Inject the TrustedHTML (which contains a trusted string)
const element = document.querySelector("#container");
element.outerHTML = trustedHTML; // Replaces the element with id "container"
// Note that the #container div is no longer part of the document tree,
Warnung: Obwohl Sie direkt eine Zeichenfolge outerHTML zuweisen können, ist dies ein Sicherheitsrisiko, wenn die einzufügende Zeichenfolge potenziell bösartigen Inhalt enthalten könnte. Sie sollten TrustedHTML verwenden, um sicherzustellen, dass der Inhalt vor dem Einfügen gesäubert wird, und Sie sollten einen CSP-Header setzen, um vertrauenswürdige Typen durchzusetzen.
XMLSerializerDOMParserHTMLElement.outerTextRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4