DieinnerHTML-Eigenschaft desElement Interface erhält oder setzt das HTML- oder XML-Markup, das innerhalb des Elements enthalten ist, und lässt dabei dieShadow Roots in beiden Fällen aus.

Um das HTML in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen, verwenden Sie die MethodeinsertAdjacentHTML().

Wert

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

Das Setzen der Eigenschaft akzeptiert entweder einTrustedHTML Objekt oder eine Zeichenkette. Dieser Wert wird als HTML analysiert und alle Nachkommen des Elements werden durch das Ergebnis ersetzt.Wennnull festgelegt wird, wird diesernull-Wert in die leere Zeichenkette ("") umgewandelt, sodasselt.innerHTML = null gleichbedeutend mitelt.innerHTML = "" ist.

Ausnahmen

SyntaxErrorDOMException

Wird ausgelöst, wenn versucht wurde, den Wert voninnerHTML mit einer Zeichenkette festzulegen, die kein korrekt geformtes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenkette gesetzt wird, wennTrusted Typesdurch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

NoModificationAllowedErrorDOMException

Wird ausgelöst, wenn versucht wurde, das HTML in einen Knoten einzufügen, dessen Elternknoten einDocument ist.

Beschreibung

innerHTML erhält eine Serialisierung der verschachtelten Kind-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 ähnlich wie< und> serialisieren, wenn sie in Attributwerten erscheinen (sieheBrowser-Kompatibilität).Dies dient dem Schutz vor einer potenziellen Sicherheitslücke (Mutation XSS), bei der ein Angreifer Eingaben erstellen kann, die eineBereinigungsfunktion umgehen und einen Cross-Site Scripting (XSS) Angriff ermöglichen.

Überlegungen zum Shadow DOM

Die Serialisierung des DOM-Baums, die aus der Eigenschaft gelesen wird, schließt keineShadow Roots ein – wenn Sie eine HTML-Zeichenkette erhalten möchten, die Shadow Roots enthält, müssen Sie stattdessen die MethodenElement.getHTML() oderShadowRoot.getHTML() verwenden.

Ähnlich verhält es sich, wenn Sie den Inhalt eines Elements mitinnerHTML setzen, wird die HTML-Zeichenkette in DOM-Elemente geparst, die keine Shadow Roots enthalten.So wird zum Beispiel<template> alsHTMLTemplateElement geparst, unabhängig davon, ob dasshadowrootmode Attribut angegeben ist oder nicht.Um den Inhalt eines Elements aus einer HTML-Zeichenkette zu setzen, die deklarative Shadow Roots enthält, müssen Sie stattdessenElement.setHTMLUnsafe() oderShadowRoot.setHTMLUnsafe() verwenden.

Sicherheitsüberlegungen

DieinnerHTML-Eigenschaft ist wahrscheinlich das häufigste Einfallstor fürCross-Site Scripting (XSS) Angriffe, bei denen potenziell unsichere Zeichenfolgen von einem Benutzer bereitgestellt und in den DOM eingefügt werden, ohne vorher gereinigt zu werden.Obwohl die Eigenschaft verhindert, dass<script> Elemente ausgeführt werden, wenn sie eingefügt werden, ist sie dennoch anfällig für viele andere Methoden, mit denen Angreifer HTML erstellen können, um bösartigen JavaScript-Code auszuführen.Zum Beispiel würde das folgende Beispiel den Code imerror-Ereignishandler ausführen, 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

Diese Probleme können gemindert werden, indem Sie immerTrustedHTML Objekte statt Zeichenfolgen zuweisen undvertrauenswürdige Typen erzwingen unter Verwendung derrequire-trusted-types-for CSP-Direktive.Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingaben zubereinigen, um potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.

Beispiele

Lesen des HTML-Inhalts eines Elements

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

Angesichts des folgenden HTML:

<div>  <p>My name is Joe</p></div>

Können Sie den Markup-Inhalt des äußeren<div> wie folgt abrufen und protokollieren:

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

Ersetzen des Inhalts eines Elements

In diesem Beispiel werden wir den DOM eines Elements ersetzen, indem wir HTML in dieinnerHTML-Eigenschaft des Elements zuweisen.Um das Risiko von XSS zu minimieren, erstellen wir zunächst einTrustedHTML Objekt aus der Zeichenkette, die das HTML enthält, und weisen dieses Objekt danninnerHTML zu.

Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, daher definieren wir zuerst dastrusted 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 eineTrustedTypePolicy, die eincreateHTML() für die Umwandlung einer Eingabezeichenfolge inTrustedHTML Instanzen definiert.Üblicherweise verwenden Implementierungen voncreateHTML() eine Bibliothek wieDOMPurify, um die Eingabe wie unten gezeigt zu bereinigen:

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

Dann verwenden wir diesespolicy Objekt, um einTrustedHTML Objekt aus der potenziell unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:

// The potentially malicious stringconst untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";// Create a TrustedHTML instance using the policyconst 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 undHTMLElement.innerText
• Element.insertAdjacentHTML()
• Element.outerHTML
• Parsen von HTML oder XML in einen DOM-Baum:DOMParser
• Serialisieren eines DOM-Baums in eine XML-Zeichenkette:XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API