Element: innerHTML-Eigenschaft

Wert

Das Abrufen der Eigenschaft gibt einen String zurück, der die HTML-Serialisierung der Nachkommen des Elements enthält.

Das Setzen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder einen String. Es analysiert diesen Wert als HTML und ersetzt alle Nachkommen des Elements mit dem Ergebnis. Wenn er auf den Wert null gesetzt wird, wird dieser null-Wert in den leeren String ("") umgewandelt, sodass elt.innerHTML = null gleichbedeutend mit elt.innerHTML = "" ist.

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einem String zu setzen, der nicht korrekt formatiertes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf einen String gesetzt wird, während vertrauenswürdige Typen durch eine CSP durchgesetzt werden und keine Standardrichtlinie definiert ist.

NoModificationAllowedError DOMException

Wird ausgelöst, wenn versucht wurde, das HTML in einen Knoten einzufügen, dessen Elternteil ein Document ist.

Beschreibung

innerHTML erhält eine Serialisierung der verschachtelten untergeordneten DOM-Elemente innerhalb des Elements oder setzt HTML oder XML, das analysiert werden soll, um den DOM-Baum innerhalb des Elements zu ersetzen.

Beachten Sie, dass einige Browser die <- und >-Zeichen als < und > serialisieren, wenn sie in Attributwerten erscheinen (siehe Browser-Kompatibilität). Dies soll eine potenzielle Sicherheitslücke (Mutation XSS) verhindern, bei der ein Angreifer Eingaben erstellen kann, die eine Sanitisierungsfunktion umgehen, um einen Cross-Site-Scripting (XSS)-Angriff zu ermöglichen.

Überlegungen zum Shadow DOM

Die Serialisierung des DOM-Baums, der aus der Eigenschaft gelesen wird, schließt Shadow Roots nicht ein — wenn Sie eine HTML-Zeichenfolge erhalten möchten, die Shadow Roots einschließt, müssen Sie stattdessen die Methoden Element.getHTML() oder ShadowRoot.getHTML() verwenden.

Ähnlich wird bei der Einstellung von Elementinhalten mit innerHTML die HTML-Zeichenfolge in DOM-Elemente geparst, die keine Shadow Roots enthalten. Zum Beispiel wird <template> als HTMLTemplateElement geparst, unabhängig davon, ob das shadowrootmode-Attribut angegeben ist oder nicht. Um die Inhalte eines Elements aus einer HTML-Zeichenfolge zu setzen, die deklarative Shadow Roots einschließt, müssen Sie stattdessen Element.setHTMLUnsafe() oder ShadowRoot.setHTMLUnsafe() verwenden.

Sicherheitsüberlegungen

Die innerHTML-Eigenschaft ist wahrscheinlich der häufigste Vektor für Cross-Site-Scripting (XSS)-Angriffe, bei denen potenziell unsichere Strings, die von einem Benutzer bereitgestellt werden, in den DOM injiziert werden, ohne vorher bereinigt zu werden. Obwohl die Eigenschaft die Ausführung von <script>-Elementen verhindert, wenn sie injiziert werden, ist sie anfällig für viele andere Möglichkeiten, wie Angreifer HTML erstellen können, um bösartigen JavaScript-Code auszuführen. Zum Beispiel würde der folgende Code im error-Event-Handler ausgeführt werden, weil der <img>-src-Wert keine gültige Bild-URL ist:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

Sie können diese Probleme mindern, indem Sie immer TrustedHTML-Objekte anstelle von Strings zuweisen und die vertrauenswürdigen Typen mit der require-trusted-types-for-CSP-Direktive durchsetzen. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu sanitizen, um potenziell gefährliches Markup zu entfernen, bevor es injiziert wird.

Beispiele

Lesen des HTML-Inhalts eines Elements

Das Lesen von innerHTML veranlasst den Benutzeragenten, die Nachkommen des Elements zu serialisieren.

Angenommen, folgendes HTML:

<div id="example">
  <p>My name is Joe</p>
</div>

Sie können das Markup für die Inhalte des äußeren <div> wie folgt erhalten und protokollieren:

const myElement = document.querySelector("#example");
const contents = myElement.innerHTML;
console.log(contents); // "\n  <p>My name is Joe</p>\n"

Ersetzen der Inhalte eines Elements

In diesem Beispiel ersetzen wir das DOM eines Elements, indem wir HTML der innerHTML-Eigenschaft des Elements zuweisen. Um das Risiko von XSS zu mindern, erstellen wir zunächst ein TrustedHTML-Objekt aus dem String, der das HTML enthält, und weisen dann dieses Objekt innerHTML zu.

Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, daher definieren wir zunächst das trusted types tinyfill. Dies fungiert als transparenter Ersatz für die JavaScript-API der vertrauenswürdigen Typen:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Als nächstes erstellen wir eine TrustedTypePolicy, die eine createHTML() definiert, um einen Eingabestring in TrustedHTML-Instanzen zu transformieren. Normalerweise verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe wie unten gezeigt zu sanitize:

const policy = trustedTypes.createPolicy("my-policy", {
  createHTML: (input) => DOMPurify.sanitize(input),
});

Dann verwenden wir dieses policy-Objekt, um aus dem potenziell unsicheren Eingabestring ein TrustedHTML-Objekt 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.innerHTML = trustedHTML;

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Node.textContent und HTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• Parsen von HTML oder XML in einen DOM-Baum: DOMParser
• Serialisierung eines DOM-Baums in eine XML-Zeichenfolge: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API