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

TypeError

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

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 werden.

Die übergebenen Objekte können Instanzen von TrustedHTML oder Zeichenfolgen sein. Es ist viel sicherer, nur TrustedHTML-Objekte in diese Methode zu übergeben und dies mit der CSP-Direktive require-trusted-types-for zu erzwingen. Dies garantiert, dass die Eingabe durch eine Transformationsfunktion geleitet wurde, die die Möglichkeit hat, die Eingabe zu sanitizen, um potenziell gefährliche Markup zu entfernen, wie z. B. <script>-Elemente und Ereignishandler-Attribute.

Da document.write() in den Dokumentenstrom schreibt, ruft das Aufrufen von document.write() auf einem geschlossenen (geladenen) Dokument (ohne vorher document.open() aufzurufen) automatisch document.open() auf, das das Dokument löschen wird.

Die Ausnahme besteht darin, dass, wenn der document.write()-Aufruf in einem Inline-HTML-<script>-Tag eingebettet ist, er nicht automatisch document.open() aufrufen wird:

<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, 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 bereitgestellt wird. Weitere Informationen finden Sie in den W3C XHTML FAQ.

Die Verwendung von document.write() in deferred- 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 mehrfache Aufrufen von document.write() in einem <iframe> zu dem Fehler "SCRIPT70: Permission denied".

Ab Version 55 wird Chrome keine <script>-Elemente ausführen, die über document.write() eingefügt wurden, wenn bestimmte Bedingungen erfüllt sind. Weitere Informationen finden Sie unter Intervenieren gegen document.write().

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

Das Beispiel zeigt zunächst einige Standardtexte und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Zeichenfolgen werden in Instanzen von TrustedHTML umgewandelt und in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielrahmen, einschließlich des ursprünglichen HTMLs für den Button und des JavaScripts, 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 ihre Methode createPolicy() zu nutzen, um eine Richtlinie namens "docPolicy" zu definieren.

Die neue Richtlinie definiert eine Transformationsfunktion createHTML() zur Erstellung der TrustedHTML-Objekte, die wir an die write()-Methode übergeben werden. Diese Methode kann mit der Eingabezeichenfolge tun, was sie möchte: Die Trusted Types API verlangt nur, dass Sie die Eingabe durch eine Policy-Transformationsfunktion leiten, nicht dass die Transformationsfunktion etwas Besonderes tut.

Sie würden die Methode verwenden, um die Eingabe zu sanitizen, indem Sie potenziell unsichere Merkmale wie <script>-Tags oder Ereignishandler-Attribute entfernen. Sanitization ist schwer richtig zu machen, daher verwendet dieser Prozess typischerweise eine seriöse Drittanbieter-Bibliothek wie DOMPurify.

Zu Demonstrationszwecken implementieren wir hier einen rudimentären "Sanitizer", der <-Symbole in Skript-Öffnungs- und -Schließ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 Methode TrustedTypePolicy.createHTML() auf der zurückgegebenen Policy verwenden, um aus unseren ursprünglichen Eingabezeichenfolgen TrustedHTML-Objekte zu erstellen. Diese werden dann an die write()-Funktion übergeben, wenn der Nutzer 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 unzuverlässige <script>-Element wird jetzt als einfacher Text gerendert.

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

Das Beispiel zeigt zunächst einige Standardtexte und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei HTML-Zeichenfolgen werden in das Dokument geschrieben, und das Dokument wird dann geschlossen. Dies ersetzt das Dokument im Beispielrahmen, einschließlich des ursprünglichen HTMLs für den Button und des JavaScripts, 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 beachten Sie, dass alle HTML-Elemente eingefügt werden. Dies schließt das <script>-Element ein, welches in einer realen Anwendung schädlichen Code ausführen könnte.

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