HTMLScriptElement: textContent-Eigenschaft

Wert

Beim Abrufen der Eigenschaft wird eine Zeichenkette zurckgegeben, die den Text des Skripts enthlt.

Beim Setzen der Eigenschaft wird entweder ein TrustedScript-Objekt oder eine Zeichenkette akzeptiert.

Ausnahmen

TypeError

Wird ausgelst, wenn die Eigenschaft auf eine Zeichenkette gesetzt wird, whrend vertrauenswrdige Typen durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

Beschreibung

Die textContent-Eigenschaft des HTMLScriptElement-Interfaces reprsentiert den Textinhalt innerhalb des <script>-Elements.

Fr ein ausfhrbares Skript (das heit, ein Skript, dessen type angibt, dass es sich um ein Modul oder klassisches Skript handelt) ist dieser Text ein Inline-Ausfhrungscode. Fr andere Typen knnte es eine Importmap, Spekulationsregeln oder eine andere Art von Datenblock darstellen.

Beachten Sie, dass, wenn die src-Eigenschaft gesetzt ist, der Inhalt der textContent-Eigenschaft ignoriert wird.

Die textContent-Eigenschaft ist auch auf Node definiert und kann daher mit anderen Knoten (und Elementen) verwendet werden. Wenn sie mit anderen Elementen verwendet wird, erwartet oder erzwingt sie nicht die Zuweisung eines TrustedScript.

Sicherheitsberlegungen

Die textContent-Eigenschaft sowie die identischen text- und innerText-Eigenschaften sind ein mglicher Vektor fr Cross-Site Scripting (XSS)-Angriffe, bei denen potenziell unsichere Zeichenfolgen, die von einem Benutzer bereitgestellt werden, ausgefhrt werden. Zum Beispiel nimmt das folgende Beispiel an, dass das scriptElement ein ausfhrbares <script>-Element ist und dass untrustedCode von einem Benutzer bereitgestellt wurde:

const untrustedCode = "alert('Potentially evil code!');";
scriptElement.textContent = untrustedCode; // shows the alert

Sie knnen diese Probleme mindern, indem Sie immer TrustedScript-Objekte anstelle von Zeichenketten zuweisen und vertrauenswrdige Typen erzwingen, indem Sie die require-trusted-types-for CSP-Direktive verwenden. Dies stellt sicher, dass die Eingaben durch eine Transformationsfunktion geleitet werden, die die Mglichkeit hat, den Text zu bereinigen oder abzulehnen, bevor er injiziert wird.

Das Verhalten der Transformationsfunktion hngt vom spezifischen Anwendungsfall ab, der ein vom Benutzer bereitgestelltes Skript bentigt. Wenn mglich, sollten Sie die erlaubten Skripte genau auf den Code beschrnken, dem Sie vertrauen, den Sie ausfhren mchten. Wenn das nicht mglich ist, knnten Sie die Verwendung bestimmter Funktionen innerhalb der bereitgestellten Zeichenkette erlauben oder blockieren.

Beispiele

Verwendung von TrustedScript

Um das Risiko von XSS zu mindern, sollten wir stets TrustedScript-Instanzen der textContent-Eigenschaft zuweisen.

Vertrauenswrdige Typen werden noch nicht von allen Browsern untersttzt, daher definieren wir zuerst den trusted types tinyfill. Dies dient als transparenter Ersatz fr die Trusted Types JavaScript API:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Als nchstes erstellen wir eine TrustedTypePolicy, die eine createScript()-Methode definiert, um Eingabezeichenfolgen in TrustedScript-Instanzen zu transformieren. Fr dieses Beispiel lassen wir genau das Skript zu, das wir bentigen.

const policy = trustedTypes.createPolicy("inline-script-policy", {
  createScript(input) {
    // Here specify what scripts are safe to allow
    if (input === "const num = 10;\nconsole.log(num)") {
      return input; // allow this exact script
    }
    throw new TypeError(`Untrusted script blocked: ${input}`);
  },
});

Als nchstes erstellen wir das Skriptelement, dem wir den Wert zuweisen werden, und erhalten einen Zugriff auf das Element.

<script id="el"></script>

// Get the script element we're injecting the code into
const el = document.getElementById("el");

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

// The potentially malicious string
const untrustedScriptOne = "const num = 10;\nconsole.log(num)";

// Create a TrustedScript instance using the policy
const trustedScript = policy.createScript(untrustedScriptOne);

// Inject the TrustedScript (which contains a trusted string)
el.textContent = trustedScript;

Vergleich von textContent, text und innerText

Dieses Beispiel zeigt, dass das Zuweisen eines Skripts zu jeder der Texteigenschaften, wie textContent, dazu fhrt, dass der gleiche Wert von allen Texe Eigenschaften gelesen wird.

Beachten Sie, dass wir in diesem Fall die Richtlinie nicht verwenden, um vertrauenswrdige Skripte zu erstellen (der Einfachheit halber nehmen wir an, dass die bereitgestellten Zeichenfolgen vertrauenswrdig sind).

// Set the textContent property
el.textContent = "console.log(10);";

console.log(`textContent: ${el.textContent}`);
// "textContent: console.log(10);"

console.log(`text: ${el.text}`);
// "text: console.log(10);"

console.log(`innerText: ${el.innerText}`);
// "innerText: console.log(10);"

// Set the text property
el.text = "const num = 10;\nconsole.log(num)";

console.log(`textContent: ${el.textContent}`);
// textContent: const num = 10; console.log(num)"

console.log(`text: ${el.text}`);
// "text: const num = 10; console.log(num)"

console.log(`innerText: ${el.innerText}`);
// "innerText: const num = 10; console.log(num)"

// Set the innerText property
el.innerText = "const num = 10;alert('Help')";

console.log(`textContent: ${el.textContent}`);
// textContent: const num = 10;alert('Help')"

console.log(`text: ${el.text}`);
// "text: const num = 10;alert('Help')"

console.log(`innerText: ${el.innerText}`);
// "innerText: const num = 10;alert('Help')"

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• text
• innerText