Dokument: write()-Methode

markup, …, markupN

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

Keiner (undefined).

InvalidStateError DOMException

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

TypeError

Ein String wurde als einer der Parameter übergeben, wenn Trusted Types erzwungen werden und keine Standardrichtlinie definiert wurde, um TrustedHTML-Objekte zu erstellen.

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

Die übergebenen Objekte können Instanzen von TrustedHTML oder Strings sein. Es ist viel sicherer, nur TrustedHTML-Objekte in diese Methode zu übergeben und dies mit der require-trusted-types-for-CSP-Direktive durchzusetzen. Das garantiert, dass der Input durch eine Transformationsfunktion geleitet wurde, welche die Gelegenheit hat, den Input zu sanitizen, um potenziell gefährliche Markup, wie <script>-Elemente und Event-Handler-Attribute, zu entfernen.

Da document.write() in den Dokumentstrom schreibt, wird beim Aufruf von document.write() auf einem geschlossenen (geladenen) Dokument (ohne vorher document.open() aufzurufen) automatisch document.open() aufgerufen, was das Dokument löscht.

Die Ausnahme ist, wenn der document.write()-Aufruf innerhalb eines inline HTML-<script>-Tags eingebettet ist, dann wird document.open() nicht automatisch aufgerufen:

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

document.write() (und document.writeln) kann nicht mit XML oder XHTML verwendet werden, und ein Versuch dies zu tun, wird eine InvalidStateError-Ausnahme auslösen. 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 serviert wird. Mehr Informationen sind in den W3C XHTML FAQ verfügbar.

Die Verwendung von document.write() in deferred oder asynchronen Skripten wird ignoriert, und Sie erhalten eine Meldung wie "A call to document.write() from an asynchronously-loaded external script was ignored" in der Fehlerkonsole.

Nur in Edge löst der mehrmalige Aufruf von document.write() in einem <iframe> den Fehler "SCRIPT70: Permission denied" aus.

Ab Version 55 wird Chrome <script>-Elemente, die über document.write() eingefügt wurden, unter bestimmten Bedingungen nicht ausführen. Weitere Informationen finden Sie unter Intervening against document.write().

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

Das Beispiel zeigt zunächst einen Standardtext und einen Button an. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Strings werden in TrustedHTML-Instanzen umgewandelt und in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielframe, einschließlich des ursprünglichen HTML für den Button und des JavaScript, das die Aktualisierung vornahm!

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 ihre createPolicy()-Methode, um eine Richtlinie namens "docPolicy" zu definieren.

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

Sie würden die Methode nutzen, um die Eingabe zu sanitizen, indem potenziell unsichere Funktionen wie <script>-Tags oder Event-Handler-Attribute entfernt werden. Sanitization ist schwer richtig hinzubekommen, daher verwendet dieser Prozess in der Regel eine seriöse Drittanbieter-Bibliothek wie DOMPurify.

Für Demonstrationszwecke implementieren wir hier einen rudimentären "Sanitizer", der <-Symbole in Skriptöffnungs- und -schlusstag 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 Eingabestrings zu erstellen. Diese werden dann an die write()-Funktion übergeben, wenn der Benutzer auf 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), eingefügt werden, aber das nicht-vertrauenswürdige <script>-Element jetzt als reiner Text dargestellt wird.

Dies ist dasselbe wie das vorherige Beispiel, außer dass Trusted Types nicht verwendet oder erzwungen werden. Wir schreiben nicht-sanitizierte Strings, die einen Weg für XSS-Angriffe bieten könnten.

Das Beispiel zeigt zunächst einen Standardtext und einen Button an. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Strings werden in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielframe, einschließlich des ursprünglichen HTML für den Button und des JavaScript, das die Aktualisierung vornahm.

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 eingefügt werden. Dazu gehört auch das <script>-Element, das in einer realen Anwendung schädlichen Code ausgeführt haben könnte.

• document.writeln()
• element.innerHTML
• document.createElement()
• Trusted Types API
• Cross-site scripting (XSS)