Document.createCDATASection() — Methode · JavaScript-Referenz

Signatur

Document.prototype.createCDATASection(data)

Beschreibung

createCDATASection() erzeugt einen CDATA-Abschnitt – also einen Knoten, der beim Serialisieren als <![CDATA[ … ]]> ausgegeben wird. Zeichen wie <, > und & werden darin nicht als Markup gelesen und müssen nicht maskiert werden. Der neue Knoten gehört noch nicht zum Dokument. Man muss ihn erst mit appendChild(), append() o. Ä. einfügen.

Typische Einsatzfälle sind XML-Dokumente, die man im Browser erzeugt: RSS- oder Atom-Feeds mit HTML-Inhalt, SVG- oder XHTML-Dokumente mit eingebettetem Skript- oder Stilcode, SOAP-Nachrichten oder Konfigurationsdateien. Das Dokument dafür erzeugt man meist mit DOMParser (MIME-Typ application/xml) oder mit document.implementation.createDocument(). Anschließend macht XMLSerializer daraus einen Text.

CDATASection erbt von Text. Eigenschaften wie data, textContent und length funktionieren deshalb wie bei normalen Textknoten. nodeType hat den Wert 4 (Node.CDATA_SECTION_NODE).

Wichtig: In HTML-Dokumenten (also auch im normalen document einer Webseite) löst die Methode einen NotSupportedError aus. Enthält der Text die Zeichenfolge ]]>, wird ein InvalidCharacterError ausgelöst.

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	string		Der Inhalt des CDATA-Abschnitts. Er darf die Endmarke `]]>` nicht enthalten. Andere Werte als Strings werden in einen String umgewandelt.

Rückgabewert

Typ

CDATASection

Beschreibung

Ein neuer CDATASection-Knoten, der noch nicht im Dokument steht und dessen data dem übergebenen String entspricht.

Beispiele

RSS-Eintrag mit HTML-Inhalt als CDATA erzeugen

const doc = new DOMParser().parseFromString(
  '<rss version="2.0"><channel><item><description/></item></channel></rss>',
  'application/xml'
);

const description = doc.querySelector('description');
const html = '<p>Neuer Artikel: <strong>DOM & XML</strong></p>';

// Das HTML bleibt unverändert und wird nicht maskiert
description.appendChild(doc.createCDATASection(html));

console.log(new XMLSerializer().serializeToString(doc));

<rss version="2.0"><channel><item><description><![CDATA[<p>Neuer Artikel: <strong>DOM & XML</strong></p>]]></description></item></channel></rss>

Fehler im HTML-Dokument abfangen

// Das normale document einer Webseite ist ein HTML-Dokument
try {
  document.createCDATASection('Test');
} catch (err) {
  console.log(err.name);
}

// Ein XML-Dokument anlegen, dann klappt es
const xmlDoc = document.implementation.createDocument(null, 'root', null);
const cdata = xmlDoc.createCDATASection('a < b');
console.log(cdata.nodeType === Node.CDATA_SECTION_NODE, cdata.data);

NotSupportedError true "a < b"

Text mit „]]>“ sicher auf mehrere CDATA-Abschnitte verteilen

const appendCData = (doc, parent, text) => {
  const parts = text.split(']]>');
  parts.forEach((part, i) => {
    let chunk = part;
    if (i > 0) chunk = '>' + chunk;                    // '>' an den Anfang des nächsten Abschnitts
    if (i < parts.length - 1) chunk += ']]';           // ']]' ans Ende des aktuellen Abschnitts
    parent.appendChild(doc.createCDATASection(chunk));
  });
};

const doc = new DOMParser().parseFromString('<script/>', 'application/xml');
const script = doc.documentElement;
appendCData(doc, script, 'if (a[b[0]]>1) run();');

console.log(new XMLSerializer().serializeToString(doc));
console.log(script.textContent);

// Wichtig · Fallstricke

Nur in XML-Dokumenten: In HTML-Dokumenten wird ein DOMException vom Typ NotSupportedError ausgelöst. Nutzen Sie ein XML-Dokument aus DOMParser (application/xml, image/svg+xml, application/xhtml+xml) oder aus document.implementation.createDocument().
Endmarke verboten: Enthält data die Zeichenfolge ]]>, wird ein InvalidCharacterError ausgelöst. Verteilen Sie solchen Text auf mehrere Abschnitte (siehe Beispiel 3) oder verwenden Sie einen normalen Textknoten über createTextNode(). Dort werden die Sonderzeichen beim Serialisieren automatisch maskiert.
Kein Schutz vor XSS: CDATA verhindert nur, dass der XML-Parser den Inhalt als Markup liest. Wenn ein Empfänger den Inhalt später als HTML darstellt (z. B. ein Feed-Reader), wird eingeschleustes HTML oder JavaScript trotzdem ausgeführt. Nicht vertrauenswürdige Daten müssen Sie also weiterhin bereinigen.
Nicht jeder Parser behält CDATA-Knoten bei. Manche Werkzeuge wandeln sie in normale Textknoten um. Sie sollten sich deshalb nicht darauf verlassen, dass nodeType === 4 nach einem erneuten Parsen erhalten bleibt.
Die Methode wird von allen Browsern unterstützt. In Node.js gibt es kein eingebautes DOM. Dort brauchen Sie Bibliotheken wie jsdom oder @xmldom/xmldom.

Siehe auch

CDATASection DOMParser XMLSerializer Text Document.createExpression()