ShadowRoot: innerHTML-Eigenschaft

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 ein TrustedHTML-Objekt oder eine Zeichenfolge. Dieser Wert wird als HTML analysiert und alle Nachfahren des Elements werden mit dem Ergebnis ersetzt. Wenn der Wert null gesetzt wird, wird dieser null-Wert in die leere Zeichenfolge ("") konvertiert, so dass shadowRoot.innerHTML = null gleichbedeutend mit shadowRoot.innerHTML = "" ist.

Ausnahmen

SyntaxError DOMException

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

TypeError

Wird ausgelöst, wenn die Eigenschaft auf eine Zeichenfolge gesetzt wird, während Trusted Types durch 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 (siehe Browser-Kompatibilität). Dies soll eine potenzielle Sicherheitslücke (Mutation XSS) verhindern, bei der ein Angreifer eine Eingabe erstellen kann, die eine Sanitisierungsfunktion umgeht und einen Cross-Site-Scripting (XSS)-Angriff ermöglicht.

Sicherheitsüberlegungen

Die innerHTML-Eigenschaft ist ein potenzieller Vektor für Cross-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 im error-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 immer TrustedHTML-Objekte anstelle von Zeichenfolgen zuweisen und Trusted Types durchsetzen mit der require-trusted-types-for CSP-Direktive. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Chance hat, die Eingabe zu sanisieren, 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 zur Serialisierung der Nachfahren des Shadow-Roots.

Angenommen, folgendes HTML liegt vor:

<div class="host">
  <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 der innerHTML-Eigenschaft des Elements zuweisen. Um das Risiko eines XSS zu mindern, erstellen wir zunächst ein TrustedHTML-Objekt aus der Zeichenfolge, die 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. 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 eine TrustedTypePolicy, die eine createHTML()-Methode definiert, um eine Eingabezeichenfolge in TrustedHTML-Instanzen zu transformieren. In der Regel 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),
});

Dann verwenden wir dieses policy-Objekt, um ein TrustedHTML-Objekt aus der potenziell unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis dem Element zuzuweisen:

// 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);

// Get the shadow root
const shadowHost = document.querySelector("#host");
const shadowRoot = shadowHost.shadowRoot;

// Inject the TrustedHTML (which contains a trusted string)
shadowRoot.innerHTML = trustedHTML;

Spezifikationen

Browser-Kompatibilität