Start · Sprachen · JavaScript · Referenz · Sanitizer.setComments()

Sanitizer.setComments()

Methode

Legt fest, ob HTML-Kommentare (<code>&lt;!-- … --&gt;</code>) beim Bereinigen erhalten bleiben oder vom <code>Sanitizer</code> entfernt werden.

seit JavaScript Experimentell: eingeschränkte Browser-Unterstützun Kategorie: webapi

Signatur

Sanitizer.prototype.setComments(allow)

Beschreibung

Mit setComments() änderst du die Konfiguration einer bestehenden Sanitizer-Instanz: Übergibst du true, bleiben HTML-Kommentare im bereinigten Markup erhalten. Bei false werden sie entfernt. Die Methode ändert die Instanz direkt, du musst also keinen neuen Sanitizer anlegen.

Kommentare sind für die Darstellung im Browser bedeutungslos. Sie können aber interne Hinweise, Build-Informationen oder Marker von Template-Systemen enthalten, etwa <!--more--> in CMS-Inhalten oder Hydration-Marker. Diese Informationen willst du dem Endnutzer oft nicht ausliefern. Wenn nachgelagerter Code solche Marker aber auswertet, musst du sie ausdrücklich erlauben.

Der konfigurierte Sanitizer wird anschließend an Methoden wie Element.setHTML(), ShadowRoot.setHTML() oder Document.parseHTML() übergeben (Option { sanitizer }). Die aktuelle Einstellung liest du über sanitizer.get().comments aus.

Parameter

Name Typ Default Beschreibung
$allow Pflicht boolean true lässt Kommentare im Ergebnis stehen, false entfernt sie.

Beispiele

Kommentare aus Nutzerinhalten entfernen

const sanitizer = new Sanitizer();
sanitizer.setComments(false);

const box = document.createElement('div');
box.setHTML('<p>Hallo<!-- interne Notiz --> Welt</p>', { sanitizer });

console.log(box.innerHTML);
<p>Hallo Welt</p>

CMS-Marker wie <!--more--> erhalten

const sanitizer = new Sanitizer();
sanitizer.setComments(true);

const article = document.querySelector('#artikel');
article.setHTML('<p>Anreißer</p><!--more--><p>Volltext</p>', { sanitizer });

// Marker für die „Weiterlesen“-Logik finden
const walker = document.createTreeWalker(article, NodeFilter.SHOW_COMMENT);
console.log(walker.nextNode()?.data);
more

Rückgabewert und aktuelle Konfiguration prüfen

const sanitizer = new Sanitizer();

console.log(sanitizer.setComments(true));  // Wert wird geändert
console.log(sanitizer.setComments(true));  // war schon gesetzt
console.log(sanitizer.get().comments);
true false true

Mit Feature-Erkennung und Fallback

const renderSafe = (el, html) => {
  if ('Sanitizer' in window && 'setHTML' in Element.prototype) {
    const sanitizer = new Sanitizer();
    sanitizer.setComments(false);
    el.setHTML(html, { sanitizer });
  } else {
    // Fallback: nur Text ausgeben, kein HTML interpretieren
    el.textContent = html;
  }
};

renderSafe(document.body, '<b>Fett</b><!-- geheim -->');

// Wichtig · Fallstricke

  • Experimentelle API: Die Sanitizer API ist noch nicht in allen Browsern verfügbar. In manchen ist sie nur hinter einem Flag aktiv. Frühere Entwürfe hatten eine andere Form, zum Beispiel sanitizer.sanitize() und allowComments im Konstruktor. Prüfe deshalb immer mit Feature-Erkennung ('Sanitizer' in window) und plane einen Fallback ein, etwa DOMPurify.
  • Kein Sicherheitsgewinn durch Kommentare: Erlaubte Kommentare führen keinen Skriptcode aus. Allerdings verraten sie möglicherweise interne Informationen. Außerdem kann Code, der Kommentarinhalte später per innerHTML wieder einfügt, neue XSS-Lücken öffnen.
  • Nur bei sicheren Methoden wirksam: setHTML() entfernt gefährliche Elemente wie <script> auch dann, wenn die Konfiguration sie erlaubt. setHTMLUnsafe() tut das nicht, egal wie setComments() eingestellt ist.
  • Die Methode ändert die Instanz direkt. Wenn mehrere Programmteile denselben Sanitizer verwenden, betrifft die Änderung alle.
  • Ob Kommentare standardmäßig erlaubt sind, hängt davon ab, wie der Sanitizer erzeugt wurde (Standardkonfiguration oder eigenes Konfigurationsobjekt). Setze den Wert daher ausdrücklich, wenn es darauf ankommt.