Element: innerHTML-Eigenschaft

Wert

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

Das Festlegen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder eine Zeichenfolge. Es analysiert diesen Wert als HTML und ersetzt alle Nachkommen des Elements mit dem Ergebnis. Wenn der Wert null ist, wird dieser null-Wert in die leere Zeichenfolge ("") konvertiert, sodass elt.innerHTML = null gleichbedeutend mit elt.innerHTML = "" ist.

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wurde, den Wert von innerHTML mit einer Zeichenfolge zu setzen, die kein korrekt geformtes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, während Trusted Types durch eine CSP erzwungen 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 Kind-DOM-Elemente innerhalb des Elements oder setzt HTML oder XML, die analysiert 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 erscheinen (siehe Browser-Kompatibilität). Dies soll eine potenzielle Sicherheitslücke (Mutation XSS) verhindern, bei der ein Angreifer eine Eingabe erstellen kann, die eine Sanisierungsfunktion umgeht und somit einen Cross-Site-Scripting (XSS)-Angriff ermöglicht.

Überlegungen zum Shadow DOM

Die Serialisierung des vom Attribut gelesenen DOM-Baums umfasst keine Schattenwurzeln — wenn Sie eine HTML-Zeichenfolge erhalten möchten, die Schattenwurzeln enthält, müssen Sie stattdessen die Methoden Element.getHTML() oder ShadowRoot.getHTML() verwenden.

Ebenso wird beim Festlegen von Elementinhalten mit innerHTML die HTML-Zeichenfolge in DOM-Elemente geparst, die keine Schattenwurzeln enthalten. Zum Beispiel wird <template> als HTMLTemplateElement geparst, unabhängig davon, ob das Attribut shadowrootmode angegeben ist oder nicht. Um den Inhalt eines Elements von einer HTML-Zeichenfolge aus festzulegen, die deklarative Schattenwurzeln enthält, 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 Zeichenfolgen, die von einem Benutzer bereitgestellt werden, in das DOM injiziert werden, ohne zuvor saniert zu werden. Während die Eigenschaft verhindert, dass <script>-Elemente beim Einfügen ausgeführt werden, ist sie anfällig für viele andere Möglichkeiten, bei denen Angreifer HTML erstellen können, um bösartigen JavaScript-Code auszuführen. Zum Beispiel würde das folgende Beispiel den Code im error-Ereignishandler ausführen, da 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 Zeichenfolgen zuweisen und Trusted Types durchsetzen mithilfe der CSP-Direktive require-trusted-types-for. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu sanisieren und potenziell gefährliches Markup zu entfernen, bevor es injiziert wird.

Beispiele

Lesen des HTML-Inhalts eines Elements

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

Angenommen, Sie haben das folgende HTML:

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

Sie können das Markup für den 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 das DOM eines Elements ersetzen, indem wir HTML an die innerHTML-Eigenschaft des Elements zuweisen. Um das Risiko von XSS zu mindern, erstellen wir zuerst ein TrustedHTML-Objekt aus der Zeichenfolge, die das HTML enthält, und weisen dann dieses Objekt innerHTML zu.

Trusted Types werden noch nicht in allen Browsern unterstützt, daher definieren wir zuerst den trusted types tinyfill. Dies 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 eine createHTML() für die Umwandlung einer Eingabezeichenfolge in TrustedHTML-Instanzen definiert. Üblicherweise verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe wie unten gezeigt zu sanisieren:

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

Dann verwenden wir dieses policy-Objekt, um ein TrustedHTML-Objekt aus der potenziell unsicheren Eingabezeichenfolge 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
• Parsen von HTML oder XML in einen DOM-Baum: DOMParser
• Serialisieren eines DOM-Baums in eine XML-Zeichenfolge: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API