Element: innerHTML-Eigenschaft

Wert

Beim Lesen der Eigenschaft wird eine Zeichenfolge mit der HTML-Serialisierung der Nachfahren des Elements zurückgegeben.

Beim Setzen akzeptiert die Eigenschaft entweder ein TrustedHTML-Objekt oder eine Zeichenfolge. Sie verarbeitet diesen Wert als HTML und ersetzt alle Nachfahren des Elements durch das Ergebnis. Wird die Eigenschaft auf den Wert null gesetzt, wird dieser in eine leere Zeichenfolge ("") umgewandelt. Daher ist elt.innerHTML = null gleichbedeutend mit elt.innerHTML = "".

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wird, den Wert von innerHTML mit einer Zeichenfolge zu setzen, die kein korrekt geformtes HTML enthält.

TypeError

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

NoModificationAllowedError DOMException

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

Beschreibung

innerHTML liest eine Serialisierung der verschachtelten DOM-Kindelemente eines Elements oder setzt HTML bzw. XML, das verarbeitet wird, 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). Dadurch soll eine potenzielle Sicherheitslücke (Mutation XSS) verhindert werden, bei der ein Angreifer eine Eingabe so gestalten kann, dass sie eine Bereinigungsfunktion umgeht und dadurch einen Cross-Site-Scripting-Angriff (XSS) ermöglicht.

Besonderheiten des Shadow DOM

Die Serialisierung des DOM-Baums, die aus der Eigenschaft gelesen wird, enthält keine Shadow Roots. Wenn Sie eine HTML-Zeichenfolge mit Shadow Roots benötigen, müssen Sie stattdessen die Methoden Element.getHTML() oder ShadowRoot.getHTML() verwenden.

Ebenso wird eine mit innerHTML zugewiesene HTML-Zeichenfolge in DOM-Elemente ohne Shadow Roots umgewandelt. Beispielsweise wird <template> als HTMLTemplateElement verarbeitet, unabhängig davon, ob das Attribut shadowrootmode angegeben ist. Um den Inhalt eines Elements anhand einer HTML-Zeichenfolge mit deklarativen Shadow Roots zu setzen, müssen Sie stattdessen Element.setHTMLUnsafe() oder ShadowRoot.setHTMLUnsafe() verwenden.

Sicherheitsaspekte

Die Eigenschaft innerHTML ist wahrscheinlich der häufigste Angriffsvektor für Cross-Site-Scripting-Angriffe (XSS): Dabei werden potenziell unsichere, von Benutzern bereitgestellte Zeichenfolgen ohne vorherige Bereinigung in das DOM eingefügt. Die Eigenschaft verhindert zwar, dass eingefügte <script>-Elemente ausgeführt werden, ist aber anfällig für viele andere Möglichkeiten, mit denen Angreifer HTML so gestalten können, dass schädlicher JavaScript-Code ausgeführt wird. Im folgenden Beispiel würde etwa der Code im error-Event-Handler ausgeführt, weil der src-Wert des <img>-Elements keine gültige Bild-URL ist:

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

Sie können diese Risiken verringern, indem Sie stets TrustedHTML-Objekte statt Zeichenfolgen zuweisen und mit der CSP-Direktive require-trusted-types-for die Verwendung von Trusted Types erzwingen. So wird sichergestellt, dass die Eingabe eine Transformationsfunktion durchläuft, die potenziell gefährliches Markup vor dem Einfügen durch Bereinigung entfernen kann.

Beispiele

HTML-Inhalt eines Elements lesen

Beim Lesen von innerHTML serialisiert der User Agent die Nachfahren des Elements.

Gegeben sei das folgende HTML:

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

Sie können das Markup des Inhalts 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"

Inhalt eines Elements ersetzen

In diesem Beispiel ersetzen wir den DOM-Inhalt eines Elements, indem wir seiner Eigenschaft innerHTML HTML zuweisen. Um das XSS-Risiko zu verringern, erstellen wir zunächst aus der Zeichenfolge mit dem HTML ein TrustedHTML-Objekt und weisen dieses Objekt anschließend innerHTML zu.

Trusted Types werden noch nicht von allen Browsern unterstützt. Deshalb definieren wir zuerst den Trusted Types Tinyfill. Er dient als transparenter Ersatz für die JavaScript-API für Trusted Types:

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

Als Nächstes erstellen wir eine TrustedTypePolicy, die eine createHTML()-Methode zum Umwandeln einer Eingabezeichenfolge in TrustedHTML-Instanzen definiert. Implementierungen von createHTML() verwenden häufig 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 Eingabezeichenfolge 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 umwandeln: DOMParser
• Einen DOM-Baum als XML-Zeichenfolge serialisieren: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API