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

Sanitizer.removeAttribute()

Methode

Legt in der Sanitizer-Konfiguration fest, dass ein Attribut beim Bereinigen von allen Elementen entfernt wird.

seit JavaScript Experimentell: Firefox 148+, in Chromium nur hinte Kategorie: webapi

Signatur

Sanitizer.prototype.removeAttribute(attribute)

Beschreibung

Mit removeAttribute() ändern Sie die Konfiguration eines Sanitizer-Objekts so, dass das angegebene Attribut bei jeder Bereinigung von allen Elementen entfernt wird. Das gilt, wenn der Sanitizer an Element.setHTML(), ShadowRoot.setHTML(), Document.parseHTML() oder an die „unsicheren“ Varianten wie setHTMLUnsafe() übergeben wird.

Die Methode verhält sich je nach Art der Konfiguration unterschiedlich:

  • Sperrliste (Konfiguration mit removeAttributes oder ganz ohne Attributliste): Das Attribut wird in die globale Liste removeAttributes aufgenommen.
  • Erlaubnisliste (Konfiguration mit attributes): Das Attribut wird aus der globalen Liste attributes gestrichen. Es ist dann also nicht mehr erlaubt.

In beiden Fällen wird das Attribut außerdem aus den elementbezogenen Listen attributes und removeAttributes gestrichen, damit die Konfiguration widerspruchsfrei bleibt. Typische Anwendungsfälle: Sie wollen style in Nutzerinhalten verbieten, id und class entfernen, damit eingefügtes HTML nicht mit dem eigenen CSS oder JavaScript kollidiert, oder Tracking-Attribute wie ping löschen.

Parameter

Name Typ Default Beschreibung
$attribute Pflicht string | { name: string, namespace?: string | null } Das Attribut, das entfernt werden soll. Entweder als Name (z. B. "style"), dann ohne Namensraum (null), oder als Objekt mit name und optional namespace, etwa für xlink:href in SVG.

Rückgabewert

Typ
boolean
Beschreibung
true, wenn die Konfiguration geändert wurde. false, wenn das Attribut schon entfernt bzw. nicht erlaubt war und sich daher nichts geändert hat.

Beispiele

style-Attribute aus Nutzerinhalten entfernen

const sanitizer = new Sanitizer({});
sanitizer.removeAttribute("style");

const userHtml = '<p style="color:red" class="hinweis">Hallo <b style="font-size:80px">Welt</b></p>';
const container = document.querySelector("#kommentar");
container.setHTML(userHtml, { sanitizer });

console.log(container.innerHTML);
<p class="hinweis">Hallo <b>Welt</b></p>

Rückgabewert auswerten und Konfiguration prüfen

const sanitizer = new Sanitizer({});

console.log(sanitizer.removeAttribute("id"));  // Konfiguration geändert
console.log(sanitizer.removeAttribute("id"));  // bereits vorhanden

const config = sanitizer.get();
console.log(config.removeAttributes);
true false [{ name: "id", namespace: null }]

Attribut aus einer Erlaubnisliste streichen

const sanitizer = new Sanitizer({
  elements: ["a", "p"],
  attributes: ["href", "title", "target"]
});

// target soll doch nicht erlaubt sein (verhindert z. B. _blank-Links)
sanitizer.removeAttribute("target");

console.log(sanitizer.get().attributes.map((a) => a.name));
["href", "title"]

Attribut mit Namensraum entfernen (SVG xlink:href)

const sanitizer = new Sanitizer({});
sanitizer.removeAttribute({
  name: "href",
  namespace: "http://www.w3.org/1999/xlink"
});

const doc = Document.parseHTML(
  '<svg><a xlink:href="https://example.com"><text>Link</text></a></svg>',
  { sanitizer }
);
console.log(doc.body.innerHTML);
<svg><a><text>Link</text></a></svg>

// Wichtig · Fallstricke

  • Kompatibilität: Die Sanitizer API ist noch experimentell. Die Browserunterstützung ist eingeschränkt und die Spezifikation kann sich noch ändern. Prüfen Sie die Unterstützung vorab, z. B. mit if ("Sanitizer" in window && "setHTML" in Element.prototype), und sehen Sie sonst eine Alternative vor (etwa DOMPurify).
  • Standardkonfiguration: new Sanitizer() ohne Argument verwendet eine eingebaute, sichere Erlaubnisliste. Rufen Sie darauf removeAttribute() auf, wird das Attribut aus dieser Liste gestrichen und nicht in removeAttributes eingetragen. Welcher Wert zurückkommt, hängt also davon ab, ob das Attribut in der Standardliste enthalten war.
  • Kein Ersatz für Sicherheit: Die „sicheren“ Methoden wie setHTML() entfernen gefährliche Attribute wie Ereignisbehandler (onclick usw.) und javascript:-URLs ohnehin, unabhängig von der Konfiguration. Bei setHTMLUnsafe() gilt dagegen nur Ihre Konfiguration. Wer dort nur einzelne Attribute sperrt, lässt womöglich XSS-Lücken offen. Für wirklich sichere Konfigurationen sind Erlaubnislisten besser als Sperrlisten, oder Sie rufen zusätzlich removeUnsafe() auf.
  • Attributnamen ohne Namensraum gelten nur für Attribute ohne Namensraum. \"href\" erfasst also nicht xlink:href.
  • Für data-*-Attribute gibt es mit setDataAttributes() eine eigene Steuerung.