Element: innerHTML Eigenschaft

Wert

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

Das Setzen der Eigenschaft akzeptiert entweder ein TrustedHTML-Objekt oder einen String. Dieser Wert wird als HTML analysiert und ersetzt alle Nachkommen des Elements mit dem Ergebnis. Wenn auf den null Wert gesetzt wird, wird dieser null Wert in den leeren String ("") konvertiert, sodass elt.innerHTML = null gleichbedeutend ist mit elt.innerHTML = "".

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wird, 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 von einer CSP durchgesetzt werden und keine Standardrichtlinie definiert ist.

NoModificationAllowedError DOMException

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

Beschreibung

innerHTML ruft eine Serialisierung der verschachtelten Kind-DOM-Elemente innerhalb des Elements ab 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 als < und > serialisieren, wenn sie in Attributwerten erscheinen (siehe Browser-Kompatibilität). Dies dient dazu, eine potenzielle Sicherheitslücke (Mutation XSS) zu verhindern, bei der ein Angreifer Eingaben gestalten kann, die eine Sanitierungsfunktion umgehen und einen Cross-Site-Scripting (XSS) Angriff ermöglichen.

Überlegungen zum Shadow DOM

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

In ähnlicher Weise, wenn der Elementinhalt mit innerHTML gesetzt wird, wird der HTML-String in DOM-Elemente analysiert, die keine Shadow Roots enthalten. Zum Beispiel wird <template> als HTMLTemplateElement analysiert, unabhängig davon, ob das shadowrootmode-Attribut angegeben ist oder nicht. Um den Inhalt eines Elements aus einem HTML-String, der deklarative Shadow Roots enthält, zu setzen, 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 Strings, die von einem Benutzer bereitgestellt werden, in das DOM eingefügt werden, ohne vorher gereinigt zu werden. Während die Eigenschaft verhindert, dass <script>-Elemente ausgeführt werden, wenn sie injiziert werden, ist sie anfällig für viele andere Möglichkeiten, wie Angreifer HTML gestalten können, um bösartigen JavaScript-Code auszuführen. Zum Beispiel würde das folgende Beispiel den Code im error Event-Handler 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 verringern, indem Sie immer TrustedHTML Objekte anstelle von Strings zuweisen und vertrauenswürdige Typen durchsetzen mit der CSP-Direktive require-trusted-types-for. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geführt wird, die die Möglichkeit hat, die Eingabe zu sanitieren, um potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.

Beispiele

Lesen der HTML-Inhalte eines Elements

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

Angenommen, 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 verringern, erstellen wir zuerst ein TrustedHTML Objekt aus dem String, der das HTML enthält, und weisen dieses Objekt dann innerHTML zu.

Vertrauenswürdige Typen werden noch nicht von allen Browsern unterstützt, deshalb definieren wir zunächst den tinyfill von Trusted Types. 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 Transformation eines Eingabestrings in TrustedHTML Instanzen definiert. In der Regel verwenden Implementierungen von createHTML() eine Bibliothek wie DOMPurify, um die Eingabe wie unten gezeigt zu sanitieren:

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

Dann verwenden wir dieses policy Objekt, um ein TrustedHTML Objekt aus dem potenziell unsicheren Eingabestring 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 einen XML-String: XMLSerializer
• Element.getHTML()
• ShadowRoot.getHTML()
• Element.setHTMLUnsafe()
• ShadowRoot.setHTMLUnsafe()
• Trusted Types API