Ejemplo de API Dom HTML Sanitizer

Esta página no está completa.

Contexto seguro

Esta función solo está disponible en contextos seguros (HTTPS), en algunos o todos los navegadores compatibles.

La API de HTML Sanitizer permite a los desarrolladores tomar cadenas de HTML que no sean de confianza y desinfectarlas para una inserción segura en el DOM de un documento.

Conceptos y uso de la API Sanitizer

Las aplicaciones web a menudo necesitan trabajar con cadenas de HTML en el lado del cliente, tal vez como parte de una solución de creación de plantillas del lado del cliente, tal vez como parte de la representación del contenido generado por el usuario. Es difícil hacerlo de forma segura. La API Sanitizer permite renderizar HTML de manera segura.

Para acceder a la API, usaría el constructor, que crea un Sanitizer.Sanitizer instancia y permite una lista configurable de elementos y atributos permitidos o no permitidos.

El caso de uso más común, la prevención de XSS, es manejado por las listas predeterminadas integradas, de modo que la creación de un Sanitizer.Sanitizer con una configuración personalizada solo es necesario para manejar casos de uso adicionales específicos de la aplicación.

La API tiene dos métodos para desinfectar cadenas. Uno devuelve una cadena y el otro devuelve un fragmento de documento. Consulte la sección de ejemplos a continuación para obtener más información.

Interfaces API Sanitizer

Sanitizer

los Sanitizer interfaz de la HTML Sanitizer API proporciona la funcionalidad para tomar cadenas de HTML que no son de confianza y desinfectarlas para una inserción segura en el DOM de un documento.

Ejemplos de

Este ejemplo muestra el resultado de desinfectar una cuerda usando el Sanitizer.sanitizeToString() método. A String se devuelve con no permitido script y blink elementos eliminados.

// our input string to clean
const stringToClean = 'Some text <b><i>with</i></b> <blink>tags</blink>, including a rogue script <script>alert(1)</script> def.';

const result = new Sanitizer().sanitizeToString(stringToClean);
console.log(result);
// Logs: "Some text <b><i>with</i></b> <blink>tags</blink>, including a rogue script def."

El otro método disponible es el Sanitizer.sanitize() método. Que es muy similar a lo anterior, sin embargo, devuelve un DocumentFragment con no permitido script y blink elementos eliminados.

// our input string to clean
const stringToClean = 'Some text <b><i>with</i></b> <blink>tags</blink>, including a rogue script <script>alert(1)</script> def.';

const result = new Sanitizer().sanitize(stringToClean);
// Result: A DocumentFragment containing text nodes and a <b> element, with a <i> child element

Especificaciones

Compatibilidad del navegador