DOMPurify v3.4.15

seguridad

### Usando la versión de producción minificada y probada (source-map disponible)```html
<script type="text/javascript" src="dist/purify.min.js"></script>

O quizá esto, si te encanta trabajar con Angular o similares:```js
import DOMPurify from 'dompurify';

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

### ¿Hay algún riesgo de dispararse en el pie?

Bueno, ten en cuenta que si _primero_ sanitizas el HTML y luego lo modificas _después_, podrías fácilmente **anular los efectos de la sanitización**. Si pasas el marcado sanitizado a otra librería _después_ de la sanitización, asegúrate de que esa librería no manipule el HTML por su cuenta. Consulta los [Objetivos de Seguridad y el Modelo de Amenazas](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model) para conocer recetas de uso seguro y las etiquetas/atributos que vale la pena reconsiderar, y las [Clases de Ataque e Historial de Bypass](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History) para entender por qué el post-procesamiento y el cambio del contexto del marcado anulan la sanitización.

### Vale, tiene sentido, sigamos adelante

Después de sanitizar tu marcado, también puedes echar un vistazo a la propiedad `DOMPurify.removed` y averiguar qué elementos y atributos fueron descartados. Por favor, **no uses** esta propiedad para tomar decisiones críticas de seguridad. Es solo una pequeña ayuda para mentes curiosas.

### Ejecutar DOMPurify en el servidor

DOMPurify técnicamente también funciona en el lado del servidor con Node.js. Nuestro soporte busca seguir el [ciclo de versiones de Node.js](https://nodejs.org/en/about/previous-releases).

Ejecutar DOMPurify en el servidor requiere que haya un DOM presente, lo cual probablemente no sea una sorpresa. Normalmente, [jsdom](https://github.com/jsdom/jsdom) es la herramienta de elección y **recomendamos encarecidamente** usar la última versión de _jsdom_.

¿Por qué? Porque se sabe que las versiones antiguas de _jsdom_ tienen errores que resultan en XSS _incluso si_ DOMPurify hace todo 100% correctamente. Hay **vectores de ataque conocidos** en, por ejemplo, _jsdom v19.0.0_ que están corregidos en _jsdom v20.0.0_ — y realmente recomendamos mantener _jsdom_ actualizado por eso.

Ten en cuenta también que existen herramientas como [happy-dom](https://github.com/capricorn86/happy-dom), pero **no se consideran seguras** en este momento. Combinar DOMPurify con _happy-dom_ no se recomienda actualmente y probablemente conducirá a XSS. Para conocer el contexto de por qué el DOM del lado del servidor que elijas forma parte de tu base de confianza informática, consulta las [Clases de Ataque e Historial de Bypass](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History).

Aparte de eso, puedes usar DOMPurify en el servidor sin problema. Probablemente. Esto realmente depende de _jsdom_ o del DOM que utilices en el lado del servidor. Si puedes vivir con eso, así es como lo haces funcionar:```bash
npm install dompurify
npm install jsdom

O incluso esto, si prefieres trabajar con imports:```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>');

I need the actual content of chunk 19 to translate it. Please provide the Markdown text you want translated from English to Spanish.```js
import DOMPurify from 'isomorphic-dompurify';

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

Estos son solo una muestra. Para ver la taxonomía completa de clases de ataque de las que provienen estas muestras — XSS por mutación, confusión de espacios de nombres, DOM clobbering, fugas de rawtext y más — consulta [Attack Classes & Bypass History](https://github.com/cure53/DOMPurify/wiki/Attack-Classes-&-Bypass-History).

## ¿Qué es compatible?

DOMPurify actualmente es compatible con HTML5, SVG y MathML. DOMPurify permite por defecto CSS y atributos de datos personalizados de HTML. DOMPurify también es compatible con Shadow DOM — y sanea plantillas DOM de forma recursiva. DOMPurify también te permite sanear HTML para usarlo con las API `$()` y `elm.html()` de jQuery sin ningún problema conocido. Para ver el conjunto exacto de elementos y atributos permitidos por defecto, consulta la página wiki [Default TAGs & ATTRIBUTEs allow-list & blocklist](https://github.com/cure53/DOMPurify/wiki/Default-TAGs-ATTRIBUTEs-allow-list-&-blocklist).

## ¿Qué pasa con navegadores heredados como Internet Explorer?

DOMPurify no hace nada en absoluto. Simplemente devuelve exactamente la cadena que le proporcionaste. DOMPurify expone una propiedad llamada `isSupported`, que te indica si podrá realizar su trabajo, para que puedas idear tu propio plan de respaldo.

## ¿Qué pasa con DOMPurify y Trusted Types?

En la versión 1.0.9, se añadió a DOMPurify soporte para la [Trusted Types API](https://github.com/w3c/webappsec-trusted-types) ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API)).
En la versión 2.0.0, se añadió una bandera de configuración para controlar el comportamiento de DOMPurify al respecto.

Cuando se usa `DOMPurify.sanitize` en un entorno donde la Trusted Types API está disponible y `RETURN_TRUSTED_TYPE` está establecido en `true`, intenta devolver un valor `TrustedHTML` en lugar de una cadena (el comportamiento para las opciones de configuración `RETURN_DOM` y `RETURN_DOM_FRAGMENT` no cambia).

Ten en cuenta que para crear una política en `trustedTypes` usando DOMPurify, se requiere `RETURN_TRUSTED_TYPE: false`, ya que `createHTML` espera una cadena normal, no `TrustedHTML`. El ejemplo siguiente lo muestra.```js
window.trustedTypes.createPolicy('default', {
  createHTML: (to_escape) =>
    DOMPurify.sanitize(to_escape, { RETURN_TRUSTED_TYPE: false }),
});

No **le** pases tu propia política de envoltura de vuelta a DOMPurify como su `TRUSTED_TYPES_POLICY` (por ejemplo, mediante `DOMPurify.setConfig({ TRUSTED_TYPES_POLICY: myPolicy })`) cuando el `createHTML` de esa política ya llama a `DOMPurify.sanitize`. Eso es circular por definición: sanitizar llamaría a la política, que sanitiza llamando a DOMPurify de nuevo, y DOMPurify lanzará un `TypeError` descriptivo para evitar la recursión infinita. Tu propia política debería llamar a DOMPurify; DOMPurify no debería configurarse para llamar a tu política.

Si quieres que este patrón de política `default` se aplique automáticamente en toda una página, de modo que cada sumidero HTML quede sanitizado, incluido el código heredado, los widgets de terceros y las miles de asignaciones `innerHTML` que no puedes encontrar o reescribir fácilmente, echa un vistazo a [DOMFortify](https://github.com/cure53/DOMFortify). Instala exactamente una política `default` de Trusted Types respaldada por DOMPurify y rechaza de plano los sumideros de scripts (`eval`, `script.src`, ...). Es deliberadamente un proyecto separado: DOMPurify sigue siendo un sanitizador enfocado, y DOMFortify maneja la capa de aplicación a nivel de documento que está intencionalmente fuera del alcance de DOMPurify.

## ¿Puedo configurar DOMPurify?

Sí. Los valores de configuración predeterminados incluidos ya son bastante buenos, pero por supuesto puedes sobrescribirlos. Revisa la carpeta [`/demos`](https://github.com/cure53/DOMPurify/tree/main/demos) para ver varios ejemplos de cómo puedes [personalizar DOMPurify](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this).

Antes de ampliar la lista de permitidos (`ADD_TAGS`, `ADD_ATTR`, `CUSTOM_ELEMENT_HANDLING`, ...) o relajar un valor predeterminado, vale la pena revisar las [etiquetas y atributos que deberías pensar dos veces](https://github.com/cure53/DOMPurify/wiki/Security-Goals-&-Threat-Model#dangerous-tags-and-attributes-think-twice-before-allow-listing): algunos son peligrosos de maneras no evidentes.

### Configuración general```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 });

### Comportamiento de control relacionado con los Custom Elements```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>

### Control de valores de atributos permitidos```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,
});

### Influencia en cómo saneamos```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',
});

Hay incluso [más ejemplos aquí](https://github.com/cure53/DOMPurify/tree/main/demos#what-is-this), que muestran cómo puedes ejecutar, personalizar y configurar DOMPurify para adaptarlo a tus necesidades.

## Configuración persistente

En lugar de pasar repetidamente la misma configuración a `DOMPurify.sanitize`, puedes usar el método `DOMPurify.setConfig`. Tu configuración persistirá hasta tu siguiente llamada a `DOMPurify.setConfig`, o hasta que invoques `DOMPurify.clearConfig` para restablecerla. Recuerda que solo hay una configuración activa, lo que significa que una vez establecida, todos los parámetros de configuración adicionales pasados a `DOMPurify.sanitize` se ignoran.

## Hooks

DOMPurify te permite ampliar su funcionalidad adjuntando una o más funciones con el método `DOMPurify.addHook` a uno de los siguientes hooks:

- `beforeSanitizeElements`
- `uponSanitizeElement` (sin 's' - se llama para cada elemento)
- `afterSanitizeElements`
- `beforeSanitizeAttributes`
- `uponSanitizeAttribute`
- `afterSanitizeAttributes`
- `beforeSanitizeShadowDOM`
- `uponSanitizeShadowNode`
- `afterSanitizeShadowDOM`

Pasa el nodo DOM actualmente procesado, cuando sea necesario un literal con datos verificados de nodo y atributo, y la configuración de DOMPurify a la función de devolución de llamada. Echa un vistazo a la [demo del hook MentalJS](https://github.com/cure53/DOMPurify/blob/main/demos/hooks-mentaljs-demo.html) para ver cómo se puede usar la API de forma adecuada.

_Ejemplo_:```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

Tabla de contenidos

¿Qué hace?

¿Cómo lo uso?

Usando la versión sin minificar (con source-map disponible)```html

¿Hay una demo?

¿Y si encuentro un fallo de seguridad?

¿Algunas muestras de purificación, por favor?

Controla nuestras listas de permitidos y bloqueados```js

Comportamiento de control relacionado con los valores de URI```js

Influir en el tipo de retorno```js

Influencia sobre dónde saneamos```js

Una nota sobre cómo llamar a sanitize() desde un hook

Configuración Eliminada

Integración Continua

Desarrollo y contribución

Instalación (npm i)

Scripts

Lista de Correo de Seguridad

¿Quién contribuyó?

Categorías

Una nota sobre cómo llamar a `sanitize()` desde un hook

Instalación (`npm i`)