Signatur
Beschreibung
Die Eigenschaft textContent eines HTMLScriptElement enthält den eingebetteten Inhalt zwischen <script> und </script>. Sie ist von Node.textContent geerbt. Für Script-Elemente ist ihr Setter aber eigens definiert, weil der Inhalt hier ausführbarer Code ist und damit ein Einfallstor für Cross-Site-Scripting (XSS).
Beim Lesen erhältst du immer einen string, also z. B. den Quelltext eines Inline-Skripts oder die Daten eines Datenblocks wie <script type="application/json">. Beim Setzen akzeptiert die Eigenschaft einen string oder ein TrustedScript-Objekt. Ist per Content Security Policy require-trusted-types-for 'script' aktiv, wird ein einfacher String abgelehnt und ein TypeError geworfen. Das gilt nicht, wenn eine Default-Policy den String umwandelt.
Typische Anwendungsfälle:
- Serverseitig eingebettete Konfigurations- oder Initialdaten aus einem JSON-Datenblock auslesen.
- Ein Inline-Skript dynamisch erzeugen:
document.createElement("script"), danntextContentsetzen und das Element ins Dokument einfügen. - Den Inhalt von Templates oder Import Maps (
type="importmap") prüfen.
Wichtig: Code wird nur ausgeführt, wenn das Skript-Element ins Dokument eingefügt wird und vorher noch nicht gestartet war. Wenn du textContent eines bereits ausgeführten Skripts änderst, wird der Code nicht erneut ausgeführt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value Pflicht | string | TrustedScript | Neuer Inhalt des Skripts (nur beim Setzen). Ist Trusted Types erzwungen, muss hier ein TrustedScript übergeben werden, z. B. aus policy.createScript(). |
Rückgabewert
<script>-Elements. Ohne Inhalt ist es ein leerer String. Beim Lesen wird nie ein TrustedScript zurückgegeben.Beispiele
Initialdaten aus einem JSON-Datenblock lesen
// HTML: <script id="app-config" type="application/json">{"apiUrl":"/api","debug":true}</script>
const configEl = document.getElementById("app-config");
const config = JSON.parse(configEl.textContent);
console.log(config.apiUrl, config.debug);Inline-Skript dynamisch erzeugen und ausführen
const script = document.createElement("script");
script.textContent = 'console.log("Dynamisches Skript läuft");';
// Ausgeführt wird erst beim Einfügen ins Dokument
document.head.append(script);
// Späteres Ändern führt NICHT zu erneuter Ausführung
script.textContent = 'console.log("Wird nie ausgegeben");';Sicher setzen mit Trusted Types
// Voraussetzung: CSP-Header require-trusted-types-for 'script'; trusted-types app-scripts
const policy = window.trustedTypes?.createPolicy("app-scripts", {
createScript: (input) => {
// Nur freigegebene Codeschnipsel zulassen
const allowed = ['console.log("Analytics bereit");'];
if (!allowed.includes(input)) throw new TypeError("Skript nicht erlaubt");
return input;
},
});
const code = 'console.log("Analytics bereit");';
const script = document.createElement("script");
script.textContent = policy ? policy.createScript(code) : code;
document.body.append(script);Inhalt eines Inline-Skripts prüfen
const inlineScripts = [...document.querySelectorAll("script:not([src])")];
inlineScripts.forEach((s, i) => {
console.log(`Skript ${i}: ${s.textContent.trim().length} Zeichen`);
});// Wichtig · Fallstricke
Sicherheit (XSS): Schreibe niemals ungeprüfte Benutzereingaben oder URL-Parameter in script.textContent. Das ist gleichbedeutend mit eval(). Eine Content Security Policy ohne 'unsafe-inline' blockiert dynamisch erzeugte Inline-Skripte, es sei denn, du vergibst eine passende nonce (script.nonce = ...) oder erlaubst per 'strict-dynamic' Skripte, die von vertrauenswürdigen Skripten nachgeladen werden.
Trusted Types: Ist require-trusted-types-for 'script' aktiv, löst das Zuweisen eines einfachen Strings einen TypeError aus. Nutze dann trustedTypes.createPolicy() mit createScript. Trusted Types wird in Chromium-Browsern seit Langem unterstützt, in Firefox und Safari erst seit Kurzem. Prüfe deshalb mit window.trustedTypes, ob die API vorhanden ist.
Keine erneute Ausführung: Ein Skript läuft höchstens einmal. Wenn du textContent nach dem Einfügen änderst, wird nichts neu ausgeführt. Erzeuge stattdessen ein neues Element. Umgekehrt werden Skripte, die über innerHTML eingefügt werden, grundsätzlich nicht ausgeführt.
JSON-Datenblöcke: Wenn der Server Daten in <script type="application/json"> einbettet, muss er </script bzw. < escapen (z. B. als \u003c). Sonst kann der Block vorzeitig enden, was eine XSS-Lücke öffnet. JSON.parse(el.textContent) ist die sichere Art, solche Daten zu lesen.
Alternativen: HTMLScriptElement.text verhält sich fast gleich. innerText akzeptiert ebenfalls ein TrustedScript.