DieinnerHTML-Eigenschaft derShadowRoot-Schnittstelle erhält oder setzt das HTML-Markup im DOM-Baum innerhalb desShadowRoot.

Wert

Der Zugriff auf die Eigenschaft liefert eine Zeichenfolge, die die HTML-Serialisierung der Nachfahren des Shadow-Roots enthält.

Das Setzen der Eigenschaft akzeptiert entweder einTrustedHTML-Objekt oder eine Zeichenfolge.Dieser Wert wird als HTML analysiert und alle Nachfahren des Elements werden mit dem Ergebnis ersetzt.Wenn der Wertnull gesetzt wird, wird diesernull-Wert in die leere Zeichenfolge ("") konvertiert, so dassshadowRoot.innerHTML = null gleichbedeutend mitshadowRoot.innerHTML = "" ist.

Ausnahmen

SyntaxErrorDOMException

Wird ausgelöst, wenn versucht wurde, den Wert voninnerHTML mit einer Zeichenfolge zu setzen, die kein korrektes HTML ist.

TypeError

Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, währendTrusted Typesdurch eine CSP durchgesetzt werden und keine Standardrichtlinie definiert ist.

Beschreibung

innerHTML erhält eine Serialisierung der verschachtelten untergeordneten DOM-Elemente innerhalb des Shadow-Roots oder setzt HTML oder XML, das zum Ersetzen des DOM-Baums innerhalb des Shadow-Roots analysiert werden soll.

Beachten Sie, dass einige Browser die<- und>-Zeichen als< und> serialisieren, wenn sie in Attributwerten erscheinen (sieheBrowser-Kompatibilität).Dies soll eine potenzielle Sicherheitslücke (Mutation XSS) verhindern, bei der ein Angreifer eine Eingabe erstellen kann, die eineSanitisierungsfunktion umgeht und einen Cross-Site-Scripting (XSS)-Angriff ermöglicht.

Sicherheitsüberlegungen

DieinnerHTML-Eigenschaft ist ein potenzieller Vektor fürCross-Site-Scripting (XSS)-Angriffe, bei denen potenziell unsichere Zeichenfolgen, die von einem Benutzer bereitgestellt werden, in das DOM eingefügt werden, ohne vorher gereinigt zu werden.Obwohl die Eigenschaft verhindert, dass<script>-Elemente beim Einfügen ausgeführt werden, ist sie anfällig für viele andere Methoden, mit denen Angreifer HTML erstellen können, um bösartigen JavaScript-Code auszuführen.Beispielsweise würde der folgende Code imerror-Ereignishandler ausgeführt, da der<img>src-Wert keine gültige Bild-URL ist:

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

Sie können diese Probleme mindern, indem Sie immerTrustedHTML-Objekte anstelle von Zeichenfolgen zuweisen undTrusted Types durchsetzen mit derrequire-trusted-types-for CSP-Direktive.Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Chance hat, die Eingabe zusanisieren, um potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.

Beispiele

Lesen der HTML-Inhalte eines Elements

Das Lesen voninnerHTML veranlasst den Benutzeragenten zur Serialisierung der Nachfahren des Shadow-Roots.

Angenommen, folgendes HTML liegt vor:

<div>  <template shadowrootmode="open">    <p>My name is Joe</p>  </template></div>

Sie können das Markup für den Shadow-Root abrufen und protokollieren, wie folgt:

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

Setzen des innerHTML für einen Shadow-Root

In diesem Beispiel ersetzen wir ein Element-DOM, indem wir HTML derinnerHTML-Eigenschaft des Elements zuweisen.Um das Risiko eines XSS zu mindern, erstellen wir zunächst einTrustedHTML-Objekt aus der Zeichenfolge, die das HTML enthält, und weisen dieses Objekt danninnerHTML zu.

Trusted Types werden noch nicht von allen Browsern unterstützt, daher definieren wir zunächst dasTrusted Types Tinyfill.Dies 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 eineTrustedTypePolicy, die einecreateHTML()-Methode definiert, um eine Eingabezeichenfolge inTrustedHTML-Instanzen zu transformieren.In der Regel verwenden Implementierungen voncreateHTML() eine Bibliothek wieDOMPurify, um die Eingabe wie unten gezeigt zu sanitisieren:

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

Dann verwenden wir diesespolicy-Objekt, um einTrustedHTML-Objekt aus der potenziell unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:

// The potentially malicious stringconst untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";// Create a TrustedHTML instance using the policyconst trustedHTML = policy.createHTML(untrustedString);// Get the shadow rootconst shadowHost = document.querySelector("#host");const shadowRoot = shadowHost.shadowRoot;// Inject the TrustedHTML (which contains a trusted string)shadowRoot.innerHTML = trustedHTML;

Spezifikationen

Browser-Kompatibilität