HTMLScriptElement.innerText — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.innerText

Beschreibung

innerText ist eigentlich auf HTMLElement definiert. HTMLScriptElement überschreibt die Eigenschaft, damit der Setter neben einem normalen String auch ein TrustedScript-Objekt aus der Trusted Types API annimmt. So kann eine Content Security Policy mit require-trusted-types-for 'script' prüfen, woher der Code kommt, bevor er in ein Skript geschrieben wird.

Lesen: Ein <script>-Element wird nicht dargestellt (display: none). Deshalb gibt der Getter denselben Wert zurück wie textContent, also den unveränderten Quelltext des Inline-Skripts. Bei externen Skripten mit src-Attribut ist das normalerweise ein leerer String.

Schreiben: Der Setter ersetzt alle Kindknoten des Elements. Ein Skript, das neu erzeugt und noch nicht ins Dokument eingefügt wurde, wird ausgeführt, sobald Sie es mit append() o. Ä. einhängen. Ein Skript, das schon gelaufen ist, wird durch neuen Text nicht noch einmal ausgeführt.

In der Praxis sind textContent oder HTMLScriptElement.text meist die bessere Wahl. Der innerText-Setter macht aus Zeilenumbrüchen nämlich <br>-Elemente (siehe Hinweise).

Parameter

Name	Typ	Default	Beschreibung
$value Pflicht	string \| TrustedScript		Nur beim Setzen: der neue Skript-Quelltext. Wenn Trusted Types erzwungen werden, ist nur ein `TrustedScript` erlaubt, es sei denn, es gibt eine Default-Policy.

Rückgabewert

Typ

string

Beschreibung

Der Textinhalt des Skripts. Bei nicht dargestellten Elementen wie <script> entspricht er textContent.

Beispiele

Quelltext eines Inline-Skripts auslesen

// HTML: <script id="config" type="application/json">{"theme":"dark"}</script>
const el = document.getElementById('config');
const config = JSON.parse(el.innerText);
console.log(config.theme);

dark

Einzeiliges Skript dynamisch erzeugen und ausführen

const script = document.createElement('script');
script.innerText = "console.log('Dynamisches Skript läuft');";
document.head.append(script); // wird beim Einfügen ausgeführt

Dynamisches Skript läuft

Setzen mit Trusted Types (CSP: require-trusted-types-for 'script')

const policy = trustedTypes.createPolicy('app-scripts', {
  // Nur bekannte, geprüfte Snippets zulassen
  createScript: (input) => {
    if (input !== "console.log('ok')") throw new TypeError('Nicht erlaubt');
    return input;
  }
});

const script = document.createElement('script');
script.innerText = policy.createScript("console.log('ok')");
document.body.append(script);

ok

Fallstrick: Zeilenumbrüche werden zu <br>

const script = document.createElement('script');
script.innerText = "// Kommentar\nconsole.log('läuft?');";
console.log(script.children.length); // 1 -> ein <br>-Element
console.log(script.text); // Zeilenumbruch fehlt, alles ist Kommentar

// Besser:
script.textContent = "// Kommentar\nconsole.log('läuft!');";
document.head.append(script);

1 // Kommentarconsole.log('läuft?'); läuft!

// Wichtig · Fallstricke

Zeilenumbrüche: Der innerText-Setter wandelt \n in <br>-Elemente um. Für den Skriptinhalt zählen aber nur Textknoten. Die Zeilenumbrüche gehen also verloren: Zeilenkommentare (//) verschlucken den restlichen Code, und Anweisungen ohne Semikolon können kaputtgehen. Für mehrzeiligen Code nehmen Sie textContent oder text.
Sicherheit (XSS): Text, den Sie in ein <script> schreiben, wird als JavaScript ausgeführt. Übergeben Sie niemals ungeprüfte Benutzereingaben oder Daten aus URL, postMessage oder API-Antworten. Setzen Sie Trusted Types über die CSP-Direktive require-trusted-types-for 'script' durch. Dann wirft der Setter bei einem normalen String einen TypeError, sofern keine Default-Policy vorhanden ist.
CSP: Auch dynamisch eingefügte Inline-Skripte werden von script-src blockiert, wenn weder 'unsafe-inline' noch eine passende Nonce oder ein Hash vorliegt (bzw. 'strict-dynamic').
Ein Skript läuft nur einmal. Wenn Sie den Inhalt eines bereits ausgeführten Skripts ändern, wird es nicht erneut ausgeführt.
Kompatibilität: innerText selbst funktioniert in allen Browsern. Dass der Setter TrustedScript annimmt, hängt von der Trusted-Types-Unterstützung ab (Chromium seit 83, Firefox und Safari erst seit kurzem).

Siehe auch

HTMLScriptElement.text HTMLScriptElement.textContent HTMLScriptElement.src HTMLElement.innerText TrustedScript HTMLScriptElement HTMLScriptElement.blocking