Element: innerHTML-Eigenschaft

Wert

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

Das Setzen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder einen String. Dieser Wert wird als HTML geparst und alle Nachfahren des Elements werden durch das Ergebnis ersetzt. Beim Setzen auf den Wert null wird dieser null-Wert in den leeren String ("") konvertiert, 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 kein wohlgeformtes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf einen String gesetzt wird, während Trusted Types durch eine CSP erzwungen werden und keine Standard-Policy definiert ist.

NoModificationAllowedError DOMException

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

Beschreibung

innerHTML ruft eine Serialisierung der verschachtelten untergeordneten DOM-Elemente innerhalb des Elements ab oder setzt HTML bzw. XML, 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 dient dazu, eine potenzielle Sicherheitslücke (Mutation XSS) zu verhindern, bei der ein Angreifer Eingaben erstellen kann, die eine Sanitization-Funktion umgehen und dadurch einen Cross-Site-Scripting-(XSS)-Angriff ermöglichen.

Überlegungen zum Shadow DOM

Die aus der Eigenschaft gelesene Serialisierung des DOM-Baums enthält keine Shadow Roots — wenn Sie einen HTML-String abrufen möchten, der Shadow Roots enthält, müssen Sie stattdessen die Methoden Element.getHTML() oder ShadowRoot.getHTML() verwenden.

Ebenso wird der HTML-String beim Setzen des Elementinhalts mit innerHTML in DOM-Elemente geparst, die keine Shadow Roots enthalten. So wird beispielsweise <template> als HTMLTemplateElement geparst, unabhängig davon, ob das Attribut shadowrootmode angegeben ist. Um den Inhalt eines Elements aus einem HTML-String zu setzen, der 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 Strings ohne vorherige Sanitization in das DOM eingefügt werden. Obwohl die Eigenschaft verhindert, dass <script>-Elemente ausgeführt werden, wenn sie eingefügt werden, ist sie anfällig für viele andere Arten, auf die Angreifer HTML erstellen können, um bösartiges JavaScript auszuführen. Das folgende Beispiel würde beispielsweise 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 mindern, indem Sie immer TrustedHTML-Objekte anstelle von Strings 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 sanitizen, 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 HTML der innerHTML-Eigenschaft des Elements zuweisen. Um das XSS-Risiko zu mindern, erstellen wir zuerst ein TrustedHTML-Objekt aus dem String, der das HTML enthält, und weisen dieses Objekt dann innerHTML zu.

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

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

Anschließend verwenden wir dieses policy-Objekt, um aus dem potenziell unsicheren Eingabe-String 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 einen XML-String serialisieren: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API