Dokument: write() Methode

Syntax

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

Parameter

markup, …, markupN

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

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

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

TypeError

Ein String 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 geöffneten Dokuments und zwar in der Reihenfolge, in der die Parameter angegeben sind.

Da document.write() in den Stream des Dokuments schreibt, ruft das Aufrufen von document.write() auf einem geschlossenen (geladenen) Dokument (ohne zuvor document.open() aufzurufen) automatisch document.open() auf, was das Dokument löscht.

Die Ausnahme besteht darin, dass, wenn sich der document.write() Aufruf innerhalb eines inline HTML <script> Tags befindet, document.open() nicht automatisch aufgerufen 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 geliefert 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 Meldung wie "Ein Aufruf von document.write() aus einem asynchron geladenen externen Skript wurde ignoriert" in der Fehlerkonsole.

Nur in Edge verursacht das wiederholte Aufrufen von document.write() in einem <iframe> den Fehler "SCRIPT70: Permission denied".

Sicherheitsüberlegungen

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

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

Beispiele

Schreiben von TrustedHTML

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

Das Beispiel zeigt zunächst einen Standardtext und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei Strings von HTML werden in TrustedHTML Instanzen umgewandelt und in das Dokument geschrieben, das anschließend geschlossen wird. Dies ersetzt das Dokument im Beispielrahmen, einschließlich des ursprünglichen HTML für den Button und des JavaScripts, das die Aktualisierung durchführte!

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

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

Sie würden die Methode nutzen, um die Eingabe zu bereinigen, indem potenziell unsichere Funktionen wie <script> Tags oder Event-Handler-Attribute entfernt werden. Die Bereinigung ist schwer richtig zu machen, daher wird dieser Prozess typischerweise mit einer renommierten Drittanbieter-Bibliothek wie DOMPurify durchgeführt.

Zu Demonstrationszwecken implementieren wir hier ein rudimentäres "Reinigungsmittel", das < Symbole in Skript öffnen und schließen 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 Eingabestrings 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, die wir vertrauen (in diesem Beispiel) injiziert werden, aber das nicht vertrauenswürdige <script> Element jetzt als Klartext angezeigt wird.

Schreiben von Strings

Dies ist dasselbe wie das vorherige Beispiel, außer dass Trusted Types nicht verwendet oder durchgesetzt werden. Wir schreiben nicht bereinigte Strings, die möglicherweise einen Pfad für XSS-Angriffe bieten können.

Das Beispiel zeigt zunächst einen Standardtext und einen Button. Wenn der Button geklickt wird, wird das aktuelle Dokument geöffnet, drei Strings von HTML 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 des JavaScripts, das die Aktualisierung durchführte.

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 achten Sie darauf, dass alle HTML-Elemente injiziert werden. Dies schließt das <script> Element ein, das in einer echten 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)