Signatur
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
removeAttributesoder ganz ohne Attributliste): Das Attribut wird in die globale ListeremoveAttributesaufgenommen. - Erlaubnisliste (Konfiguration mit
attributes): Das Attribut wird aus der globalen Listeattributesgestrichen. 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
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);
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);
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));
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);
// 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 daraufremoveAttribute()auf, wird das Attribut aus dieser Liste gestrichen und nicht inremoveAttributeseingetragen. 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 (onclickusw.) undjavascript:-URLs ohnehin, unabhängig von der Konfiguration. BeisetHTMLUnsafe()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ätzlichremoveUnsafe()auf. - Attributnamen ohne Namensraum gelten nur für Attribute ohne Namensraum.
\"href\"erfasst also nichtxlink:href. - Für
data-*-Attribute gibt es mitsetDataAttributes()eine eigene Steuerung.