Una Primera Mirada a la API HTML Sanitizer

Si alguna vez has usado innerHTML para renderizar contenido generado por usuarios, has aceptado cierto nivel de riesgo de XSS. La solución habitual es incorporar una biblioteca como DOMPurify para sanitizar primero la cadena de texto. Eso funciona, pero significa enviar JavaScript adicional y confiar en que un tercero se mantenga al día con el comportamiento evolutivo del parser del navegador. La API HTML Sanitizer es la respuesta del navegador a este problema—y vale la pena entenderla ahora, incluso si aún no está lista para uso en producción en todos lados.

Por Qué innerHTML Siempre Ha Sido un Riesgo

innerHTML hace exactamente lo que le pides: parsea una cadena e inyecta el resultado en el DOM, sin hacer preguntas. Eso es conveniente hasta que alguien pasa <img src=x onerror="stealCookies()"> como comentario o nombre de usuario.

Bibliotecas como DOMPurify abordan esto parseando la cadena ellas mismas, recorriendo el árbol DOM resultante y eliminando cualquier cosa peligrosa antes de devolvértelo. Es efectivo, pero frágil. El comportamiento de parseo del navegador cambia con el tiempo, y una biblioteca que vive en el espacio de usuario tiene que perseguir constantemente esos cambios. El navegador mismo, por el contrario, siempre sabe exactamente cómo parseará y ejecutará un fragmento de marcado dado.

Qué Proporciona la API HTML Sanitizer

La API HTML Sanitizer nativa traslada la sanitización al navegador. En lugar de establecer innerHTML directamente, usas nuevos métodos que parsean, sanitizan e inyectan en un solo paso.

Los métodos seguros son aquellos a los que recurrirás con más frecuencia:

• Element.setHTML()
• ShadowRoot.setHTML()
• Document.parseHTML()

Estos siempre eliminan contenido inseguro contra XSS—etiquetas <script>, atributos de manejadores de eventos como onclick, URLs javascript: en atributos de navegación—independientemente de la configuración que pases. Sin ninguna configuración, setHTML() es esencialmente un reemplazo directo para innerHTML con protección automática contra XSS:

const userContent = `<p>Hello!</p><script>alert('xss')<\/script>`;
document.getElementById("output").setHTML(userContent);
// Renderiza: <p>Hello!</p>
// El <script> se elimina silenciosamente

Los métodos inseguros—setHTMLUnsafe(), ShadowRoot.setHTMLUnsafe() y Document.parseHTMLUnsafe()—te dan más control. Aplican solo la configuración del sanitizador que proporciones, sin imponer la línea base de seguridad contra XSS. Usa estos solo cuando tengas una razón específica para permitir elementos o atributos que los métodos seguros bloquearían, y solo con una configuración cuidadosamente construida.

Configurando el Sanitizer

Ambas familias de métodos aceptan una instancia opcional de Sanitizer o un diccionario de configuración. Puedes construir una configuración de permitidos (especificar exactamente qué está permitido, eliminar todo lo demás) o una configuración de eliminados (especificar qué eliminar, permitir todo lo demás).

Una configuración de permitidos es generalmente la opción más segura:

const sanitizer = new Sanitizer({
  elements: ["p", "b", "em", "a"],
  attributes: ["href"]
});

document.getElementById("comments").setHTML(untrustedInput, { sanitizer });

La clase Sanitizer también expone métodos como allowElement() y removeElement() para modificar configuraciones programáticamente mientras las mantiene internamente consistentes.

Soporte de Navegadores y Qué Hacer al Respecto

Aquí está el panorama honesto: a principios de 2026, la API HTML Sanitizer apenas ha comenzado a implementarse en los navegadores. Firefox 148 agregó soporte, y Chrome 146 lo siguió, pero la disponibilidad amplia entre navegadores todavía se está poniendo al día. Aún no es parte de la plataforma web Baseline, lo que significa que no puedes confiar en que esté disponible para todos tus usuarios hoy. Puedes seguir el soporte actual en Can I Use.

Para código en producción, usa detección de características y recurre a DOMPurify como alternativa:

if (typeof Element.prototype.setHTML === "function") {
  element.setHTML(untrustedHTML);
} else {
  element.innerHTML = DOMPurify.sanitize(untrustedHTML);
}

Conclusión

La API HTML Sanitizer representa exactamente el tipo de cosa que los estándares de navegadores deberían hacer: tomar un patrón peligroso y ampliamente mal manejado y hacer que el camino seguro sea el camino fácil. setHTML() versus innerHTML realmente no es un debate todavía—el soporte de navegadores toma esa decisión por ti. Pero entender la API ahora significa que estarás listo para adoptarla a medida que el soporte se amplíe, y tendrás una imagen más clara de lo que la sanitización HTML nativa del navegador está realmente diseñada para hacer.

Preguntas Frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.