Subir SVGs a WordPress: La Guía Segura para Permitirlos y Sanitizarlos

WordPress bloquea los archivos SVG por seguridad. Aprende a subir SVGs de forma segura a tu sitio WP implementando un snippet de código que los sanitiza y permite. ¡Evita riesgos!

Cómo Permitir la Subida Segura de Archivos SVG en WordPress

WordPress, por defecto, bloquea la subida de archivos SVG. Esta medida es de seguridad, ya que los archivos SVG, al ser XML, pueden contener código malicioso. Sin embargo, los SVG son extremadamente útiles para el diseño web moderno debido a su escalabilidad y ligereza. Este artículo explica cómo habilitar la subida de SVG de forma segura en WordPress mediante un snippet de código que los permite y los sanitiza.

El Problema: WordPress Bloquea los SVG por Defecto

Los archivos SVG (Scalable Vector Graphics) son un formato de imagen basado en XML. A diferencia de los formatos ráster como JPEG o PNG, los SVG son vectoriales, lo que significa que pueden escalarse a cualquier tamaño sin perder calidad. Esto los hace ideales para logos, iconos e ilustraciones.

El problema radica en su naturaleza XML. Un archivo SVG puede contener código JavaScript, enlaces externos o incluso referencias a archivos locales, lo que abre la puerta a vulnerabilidades como ataques de cross-site scripting (XSS) o la divulgación de información sensible. Por esta razón, WordPress restringe la subida de SVG de forma predeterminada para proteger tu sitio.

¿Por Qué Necesitamos SVG en WordPress?

A pesar de los riesgos de seguridad, los SVG ofrecen ventajas significativas para el rendimiento y la experiencia de usuario de un sitio web:

• Escalabilidad Perfecta: Se ven nítidos en cualquier dispositivo y resolución, desde pantallas de móvil hasta monitores 4K.
• Tamaño de Archivo Reducido: Generalmente, son más pequeños que sus equivalentes ráster, lo que contribuye a tiempos de carga más rápidos.
• Flexibilidad de Estilo: Pueden ser estilizados con CSS, permitiendo cambios de color, tamaño y animaciones dinámicas sin editar el archivo de imagen original.
• Mejora del Rendimiento: Al ser más ligeros, reducen la carga del servidor y mejoran la puntuación de rendimiento del sitio.

La Solución: Habilitar y Sanitizar SVG con Código

La forma más segura de permitir SVG en WordPress es a través de un snippet de código que realiza dos acciones clave: primero, permite el tipo de archivo SVG en la biblioteca de medios; segundo, sanitiza el contenido del archivo para eliminar cualquier elemento potencialmente peligroso.

Paso 1: Permitir el Tipo de Archivo SVG

Para que WordPress reconozca y acepte los archivos SVG, necesitamos añadir el tipo MIME (image/svg+xml) a la lista de tipos de archivos permitidos. Esto se logra usando el filtro upload_mimes.

/**
 * Permite la subida de archivos SVG en WordPress.
 *
 * @param array $mimes Tipos MIME permitidos.
 * @return array Tipos MIME actualizados.
 */
function permitir_svg_upload( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'permitir_svg_upload' );

Este código debe colocarse en el archivo functions.php de tu tema hijo o en un plugin personalizado. Al añadirlo, podrás subir archivos SVG a tu biblioteca de medios. Sin embargo, este paso por sí solo no garantiza la seguridad.

Paso 2: Sanitizar los Archivos SVG Antes de Guardar

Permitir el tipo de archivo es solo la mitad de la solución. La parte más crítica es la sanitización. Antes de que un archivo SVG se guarde en tu servidor, su contenido debe ser analizado y limpiado para eliminar cualquier script, enlace o elemento XML que pueda ser malicioso.

La sanitización implica un análisis profundo del XML del SVG para eliminar atributos como onclick, onload, <script> tags, <foreignObject>, y otros elementos que pueden ser explotados. Implementar una sanitización robusta desde cero es complejo y propenso a errores. Por ello, la siguiente función es una implementación conceptual y básica. Para una seguridad de nivel de producción, se recomienda encarecidamente usar librerías de sanitización SVG probadas (como las que utilizan plugins específicos para SVG).

/**
 * Sanitiza el contenido de un archivo SVG eliminando elementos potencialmente peligrosos.
 *
 * IMPORTANTE: Esta es una implementación conceptual y BÁSICA para ilustrar el proceso.
 * Para una seguridad robusta en un entorno de producción, se recomienda usar
 * una librería de sanitización SVG probada y exhaustiva, o un plugin dedicado.
 *
 * @param string $svg_content Contenido del archivo SVG.
 * @return string Contenido SVG sanitizado.
 */
function mi_sanitizador_svg_seguro( $svg_content ) {
    // Eliminar atributos de eventos JavaScript
    $svg_content = preg_replace( '/on[a-z]+="[^"]*"/i', '', $svg_content );

    // Eliminar etiquetas <script>
    $svg_content = preg_replace( '/<script\b[^>]*>(.*?)<\/script>/is', '', $svg_content );

    // Eliminar bloques CDATA
    $svg_content = preg_replace( '/<!\[CDATA\[.*?\]\]>/s', '', $svg_content );

    // Eliminar etiquetas <foreignObject> y sus contenidos (pueden incrustar HTML/scripts)
    $svg_content = preg_replace( '/<foreignObject\b[^>]*>(.*?)<\/foreignObject>/is', '', $svg_content );

    // Eliminar etiquetas <object> y <embed>
    $svg_content = preg_replace( '/<object\b[^>]*>(.*?)<\/object>/is', '', $svg_content );
    $svg_content = preg_replace( '/<embed\b[^>]*>(.*?)<\/embed>/is', '', $svg_content );

    // Puedes añadir más reglas para eliminar otros atributos o etiquetas peligrosas
    // como 'href' con esquemas no seguros (javascript:), etc.
    // Una sanitización completa debería parsear el XML de forma segura y reconstruirlo.

    return $svg_content;
}

/**
 * Filtra los archivos subidos y aplica la sanitización SVG antes de guardar.
 *
 * @param array $file Array de datos del archivo subido.
 * @return array Array de datos del archivo (posiblemente modificado).
 */
function aplicar_sanitizacion_svg_al_subir( $file ) {
    if ( $file['type'] === 'image/svg+xml' ) {
        // Leer el contenido del archivo temporal
        $svg_content = file_get_contents( $file['tmp_name'] );

        // Sanitizar el contenido
        $sanitized_svg_content = mi_sanitizador_svg_seguro( $svg_content );

        // Sobrescribir el archivo temporal con el contenido sanitizado
        file_put_contents( $file['tmp_name'], $sanitized_svg_content );
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'aplicar_sanitizacion_svg_al_subir' );

Este código utiliza el filtro wp_handle_upload_prefilter para interceptar el archivo SVG antes de que WordPress lo procese y guarde. Llama a mi_sanitizador_svg_seguro para limpiar el contenido y luego sobrescribe el archivo temporal con la versión sanitizada.

Dónde Colocar el Código

Para implementar estos snippets de forma segura y efectiva, tienes dos opciones principales:

• Archivo functions.php de tu Tema Hijo: Esta es la ubicación más común. Asegúrate de usar un tema hijo para que tus cambios no se pierdan al actualizar el tema padre.
• Plugin Personalizado: Crear un pequeño plugin personalizado es la solución más robusta y portable. El código permanecerá activo incluso si cambias de tema. Simplemente crea un archivo .php en wp-content/plugins/ con el código y actívalo desde el panel de WordPress.

Advertencia: Nunca edites el archivo functions.php de un tema padre directamente, ya que tus cambios se sobrescribirán en la próxima actualización del tema.

Tabla de Comparación: SVG vs. Otros Formatos

Para entender mejor el contexto del SVG, comparémoslo con otros formatos de imagen comunes:

Característica	SVG	PNG	JPEG
Tipo	Vectorial	Ráster	Ráster
Escalabilidad	Infinita (sin pérdida de calidad)	Limitada (pixelado al escalar)	Limitada (pixelado al escalar)
Tamaño de Archivo	Generalmente pequeño (gráficos simples)	Pequeño a grande (depende de detalle)	Muy pequeño (imágenes complejas)
Uso Ideal	Iconos, logos, ilustraciones, gráficos	Imágenes con transparencia, capturas	Fotografías, imágenes complejas
Riesgo de Seguridad	Alto (si no se sanitiza)	Bajo	Bajo

Consideraciones de Seguridad Adicionales

Habilitar SVG, incluso con sanitización, introduce un vector de riesgo. Considera estas precauciones adicionales:

• Restringir por Rol: Limita la capacidad de subir SVG solo a roles de usuario de confianza (administradores, editores).
• Actualizaciones Constantes: Mantén WordPress, temas y plugins siempre actualizados para parchear posibles vulnerabilidades.
• Plugins de Seguridad: Utiliza un plugin de seguridad robusto (como Wordfence o Sucuri) que ofrezca escaneo de archivos y protección de firewall.
• Copias de Seguridad Regulares: Realiza copias de seguridad completas de tu sitio web de forma frecuente. Esto permite una recuperación rápida en caso de un incidente de seguridad.

Advertencias Importantes

• Riesgo Inherente: A pesar de la sanitización, siempre existe un riesgo inherente al permitir la subida de archivos SVG. Ninguna solución es 100% infalible.
• Usuarios No Confiables: Nunca permitas que usuarios no confiables (ej. suscriptores) suban archivos SVG, incluso con la sanitización implementada.
• Pruebas Rigurosas: Antes de implementar cualquier código en un sitio en producción, pruébalo exhaustivamente en un entorno de desarrollo o staging.

Conclusión

Permitir la subida de archivos SVG en WordPress es una excelente manera de mejorar la estética y el rendimiento de tu sitio web. Sin embargo, la seguridad no debe comprometerse. La combinación de permitir el tipo MIME y, crucialmente, sanitizar el contenido de los archivos SVG con un código bien implementado, es la clave para una integración segura.

Recuerda que la seguridad es un proceso continuo. Mantén tu sitio actualizado, realiza copias de seguridad y considera siempre las implicaciones de seguridad al añadir nuevas funcionalidades.