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 bei einem XML-Dokument, oder aufgerufen, als der Parser gerade einen benutzerdefinierten Elementkonstruktor ausführte.

TypeError

Eine Zeichenkette wird als ein Parameter übergeben, wenn Trusted Types durchgesetzt werden und keine Standardrichtlinie definiert wurde zum Erstellen von TrustedHTML-Objekten.

Beschreibung

document.write() parst den Markup-Text in den als Parameter übergebenen Objekten in das offene Dokumentobjekt-Modell (DOM), in der Reihenfolge, in der die Parameter angegeben sind.

Da document.write() in den Dokumentenstream schreibt, ruft ein Aufruf von document.write() auf einem geschlossenen (geladenen) Dokument (ohne vorheriges Aufrufen von document.open()) automatisch document.open() auf, was das Dokument löscht.

Die Ausnahme ist, dass der document.write()-Aufruf innerhalb eines Inline-HTML-<script>-Tags eingebettet 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 der Erweiterung .xhtml 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() aus einem asynchron geladenen externen Skript wurde ignoriert" in der Fehlerkonsole.

Nur in Edge führt das mehrmalige Aufrufen von document.write() in einem <iframe> zu dem Fehler "SCRIPT70: Berechtigung verweigert".

Sicherheitsüberlegungen

Die Methode kann ein potenzieller Vektor für Cross-Site-Scripting (XSS)-Angriffe sein, bei denen potenziell unsichere von einem Benutzer bereitgestellte Zeichenketten in das DOM eingefügt werden, ohne vorher bereinigt zu werden. Während die Methode möglicherweise <script>-Elemente vom Ausführen blockiert, wenn sie in einigen Browsern eingefügt werden (siehe Intervening against document.write() für Chrome), ist sie anfällig für viele andere Möglichkeiten, wie Angreifer HTML erstellen können, um bösartigen JavaScript-Code auszuführen.

Sie können diese Probleme mindern, indem Sie stets TrustedHTML-Objekte anstelle von Zeichenketten übergeben und Trusted Types durchsetzen, indem Sie die require-trusted-types-for CSP-Direktive verwenden. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu sanitizen und potenziell gefährliches Markup (wie <script>-Elemente und Attribut-Event-Handler) zu entfernen, bevor sie 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 zunächst einige Standardtexte und einen Button. Wenn der Button angeklickt wird, wird das aktuelle Dokument geöffnet, drei Zeichenketten von HTML werden zu TrustedHTML-Instanzen konvertiert und in das Dokument geschrieben, das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispiel-Frame, einschließlich des ursprünglichen HTML für den Button und des JavaScripts, das das Update durchgeführt hat!

HTML

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

JavaScript

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

Die neue Richtlinie definiert eine Transformationsfunktion createHTML() zum Erstellen der TrustedHTML-Objekte, die wir an die write()-Methode übergeben werden. Diese Methode kann mit der Eingabezeichenkette alles tun, was sie will: Die Trusted Types API fordert nur, dass Sie die Eingabe durch eine Richtlinientransformationsfunktion weitergeben, nicht, dass die Transformationsfunktion irgendetwas Bestimmtes tut.

Man würde die Methode verwenden, um die Eingabe zu sanitizen, indem potenziell unsichere Features wie <script>-Tags oder Attribut-Ereignishandler entfernt werden. Die Bereinigung ist schwer richtig zu machen, daher verwendet dieser Prozess typischerweise eine angesehene Drittanbieter-Bibliothek wie DOMPurify.

Für Demonstrationszwecke implementieren wir hier einen rudimentären "Sanitizer", der <-Symbole in öffnenden und schließenden Script-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 verwenden, um TrustedHTML-Objekte aus unseren ursprünglichen Eingabezeichenketten zu erstellen. Diese werden dann an die 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 beachten Sie, dass die HTML-Elemente, denen wir vertrauen (in diesem Beispiel), injiziert werden, aber das nicht vertrauenswürdige <script>-Element nun als reiner Text gerendert wird.

Schreiben von Zeichenketten

Dies ist dasselbe wie das vorherige Beispiel, allerdings werden keine Trusted Types genutzt oder erzwungen. Wir schreiben nicht bereinigte Zeichenketten, was einen Weg für XSS-Angriffe bieten könnte.

Das Beispiel zeigt zunächst einige Standardtexte und einen Button. Wenn der Button angeklickt wird, wird das aktuelle Dokument geöffnet, drei Zeichenketten von HTML werden in das Dokument geschrieben und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispiel-Frame, einschließlich des ursprünglichen HTML für den Button und des JavaScripts, das das Update durchgeführt 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 beachten Sie, dass alle HTML-Elemente injiziert werden. Dies schließt das <script>-Element ein, das in einer realen Anwendung schädlichen Code ausgeführt haben könnte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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