Element: innerHTML-Eigenschaft

Wert

Beim Abrufen der Eigenschaft wird eine Zeichenkette zurückgegeben, die die HTML-Serialisierung der Nachfahren des Elements enthält.

Beim Setzen der Eigenschaft wird entweder ein TrustedHTML-Objekt oder eine Zeichenkette akzeptiert. Dieser Wert wird als HTML geparst und ersetzt alle Nachfahren des Elements durch das Ergebnis. Beim Setzen auf den Wert null wird dieser null-Wert in die leere Zeichenkette ("") umgewandelt, sodass elt.innerHTML = null gleichbedeutend mit elt.innerHTML = "" ist.

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einer Zeichenkette festzulegen, die kein wohlgeformtes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenkette gesetzt wird, während Trusted Types durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

NoModificationAllowedError DOMException

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

Beschreibung

innerHTML ruft eine Serialisierung der verschachtelten untergeordneten DOM-Elemente innerhalb des Elements ab oder legt HTML bzw. XML fest, das geparst werden soll, um den DOM-Baum innerhalb des Elements zu ersetzen.

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

Überlegungen zu Shadow DOM

Die Serialisierung des DOM-Baums, die aus der Eigenschaft gelesen wird, enthält keine Shadow Roots — wenn Sie eine HTML-Zeichenkette einschließlich Shadow Roots abrufen möchten, müssen Sie stattdessen die Methoden Element.getHTML() oder ShadowRoot.getHTML() verwenden.

Ebenso wird die HTML-Zeichenkette beim Festlegen des Elementinhalts mit innerHTML in DOM-Elemente geparst, die keine Shadow Roots enthalten. Beispielsweise wird <template> als HTMLTemplateElement geparst, unabhängig davon, ob das Attribut shadowrootmode angegeben ist. Um den Inhalt eines Elements aus einer HTML-Zeichenkette festzulegen, die deklarative Shadow Roots enthält, müssen Sie stattdessen Element.setHTMLUnsafe() oder ShadowRoot.setHTMLUnsafe() verwenden.

Sicherheitsaspekte

Die innerHTML-Eigenschaft ist wahrscheinlich der häufigste Vektor für Angriffe durch Cross-Site Scripting (XSS), bei denen potenziell unsichere, von einem Benutzer bereitgestellte Zeichenketten in das DOM eingefügt werden, ohne zuvor bereinigt zu werden. Obwohl die Eigenschaft verhindert, dass <script>-Elemente bei ihrer Einfügung ausgeführt werden, ist sie für viele andere Möglichkeiten anfällig, mit denen Angreifer HTML erstellen können, das bösartiges JavaScript ausführt. Beispielsweise würde das folgende Beispiel den Code im error-Event-Handler ausführen, weil der src-Wert des <img> kein gültiger Bild-URL ist:

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

Sie können diese Probleme verringern, indem Sie immer TrustedHTML-Objekte statt Zeichenketten zuweisen und Trusted Types mithilfe der CSP-Direktive require-trusted-types-for erzwingen. Dadurch wird sichergestellt, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu bereinigen, um potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.

Beispiele

Den HTML-Inhalt eines Elements lesen

Das Lesen von innerHTML veranlasst den User-Agent, die Nachfahren des Elements zu serialisieren.

Bei folgendem HTML:

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

können Sie das Markup für den Inhalt des äußeren <div> wie gezeigt abrufen und protokollieren:

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

Den Inhalt eines Elements ersetzen

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

Trusted Types werden noch nicht von allen Browsern unterstützt, daher definieren wir zunächst den Trusted-Types-Tinyfill. Dieser dient 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 ein createHTML() zum Umwandeln einer Eingabezeichenkette in TrustedHTML-Instanzen definiert. Üblicherweise verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe wie unten gezeigt zu bereinigen:

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

Anschließend verwenden wir dieses policy-Objekt, um aus der potenziell unsicheren Eingabezeichenkette ein TrustedHTML-Objekt zu erstellen, und weisen das Ergebnis dem Element zu:

// 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
• HTML oder XML in einen DOM-Baum parsen: DOMParser
• Einen DOM-Baum in eine XML-Zeichenkette serialisieren: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API