DOMPurify: Sanitización de HTML Segura
Aprende a usar DOMPurify para limpiar y sanitizar HTML inseguro antes de renderizarlo, protegiendo tu aplicación contra ataques XSS.
TL;DR - Resumen rápido
- DOMPurify es una librería especializada en sanitizar HTML para prevenir XSS
- Elimina scripts maliciosos mientras preserva el HTML seguro y funcional
- Configura tags y atributos permitidos según tus necesidades específicas
- Usa DOMPurify siempre que renderices contenido HTML no confiable
- Mantiene tu aplicación segura contra nuevas técnicas de ataque XSS
Introducción a DOMPurify
DOMPurify es una librería de JavaScript especializada en sanitizar HTML para prevenir ataques XSS. Con una sola función DOMPurify.sanitize(htmlString), analiza el HTML, elimina automáticamente scripts maliciosos, event handlers como onclick o onerror, y URLs peligrosas como javascript:, mientras preserva el HTML seguro que deseas renderizar.
La sanitización manual con funciones de escape es propensa a errores y difícil de mantener contra vectores de ataque complejos. DOMPurify usa un parser HTML real del navegador (no regex) para detectar y eliminar ataques sofisticados que las funciones manuales no pueden detectar. Es mantenido activamente por expertos en seguridad y actualizado regularmente contra nuevas técnicas de ataque.
Por qué DOMPurify es superior a la sanitización manual
DOMPurify usa un parser HTML real para entender la estructura del documento, lo que le permite detectar y eliminar ataques complejos que las funciones manuales de regex no pueden detectar. Además, es auditado regularmente por expertos en seguridad y tiene un historial comprobado de protección contra XSS.
Instalación y Configuración
DOMPurify es una librería ligera que no tiene dependencias externas, lo que la hace ideal para proyectos de cualquier tamaño. Puedes instalarla usando npm, yarn, o cargarla directamente desde un CDN.
Instalación con npm/yarn
La forma recomendada de instalar DOMPurify es usando npm o yarn. Esto te permite versionar la librería y mantenerla actualizada fácilmente.
Este ejemplo muestra cómo instalar DOMPurify usando npm o yarn. Después de la instalación, puedes importar la librería en tu código usando require (CommonJS) o import (ES Modules).
Uso desde CDN
Si no usas un bundler o necesitas una solución rápida, puedes cargar DOMPurify directamente desde un CDN. Esto es útil para prototipos o proyectos simples.
Este ejemplo muestra cómo cargar DOMPurify desde un CDN y usarlo en el navegador. La función DOMPurify.sanitize está disponible globalmente después de cargar el script.
Uso Básico de DOMPurify
El uso básico de DOMPurify es simple: const clean = DOMPurify.sanitize(dirtyHtml) devuelve el HTML sanitizado. Por defecto, permite tags HTML comunes (p, strong, em, a, ul, li) y atributos seguros (href, class, id), mientras elimina automáticamente <script> tags, event handlers, y URLs peligrosas.
Sanitización de HTML Básico
La función DOMPurify.sanitize(html) elimina automáticamente <script> tags, event handlers como onclick/onerror/onload, y URLs con protocolo javascript: o data:, mientras preserva HTML seguro como <p>, <strong>, <a href="">, y listas.
Este ejemplo muestra cómo sanitizar HTML básico usando DOMPurify. El script malicioso es eliminado automáticamente, mientras que el HTML seguro (párrafos, enlaces, negritas) se preserva correctamente.
DOMPurify es rápido y eficiente
DOMPurify está optimizado para rendimiento y puede procesar grandes cantidades de HTML rápidamente. Usa un parser HTML real y técnicas de optimización para asegurar que la sanitización no afecte significativamente el rendimiento de tu aplicación.
Protección contra Ataques XSS
DOMPurify protege contra vectores de ataque XSS como <script>alert(1)</script>, <img onerror="alert(1)">, <a href="javascript:alert(1)">, <svg><script>, y <iframe onload="alert(1)">. Elimina el código malicioso pero preserva el contenido seguro, convirtiendo <div onclick="alert(1)">Click</div> en <div>Click</div>.
Este ejemplo muestra cómo DOMPurify protege contra diferentes tipos de ataques XSS. Elimina scripts, handlers de eventos onclick/onload, y otros vectores de ataque comunes, mientras preserva el HTML seguro.
Configuración Avanzada
DOMPurify acepta un objeto de configuración como segundo parámetro: DOMPurify.sanitize(html, { ALLOWED_TAGS: ['p', 'strong'], ALLOWED_ATTR: ['class'] }). Esto te da control total sobre qué tags y atributos HTML se preservan, creando listas blancas específicas para cada caso de uso.
Configuración para iframes
Los iframes son peligrosos porque pueden cargar contenido externo no confiable. Usa ALLOWED_URI_REGEXP: /^https:\/\/(youtube\.com|vimeo\.com)\//i para validar que las URLs de iframes provengan solo de dominios confiables como YouTube o Vimeo. Combina con ALLOWED_TAGS: ['iframe'] y ALLOWED_ATTR: ['src', 'width', 'height'] para control completo.
Este ejemplo muestra cómo configurar DOMPurify para permitir iframes de forma segura. La opción ALLOWED_URI_REGEXP controla qué URLs son permitidas en src, href, y otros atributos de URL.
Mejores Prácticas con DOMPurify
Para maximizar la seguridad y el rendimiento al usar DOMPurify, sigue estas mejores prácticas recomendadas por expertos en seguridad.
- Usa listas blancas (ALLOWED_TAGS) en lugar de listas negras siempre que sea posible
- Sanitiza HTML en el servidor, no solo en el cliente, para protección completa
- Mantén DOMPurify actualizado a la última versión para protección contra nuevos ataques
- Combina DOMPurify con Content Security Policy (CSP) para defensa en profundidad
- Prueba tu configuración de sanitización con payloads de ataque conocidos
Este ejemplo muestra cómo implementar mejores prácticas al usar DOMPurify, incluyendo configuración conservadora, sanitización en el servidor, y combinación con otras medidas de seguridad.
Resumen: DOMPurify
Conceptos principales:
- •DOMPurify es una librería especializada en sanitizar HTML para prevenir XSS
- •Elimina scripts maliciosos mientras preserva el HTML seguro y funcional
- •Usa un parser HTML real para detectar ataques complejos que regex no puede
- •Permite configurar tags y atributos permitidos mediante listas blancas
- •Se mantiene actualizado regularmente contra nuevas técnicas de ataque
Mejores prácticas:
- •Usa listas blancas en lugar de listas negras para mayor seguridad
- •Sanitiza HTML en el servidor, no solo en el cliente
- •Mantén DOMPurify actualizado a la última versión disponible
- •Combina DOMPurify con Content Security Policy para defensa en profundidad
- •Configura ALLOWED_URI_REGEXP para validar URLs en iframes y enlaces