Dokument: write()-Methode

Syntax

write(markup)
write(markup, markup2)
write(markup, markup2, /* …, */ markupN)

Parameter

markup, …, markupN

TrustedHTML-Objekte oder Zeichenketten, die das Markup enthalten, das in das Dokument geschrieben werden soll.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Die Methode wurde auf einem XML-Dokument aufgerufen oder während der Parser gerade einen benutzerdefinierten Elementkonstruktor ausführt.

TypeError

Eine Zeichenkette wird als einer der Parameter übergeben, wenn Trusted Types durchgesetzt werden und keine Standardrichtlinie definiert wurde zur Erstellung von TrustedHTML-Objekten.

Beschreibung

document.write() analysiert den Markup-Text in den als Parameter übergebenen Objekten in das Objektmodell (DOM) des offenen Dokuments, in der Reihenfolge, in der die Parameter angegeben sind.

Da document.write() in den Dokument-stream schreibt, wird document.write() auf einem geschlossenen (geladenen) Dokument (ohne vorher document.open() aufzurufen) automatisch document.open() aufruft, was das Dokument löschen wird.

Die Ausnahme ist, dass wenn der document.write()-Aufruf in einem eingebetteten HTML-<script>-Tag enthalten ist, dann wird nicht automatisch document.open() aufgerufen:

<script>
  document.write("<h1>Main title</h1>");
</script>

document.write() (und document.writeln) kann nicht mit XML oder XHTML verwendet werden, und der Versuch, dies zu tun, löst eine InvalidStateError-Ausnahme aus. Dies ist der Fall, wenn eine lokale Datei mit einer .xhtml-Dateierweiterung geöffnet wird oder für jedes Dokument, das mit einem application/xhtml+xml-MIME-Typ bereitgestellt wird. Weitere Informationen finden Sie in den W3C XHTML FAQ.

Die Verwendung von document.write() in verzögerten oder asynchronen Skripten wird ignoriert und Sie erhalten eine Nachricht wie "Ein Aufruf von document.write() in einem asynchron geladenen externen Skript wurde ignoriert" in der Fehlerkonsole.

Nur in Edge, wenn document.write() mehr als einmal in einem <iframe> aufgerufen wird, verursacht dies den Fehler "SCRIPT70: Permission denied".

Sicherheitsüberlegungen

Die Methode ist ein möglicher Vektor für Cross-Site Scripting (XSS)-Angriffe, bei denen potenziell unsichere Zeichenketten, die von einem Benutzer bereitgestellt werden, in das DOM eingefügt werden, ohne vorher bereinigt zu werden. Während die Methode in einigen Browsern das Ausführen von <script>-Elementen blockieren kann, wenn sie eingefügt werden (siehe Eingreifen gegen document.write() für Chrome), ist sie anfällig für viele andere Wege, durch die Angreifer HTML gestalten können, um bösartigen JavaScript-Code auszuführen.

Sie können diese Probleme mindern, indem Sie immer TrustedHTML-Objekte anstelle von Zeichenketten übergeben und vertrauenswürdige Typen durchsetzen unter Verwendung der require-trusted-types-for CSP-Direktive. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu bereinigen, um potenziell gefährliches Markup (wie <script>-Elemente und Event-Handler-Attribute) zu entfernen, bevor es eingefügt wird.

Beispiele

Schreiben von TrustedHTML

Dieses Beispiel verwendet die Trusted Types API, um HTML-Zeichenketten von <script>-Elementen zu bereinigen, bevor sie in ein Dokument geschrieben werden.

Das Beispiel zeigt anfangs einen Standardtext und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Zeichenketten werden in TrustedHTML-Instanzen umgewandelt und in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielrahmen, einschließlich des ursprünglichen HTML für den Button und das JavaScript, das das Update vorgenommen hat!

HTML

<p>Some original document content.</p>
<button id="replace" type="button">Replace document content</button>

JavaScript

Zuerst verwenden wir die Window.trustedTypes-Eigenschaft, um auf die globale TrustedTypePolicyFactory zuzugreifen, und verwenden die createPolicy()-Methode, um eine Richtlinie namens "docPolicy" zu definieren.

Die neue Richtlinie definiert eine Transformationsfunktion createHTML(), um die TrustedHTML-Objekte zu erstellen, die wir der write()-Methode übergeben werden. Diese Methode kann mit der Eingabezeichenkette alles machen, was sie möchte: die Trusted Types API erfordert nur, dass Sie die Eingabe durch eine Richtlinien-Transformationsfunktion leiten, nicht dass die Transformationsfunktion etwas Bestimmtes tut.

Sie würden die Methode verwenden, um die Eingabe zu bereinigen, indem Sie potenziell unsichere Features wie <script>-Tags oder Event-Handler-Attribute entfernen. Die Bereinigung ist schwer richtig zu machen, daher verwendet dieser Prozess typischerweise eine renommierte Drittanbieter-Bibliothek wie DOMPurify.

Zum Zwecke der Demonstration implementieren wir hier einen rudimentären "Sanitizer", der <-Symbole in öffnenden und schließenden Skript-Tags durch das <-Zeichen ersetzt.

const policy = trustedTypes.createPolicy("docPolicy", {
  createHTML(string) {
    return string
      .replace("<script", "&lt;script")
      .replace("</script", "&lt;/script");
  },
});

Wir können dann die TrustedTypePolicy.createHTML()-Methode auf der zurückgegebenen Richtlinie nutzen, um TrustedHTML-Objekte aus unseren ursprünglichen Eingabezeichenketten zu erstellen. Diese werden dann der write()-Funktion übergeben, wenn der Benutzer den Button klickt.

const oneInput = "<h1>Out with the old</h1>";
const twoInput = "<p>in with the new!</p>";
const threeInput = "<script>alert('evil afoot')<" + "/script>";
const replace = document.querySelector("#replace");

replace.addEventListener("click", () => {
  document.open();
  document.write(
    policy.createHTML(oneInput),
    policy.createHTML(twoInput),
    policy.createHTML(threeInput),
  );
  document.close();
});

Ergebnisse

Drücken Sie den Button und bemerken Sie, dass die HTML-Elemente, denen wir (in diesem Beispiel) vertrauen, injiziert werden, aber das nicht vertrauenswürdige <script>-Element wird nun als normaler Text angezeigt.

Schreiben von Zeichenketten

Dies ist dasselbe wie das vorherige Beispiel, außer dass keine vertrauenswürdigen Typen verwendet oder durchgesetzt werden. Wir schreiben unsanitisierte Zeichenketten, die einen Pfad für XSS-Angriffe bieten können.

Das Beispiel zeigt anfangs einen Standardtext und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Zeichenketten werden in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielrahmen, einschließlich des ursprünglichen HTML für den Button und das JavaScript, das das Update vorgenommen hat.

HTML

<p>Some original document content.</p>
<button id="replace" type="button">Replace document content</button>

JavaScript

const replace = document.querySelector("#replace");

const oneInput = "<h1>Out with the old</h1>";
const twoInput = "<p>in with the new!</p>";
const threeInput = "<script>alert('evil afoot')<" + "/script>";

replace.addEventListener("click", () => {
  document.open();
  document.write(oneInput, twoInput, threeInput);
  document.close();
});

Ergebnisse

Drücken Sie den Button und bemerken Sie, dass alle HTML-Elemente injiziert werden. Dies schließt das <script>-Element ein, das in einer realen Anwendung möglicherweise schädlichen Code ausgeführt hätte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• document.writeln()
• element.innerHTML
• document.createElement()
• Trusted Types API
• Cross-Site Scripting (XSS)