Sanitizadores en el navegador y Trusted Types

Un sanitizador de HTML recibe marcado, lo analiza como lo haría el navegador y devuelve solo las etiquetas y atributos de su lista de permitidos. En el navegador se suele usar una biblioteca probada de código abierto (DOMPurify es la más extendida), y hay una API nativa de sanitización en proceso de estandarización cuyo soporte conviene comprobar antes de depender de ella. Dos reglas valen para cualquiera: se sanitiza lo más cerca posible del sumidero, y el resultado no se vuelve a modificar como cadena. Cualquier reemplazo posterior opera sobre texto que ya nadie revisa.

Abre el laboratorio y lee EditorNota.vue junto con limpiarHtml.js.

Un sanitizador protege lo que su configuración le dice que proteja. Cada etiqueta que se añade a la lista de permitidos amplía lo que un externo puede meter en la página, y algunas lo amplían mucho más que otras: no es lo mismo permitir una negrita que permitir que la nota cargue otro documento completo dentro del panel. Las excepciones suelen nacer de un pedido de negocio razonable y quedarse para siempre.

Lee la lista de etiquetas de limpiarHtml.js y el comentario que la acompaña.

Trusted Types es una especificación del W3C que se activa con la política de contenido. La directiva require-trusted-types-for 'script' hace que los sumideros peligrosos del DOM (como innerHTML o document.write) rechacen las cadenas de texto y solo acepten objetos creados por una política con nombre. La directiva trusted-types dice qué nombres de política se pueden crear. Así, el código que convierte texto en marcado queda concentrado en unas pocas funciones que se pueden revisar. Desde 2026 lo soportan las versiones actuales de los navegadores principales; en uno antiguo que no lo soporte, la directiva no tiene efecto, así que es una capa más y no reemplaza al escape ni al sanitizador.

La cabecera puede ir en modo solo informe: el navegador no bloquea nada, pero envía un informe por cada violación. Así se mide qué hay que migrar antes de hacerla obligatoria.

Lee cabecera-csp.txt y la primera semana de informes-csp-semana.txt. Cada fila de require-trusted-types-for es un punto del código publicado que todavía entrega una cadena a un sumidero; un mismo archivo puede aparecer en varias líneas. La fila de la directiva trusted-types es otra cosa: una política que intentó crearse con un nombre que la cabecera no permite.

En la segunda semana desaparecen los informes de sumideros, y el equipo concluye en bitacora-plataforma.txt que el panel está listo. La especificación prevé una política llamada default: el navegador la invoca cuando una cadena llega a un sumidero, y lo que ella devuelva es lo que se escribe. Lee politicas-trusted-types.js y la fecha del cambio en la bitácora.