Un CMS entrega un párrafo con enlaces y formato. El frontend lo muestra, hasta que ese campo también contiene código que el navegador puede ejecutar. La Sanitizer API actualizada de Chrome 146 ayuda a mostrar HTML de forma más segura. Pero ¿por qué interpretamos esos datos como HTML?
El riesgo comienza al insertar contenido
Usar innerHTML con contenido no confiable puede provocar XSS. El problema no es recuperar datos mediante una API, sino interpretarlos como HTML activo. Para etiquetas, títulos y mensajes corrientes, textContent trata los datos como texto.
container.innerHTML = cmsContent;
container.textContent = userInput;Cuando el formato es necesario
Los redactores pueden necesitar párrafos, enlaces y listas. Element.setHTML() procesa HTML y elimina estructuras consideradas peligrosas para XSS. Chrome anunció esta API en marzo de 2026 y también mencionó Firefox. El ejemplo se basa en la documentación y no se ha ejecutado en varios navegadores.
const container = document.querySelector('#article');
const cmsContent = `<p>Hello</p><img src="x" onerror="alert('XSS')">`;
container.setHTML(cmsContent);Sanitizar no sustituye una política de contenido
Distingue los campos de texto plano de los que aceptan HTML enriquecido. Una propiedad label no debería procesar código HTML arbitrario; un componente de contenido enriquecido puede aplicar reglas documentadas. Revisa vistas previas, plugins y administración.
Prepara los navegadores sin setHTML
MDN indica que la disponibilidad sigue siendo limitada. Detecta la función en cada navegador y webview compatible. Si falta, utiliza una biblioteca de sanitización mantenida y bien configurada. Nunca vuelvas a innerHTML sin filtrar.
if ('setHTML' in Element.prototype) {
container.setHTML(cmsContent);
} else {
// Use a reviewed, safely configured sanitizer fallback.
}Prueba ataques y contenido legítimo
Comprueba atributos de eventos, etiquetas inesperadas y protocolos peligrosos, además de enlaces, listas y tablas legítimas. Verifica la accesibilidad. Content Security Policy, el escape contextual y Trusted Types aportan capas complementarias.
La mayor mejora suele consistir en procesar menos HTML no confiable. Reduce los puntos de inserción y protege de manera coherente los que sean necesarios.
Fuentes
Contacta con nosotros
Cuéntanos cómo podemos ayudarte; responderemos en un plazo de dos días laborables.
