Contenido que trae el usuario
Markdown, HTML, SVG y nombres de fichero: cuatro formas en que datos ajenos acaban interpretados como código dentro de tu ventana, y cómo se pintan sin abrir nada.
Las cuatro vías
El SVG, que es el que sorprende
Merece su párrafo porque casi todo el mundo lo trata como una imagen y no es una imagen: es un documento. Puede llevar scripts, enlaces y referencias a recursos externos.
La diferencia está en cómo lo pintas, y es tajante:
- Como imagen, con la etiqueta de imagen o como fondo: el motor lo trata como recurso gráfico y no ejecuta nada. Es seguro.
- En línea, insertando el marcado en tu documento: es marcado, y ejecuta. Es el caso peligroso, y se hace mucho porque permite darle estilo con CSS.
Si el SVG viene del usuario, va como imagen. Si necesitas estilarlo, lo limpias primero — y aceptas que la limpieza puede quitarte cosas que querías.
Limpiar sin escribir el limpiador
La regla más importante del nivel, y es corta: no escribas tú la limpieza.
No con expresiones regulares, no quitando etiquetas a mano, no con una lista de palabras prohibidas. Es un problema con décadas de casos raros —codificaciones, atributos con nombres inesperados, marcado que el motor corrige de una forma que reintroduce lo que quitaste— y hay librerías que llevan años recibiendo esos casos.
El paso 4 es la razón por la que este nivel viene después del 31.1. Una política que no permite scripts en línea convierte un fallo de limpieza en nada. Las dos capas juntas son lo que hace esto manejable; ninguna de las dos sola basta.
Y una vía que no es de ejecución pero sí de datos
Un caso relacionado que conviene mencionar aquí: el contenido ajeno puede pedir recursos externos aunque no ejecute nada. Una imagen con una URL remota, una fuente, un fondo en CSS. Eso no ejecuta código, pero le dice a un servidor de fuera que alguien está viendo ese contenido, y desde qué dirección.
Es la cuarta fila del nivel 31.1, y en el contexto de un documento del usuario tiene un nombre viejo: un píxel de rastreo dentro de un fichero. La política con img-src 'self' data: lo corta de raíz, que es una razón más para tenerla estrecha.