DOMPurify v3.4.15

Sicherheits

### Verwendung der minifizierten und getesteten Produktionsversion (Source-Map verfügbar)```html
<script type="text/javascript" src="dist/purify.min.js"></script>

Oder vielleicht das hier, wenn du gerne mit Angular oder Ähnlichem arbeitest:```js
import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize('<b>hello there</b>');

### Gibt es irgendwelche Stolperfallen?

Nun, bitte beachten Sie: Wenn Sie HTML _zuerst_ bereinigen und es _danach_ ändern, können Sie leicht **die Wirkung der Bereinigung zunichtemachen**. Wenn Sie das bereinigte Markup _nach_ der Bereinigung an eine andere Bibliothek weitergeben, stellen Sie bitte sicher, dass die Bibliothek nicht selbst am HTML herummanipuliert. Siehe [Security Goals & Threat Model](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) für Rezepte zur sicheren Verwendung und die Tags/Attribute, bei denen man zweimal nachdenken sollte, sowie [Attack Classes & Bypass History](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History) dafür, warum Nachbearbeitung und das Ändern des Markup-Kontexts die Bereinigung aushebeln.

### Okay, ergibt Sinn, machen wir weiter

Nach der Bereinigung Ihres Markups können Sie sich auch die Eigenschaft `DOMPurify.removed` ansehen und herausfinden, welche Elemente und Attribute entfernt wurden. Bitte **verwenden Sie** diese Eigenschaft **nicht** für sicherheitskritische Entscheidungen. Dies ist nur eine kleine Hilfe für neugierige Gemüter.

### DOMPurify auf dem Server ausführen

DOMPurify funktioniert technisch auch serverseitig mit Node.js. Unser Support bemüht sich, dem [Node.js-Release-Zyklus](https://nodejs.org/en/about/previous-releases) zu folgen.

Um DOMPurify auf dem Server auszuführen, muss ein DOM vorhanden sein, was wohl keine Überraschung ist. Normalerweise ist [jsdom](https://github.com/jsdom/jsdom) das Mittel der Wahl, und wir **empfehlen dringend** die Verwendung der neuesten Version von _jsdom_.

Warum? Weil ältere Versionen von _jsdom_ dafür bekannt sind, auf eine Weise fehlerhaft zu sein, die zu XSS führt, _selbst wenn_ DOMPurify alles zu 100 % korrekt macht. Es gibt **bekannte Angriffsvektoren** in z. B. _jsdom v19.0.0_, die in _jsdom v20.0.0_ behoben sind – und wir empfehlen wirklich, _jsdom_ deshalb aktuell zu halten.

Bitte beachten Sie auch, dass Tools wie [happy-dom](https://github.com/capricorn86/happy-dom) existieren, aber derzeit **nicht als sicher gelten**. Die Kombination von DOMPurify mit _happy-dom_ wird derzeit nicht empfohlen und führt wahrscheinlich zu XSS. Hintergrundinformationen dazu, warum das von Ihnen gewählte serverseitige DOM Teil Ihrer vertrauenswürdigen Rechenbasis ist, finden Sie unter [Attack Classes & Bypass History](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History).

Abgesehen davon können Sie DOMPurify bedenkenlos auf dem Server verwenden. Wahrscheinlich. Das hängt wirklich von _jsdom_ oder welchem DOM auch immer Sie serverseitig verwenden ab. Wenn Sie damit leben können, funktioniert es so:```bash
npm install dompurify
npm install jsdom

Oder sogar dies, wenn Sie lieber mit Imports arbeiten:```js
import { JSDOM } from 'jsdom';
import DOMPurify from 'dompurify';

const window = new JSDOM('').window;
const purify = DOMPurify(window);
const clean = purify.sanitize('<b>hello there</b>');

| `--no-color` | Deaktiviert farbige Ausgabe |
| `--no-banner` | Unterdrückt das Banner |
| `--log-level <level>` | Legt den Log-Level fest (z. B. `info`, `debug`) |
| `--log-file <path>` | Schreibt Logs in eine Datei |
| `--proxy <url>` | Legt einen Proxy fest |
| `--timeout <seconds>` | Legt das Timeout fest |
| `--threads <n>` | Legt die Anzahl der Threads fest |
| `--rate-limit <n>` | Legt das Rate-Limit fest |
| `--output <file>` | Schreibt die Ausgabe in eine Datei |
| `--format <type>` | Legt das Ausgabeformat fest (z. B. `json`, `csv`) |
| `--verbose` | Aktiviert ausführliche Ausgabe |
| `--quiet` | Unterdrückt die Ausgabe |
| `--version` | Zeigt die Version an |
| `--help` | Zeigt die Hilfe an |```js
import DOMPurify from 'isomorphic-dompurify';

const clean = DOMPurify.sanitize('<s>hello</s>');

Das ist nur ein kleiner Vorgeschmack. Für die vollständige Taxonomie der Angriffsklassen, aus denen diese Beispiele stammen – Mutation XSS, Namespace Confusion, DOM Clobbering, Rawtext Breakouts und mehr – siehe [Attack Classes & Bypass History](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History).

## Was wird unterstützt?

DOMPurify unterstützt derzeit HTML5, SVG und MathML. DOMPurify erlaubt standardmäßig CSS und benutzerdefinierte HTML-Datenattribute. DOMPurify unterstützt außerdem das Shadow DOM – und bereinigt DOM-Templates rekursiv. DOMPurify ermöglicht es dir zudem, HTML für die Verwendung mit der jQuery-`$()`- und `elm.html()`-API zu bereinigen, ohne bekannte Probleme. Für die genaue Menge an Elementen und Attributen, die standardmäßig erlaubt sind, siehe die Wiki-Seite [Default TAGs & ATTRIBUTEs allow-list & blocklist](https://github.com/cure53/DOMPurify/wiki/Default-TAGs-ATTRIBUTEs-allow-list-&-blocklist).

## Was ist mit Legacy-Browsern wie Internet Explorer?

DOMPurify macht überhaupt nichts. Es gibt einfach genau den String zurück, den du ihm übergeben hast. DOMPurify stellt eine Eigenschaft namens `isSupported` bereit, die dir mitteilt, ob es seine Aufgabe erfüllen kann, sodass du deinen eigenen Backup-Plan entwickeln kannst.

## Was ist mit DOMPurify und Trusted Types?

In Version 1.0.9 wurde Unterstützung für die [Trusted Types API](https://github.com/w3c/webappsec-trusted-types) ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API)) zu DOMPurify hinzugefügt.
In Version 2.0.0 wurde ein Konfigurations-Flag hinzugefügt, um das Verhalten von DOMPurify in dieser Hinsicht zu steuern.

Wenn `DOMPurify.sanitize` in einer Umgebung verwendet wird, in der die Trusted Types API verfügbar ist und `RETURN_TRUSTED_TYPE` auf `true` gesetzt ist, versucht es, einen `TrustedHTML`-Wert anstelle eines Strings zurückzugeben (das Verhalten für die Konfigurationsoptionen `RETURN_DOM` und `RETURN_DOM_FRAGMENT` ändert sich nicht).

Beachte, dass zum Erstellen einer Policy in `trustedTypes` unter Verwendung von DOMPurify `RETURN_TRUSTED_TYPE: false` erforderlich ist, da `createHTML` einen normalen String erwartet, nicht `TrustedHTML`. Das folgende Beispiel zeigt dies.```js
window.trustedTypes.createPolicy('default', {
  createHTML: (to_escape) =>
    DOMPurify.sanitize(to_escape, { RETURN_TRUSTED_TYPE: false }),
});

Gib **nicht** deine eigene Wrapping-Policy als `TRUSTED_TYPES_POLICY` an DOMPurify zurück (zum Beispiel über `DOMPurify.setConfig({ TRUSTED_TYPES_POLICY: myPolicy })`), wenn die `createHTML` dieser Policy bereits `DOMPurify.sanitize` aufruft. Das ist per Definition zirkulär - das Sanitizing würde die Policy aufrufen, die wiederum durch den Aufruf von DOMPurify sanitisiert - und DOMPurify wird einen aussagekräftigen `TypeError` werfen, um die unendliche Rekursion zu verhindern. Deine eigene Policy sollte DOMPurify aufrufen; DOMPurify sollte nicht so konfiguriert werden, dass es deine Policy aufruft.

Wenn du dieses `default`-Policy-Muster automatisch auf eine gesamte Seite anwenden möchtest - sodass jede HTML-Senke sanitisiert wird, einschließlich Legacy-Code, Drittanbieter-Widgets und der Tausenden von `innerHTML`-Zuweisungen, die du nicht leicht finden oder umschreiben kannst - dann wirf einen Blick auf [DOMFortify](https://github.com/cure53/DOMFortify). Es installiert genau eine solche Trusted-Types-`default`-Policy, die auf DOMPurify basiert, und lehnt Script-Senken (`eval`, `script.src`, ...) kategorisch ab. Es ist bewusst ein separates Projekt: DOMPurify bleibt ein fokussierter Sanitizer, und DOMFortify übernimmt die dokumentweite Durchsetzungsschicht, die absichtlich außerhalb des Zuständigkeitsbereichs von DOMPurify liegt.

## Kann ich DOMPurify konfigurieren?

Ja. Die enthaltenen Standardkonfigurationswerte sind bereits ziemlich gut - aber du kannst sie natürlich überschreiben. Schau dir den Ordner [`/demos`](https://github.com/cure53/DOMPurify/tree/main/demos) an, um eine Reihe von Beispielen zu sehen, wie du [DOMPurify anpassen](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this) kannst.

Bevor du die Allow-List erweiterst (`ADD_TAGS`, `ADD_ATTR`, `CUSTOM_ELEMENT_HANDLING`, …) oder eine Standardeinstellung lockerst, lohnt es sich, die [Tags und Attribute, bei denen man zweimal nachdenken sollte](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model#dangerous-tags-and-attributes-think-twice-before-allow-listing) zu überfliegen - einige sind auf nicht offensichtliche Weise gefährlich.

### Allgemeine Einstellungen```js
// strip {{ ... }}, ${ ... } and <% ... %> to make output safe for template systems
// be careful please, this mode is not recommended for production usage.
// allowing template parsing in user-controlled HTML is not advised at all.
// only use this mode if there is really no alternative.
const clean = DOMPurify.sanitize(dirty, { SAFE_FOR_TEMPLATES: true });

// change how e.g. comments containing risky HTML characters are treated.
// be very careful, this setting should only be set to `false` if you really only handle
// HTML and nothing else, no SVG, MathML or the like.
// Otherwise, changing from `true` to `false` will lead to XSS in this or some other way.
const clean = DOMPurify.sanitize(dirty, { SAFE_FOR_XML: false });

### Verhalten bei benutzerdefinierten Elementen steuern```js
// DOMPurify allows to define rules for Custom Elements. When using the CUSTOM_ELEMENT_HANDLING
// literal, it is possible to define exactly what elements you wish to allow (by default, none are allowed).
//
// The same goes for their attributes. By default, the built-in or configured allow.list is used.
//
// You can use a RegExp literal to specify what is allowed or a predicate, examples for both can be seen below.
// When using a predicate function for attributeNameCheck, it can optionally receive the tagName as a second parameter
// for more granular control over which attributes are allowed for specific elements.
// The default values are very restrictive to prevent accidental XSS bypasses. Handle with great care!

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: null, // no custom elements are allowed
      attributeNameCheck: null, // default / standard attribute allow-list is used
      allowCustomizedBuiltInElements: false, // no customized built-ins allowed
    },
  }
); // <div is=""></div>

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: /^foo-/, // allow all tags starting with "foo-"
      attributeNameCheck: /baz/, // allow all attributes containing "baz"
      allowCustomizedBuiltInElements: true, // customized built-ins are allowed
    },
  }
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>

const clean = DOMPurify.sanitize(
  '<foo-bar baz="foobar" forbidden="true"></foo-bar><div is="foo-baz"></div>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: (tagName) => tagName.match(/^foo-/), // allow all tags starting with "foo-"
      attributeNameCheck: (attr) => attr.match(/baz/), // allow all containing "baz"
      allowCustomizedBuiltInElements: true, // allow customized built-ins
    },
  }
); // <foo-bar baz="foobar"></foo-bar><div is="foo-baz"></div>

// Example with attributeNameCheck receiving tagName as a second parameter
const clean = DOMPurify.sanitize(
  '<element-one attribute-one="1" attribute-two="2"></element-one><element-two attribute-one="1" attribute-two="2"></element-two>',
  {
    CUSTOM_ELEMENT_HANDLING: {
      tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
      attributeNameCheck: (attr, tagName) => {
        if (tagName === 'element-one') {
          return ['attribute-one'].includes(attr);
        } else if (tagName === 'element-two') {
          return ['attribute-two'].includes(attr);
        } else {
          return false;
        }
      },
      allowCustomizedBuiltInElements: false,
    },
  }
); // <element-one attribute-one="1"></element-one><element-two attribute-two="2"></element-two>

### Zulässige Attributwerte kontrollieren```js
// allow external protocol handlers in URL attributes (default is false, be careful, XSS risk)
// by default only http, https, ftp, ftps, tel, mailto, callto, sms, cid, xmpp and matrix are allowed.
const clean = DOMPurify.sanitize(dirty, { ALLOW_UNKNOWN_PROTOCOLS: true });

// allow specific protocol handlers in URL attributes via regex (default is false, be careful, XSS risk)
// by default only (protocol-)relative URLs, http, https, ftp, ftps, tel, mailto, callto, sms, cid, xmpp and matrix are allowed.
// Default RegExp: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;
const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_URI_REGEXP:
    /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
});

### Beeinflussen, wie wir bereinigen```js
// return entire document including <html> tags (default is false)
const clean = DOMPurify.sanitize(dirty, { WHOLE_DOCUMENT: true });

// disable DOM Clobbering protection on output (default is true, handle with care, minor XSS risks here)
const clean = DOMPurify.sanitize(dirty, { SANITIZE_DOM: false });

// enforce strict DOM Clobbering protection via namespace isolation (default is false)
// when enabled, isolates the namespace of named properties (i.e., `id` and `name` attributes)
// from JS variables by prefixing them with the string `user-content-`
const clean = DOMPurify.sanitize(dirty, { SANITIZE_NAMED_PROPS: true });

// keep an element's content when the element is removed (default is true)
const clean = DOMPurify.sanitize(dirty, { KEEP_CONTENT: false });

// glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases (default is false)
const clean = DOMPurify.sanitize(dirty, { FORCE_BODY: true });

// remove all <a> elements under <p> elements that are removed
const clean = DOMPurify.sanitize(dirty, {
  FORBID_CONTENTS: ['a'],
  FORBID_TAGS: ['p'],
});

// extend the default FORBID_CONTENTS list to also remove <a> elements under <p> elements
const clean = DOMPurify.sanitize(dirty, {
  ADD_FORBID_CONTENTS: ['a'],
  FORBID_TAGS: ['p'],
});

// change the parser type so sanitized data is treated as XML and not as HTML, which is the default
const clean = DOMPurify.sanitize(dirty, {
  PARSER_MEDIA_TYPE: 'application/xhtml+xml',
});

Es gibt sogar [weitere Beispiele hier](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this), die zeigen, wie du DOMPurify ausführen, anpassen und konfigurieren kannst, um es an deine Bedürfnisse anzupassen.

## Persistente Konfiguration

Anstatt wiederholt dieselbe Konfiguration an `DOMPurify.sanitize` zu übergeben, kannst du die Methode `DOMPurify.setConfig` verwenden. Deine Konfiguration bleibt bestehen, bis zu deinem nächsten Aufruf von `DOMPurify.setConfig` oder bis du `DOMPurify.clearConfig` aufrufst, um sie zurückzusetzen. Denke daran, dass es nur eine aktive Konfiguration gibt, was bedeutet, dass sobald sie gesetzt ist, alle zusätzlichen Konfigurationsparameter, die an `DOMPurify.sanitize` übergeben werden, ignoriert werden.

## Hooks

DOMPurify ermöglicht es dir, seine Funktionalität zu erweitern, indem du eine oder mehrere Funktionen mit der Methode `DOMPurify.addHook` an einen der folgenden Hooks anhängst:

- `beforeSanitizeElements`
- `uponSanitizeElement` (Kein 's' - wird für jedes Element aufgerufen)
- `afterSanitizeElements`
- `beforeSanitizeAttributes`
- `uponSanitizeAttribute`
- `afterSanitizeAttributes`
- `beforeSanitizeShadowDOM`
- `uponSanitizeShadowNode`
- `afterSanitizeShadowDOM`

Es übergibt den aktuell verarbeiteten DOM-Knoten, bei Bedarf ein Literal mit verifizierten Knoten- und Attributdaten und die DOMPurify-Konfiguration an den Callback. Schau dir die [MentalJS-Hook-Demo](https://github.com/cure53/DOMPurify/blob/main/demos/hooks-mentaljs-demo.html) an, um zu sehen, wie die API schön verwendet werden kann.

_Beispiel_:```js
DOMPurify.addHook(
  'uponSanitizeAttribute',
  function (currentNode, hookEvent, config) {
    // Do something with the current node
    // You can also mutate hookEvent for current node (i.e. set hookEvent.forceKeepAttr = true)
    // For other than 'uponSanitizeAttribute' hook types hookEvent equals to null
  }
);

DOMPurify v3.4.15

DOMPurify

Inhaltsverzeichnis

Was macht es?

Wie verwende ich es?

Verwendung der nicht minimierten Version (Source-Map verfügbar)```html

Gibt es eine Demo?

Was, wenn ich einen Sicherheitsfehler finde?

Ein paar Bereinigungsbeispiele, bitte?

Steuerung unserer Allow-Listen und Block-Listen```js

Verhalten bei URI-Werten steuern```js

Den Rückgabetyp beeinflussen```js

Einflussbereich der Bereinigung```js

Ein Hinweis zum Aufruf von sanitize() aus einem Hook

Entfernte Konfiguration

Kontinuierliche Integration

Entwicklung und Mitwirken

Installation (npm i)

Skripte

Sicherheits-Mailingliste

Wer hat beigetragen?

Kategorien

Ein Hinweis zum Aufruf von `sanitize()` aus einem Hook

Installation (`npm i`)