Come caricare immagini SVG su WordPress

Hai finalmente ricevuto un bellissimo logo in SVG dal tuo grafico e vuoi sostituire quel PNG sgranato nel tuo sito. Vai nella Media Library tutto felice… e WordPress ti blocca l’upload con un errore “Questo file non può essere elaborato dal server web.“

Tranquillo: è normale. Vediamo perché succede e come risolvere in sicurezza.

Perché non riesco a caricare un file SVG su WordPress?

Per impostazione predefinita, WordPress non permette l’upload di file SVG.

Il motivo è semplice: sicurezza.

L’SVG è un formato vettoriale basato su XML che può contenere markup, riferimenti esterni e persino eventi/JS inline.

Se carichi un SVG “cattivo” e lo incorpori nel modo sbagliato, rischi di eseguire codice nel contesto del tuo sito (XSS).

È pericoloso caricare file SVG su WordPress?

Può esserlo, se fatto senza sanificare. Ecco le aree di rischio principali:

• Tag/script ed eventi: <script>, attributi onload, onclick, ecc…
• Link pericolosi: href con schema javascript: o data:
• <foreignObject> : permette HTML dentro l’SVG
• Riferimenti esterni/entità XML: possibili vettori XXE o contenuti non attesi

Questi elementi vanno rimossi/sanificati prima che il file venga caricato nella tua Media Library.

Un esempio concreto di come un SVG può creare danni se non sanificato

Prendiamo questo esempio. Il codice di un file svg che rappresenta semplicemente un cerchio di colore rosso.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" role="img" aria-label="Cerchio rosso">
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>

Lo carichi sul tuo sito e l’utente vedrà esattamente quello che deve vedere: un cerchio rosso.

Prendiamo invece quest’altro codice:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" role="img" aria-label="Cerchio rosso">
  <script>alert('Gli utenti di questo sito puzzano!');</script>
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>

Anche questo codice rappresenta un cerchio rosso, ma in più ha una sorpresa: un piccolo script JavaScript che mostra un messaggio a chi visita la pagina.

Se sul tuo sito carichi questo SVG e lo includi inline in una pagina, all’apertura comparirà la finestra con il messaggio.

È un esempio innocuo, ma dimostra che un file SVG può contenere ed eseguire codice.

Ora queste poche righe non fanno nulla di grave, solo uno scherzo. Ma pensa a cosa potrebbe succedere se lo script inserito nel file SVG facesse qualcosa di più serio.

Ad esempio:

• Rubare i cookie di sessione o i token di accesso degli utenti autenticati. L’autore del file potrebbe ottenere accesso all’area riservata del tuo sito.
• Mostrare contenuti falsi o messaggi di phishing. Lo script potrebbe sostituire testi, pulsanti o link per ingannare i visitatori (“inserisci la tua password qui”, “clicca per sbloccare il bonus”, ecc.).
• Reindirizzare gli utenti verso un sito esterno malevolo. Basta un window.location = "http://sito-truffa.com" per mandare i tuoi visitatori altrove.
• Inviare dati sensibili (form, email, dati di contatto) verso un server esterno. Lo script può leggere il contenuto della pagina e trasmetterlo.

Un file SVG può sembrare un’immagine, ma in realtà è un piccolo documento HTML con potere esecutivo.

Ecco perché WordPress blocca di default il caricamento degli SVG e perché, se li usi, è fondamentale sanificarli prima di permetterne l’upload.

Come caricare file SVG su WordPress in tutta sicurezza?

Ok, tutto molto interessante ma come si risolve il problema?

Hai due alternative.

1) Utilizzare un plugin (metodo veloce e sicuro)

Vuoi una soluzione rapida, con aggiornamenti e zero manutenzione di codice?

Installa un plugin affidabile con sanificazione integrata come ad esempio “Safe SVG o SVG Support“.

Nelle impostazioni, consenti l’upload solo agli admin.

Carica il tuo logo SVG e verifica che il file venga accettato, nella Media Library la preview sia visibile e che nel front-end il logo sia nitido a qualsiasi dimensione

Pro

• Veloce
• Nessun codice da mantenere
• Aggiornamenti di sicurezza delegati al maintainer del plugin. Ovviamente devi sempre tenere il plugin aggiornato all’ultima release, come del resto fai già con tutti gli altri plugin e con WordPress stesso (vero? 😉 )

Contro

• Dipendenza da terze parti
• Devi ricordarti di aggiornare il plugin

2) Abilitare l’upload degli SVG “a mano” con PHP (se sei uno sviluppatore e/o sai cosa stai facendo)

Questo è il metodo adatto se vuoi controllo completo e preferisci non dipendere da un plugin.

Importante: abilitare l’upload da solo non basta. Aggiungi sempre:

• limitazione dei ruoli;
• sanificazione server-side.

Per abilitare l’upload svg crea un plugin o mu-plugin e aggiungi questo filtro.

Se sei alle prime armi e non sai come creare un plugin, aggiungilo pure al file functions.php ma tieni presente che non è una buona pratica.

add_filter( 'upload_mimes', function( array $mimes ): array {

    if ( current_user_can( 'manage_options' ) ) {
        $mimes['svg'] = 'image/svg+xml';
    }

    return $mimes;

} );

Questo codice consente di caricare file SVG solo agli amministratori.

Sanificazione l’SVG all’upload

Usa una libreria affidabile, ad es. enshrined/svg-sanitize.

Installala via Composer (nella cartella del tuo plugin o mu-plugin):

composer require enshrined/svg-sanitize

Filtra l’upload e sostituisci il contenuto del file con la versione pulita:

add_filter( 'wp_handle_upload_prefilter', function( array $file ): array {

    $ext = strtolower( pathinfo( $file['name'], PATHINFO_EXTENSION ) );
    if ( $ext !== 'svg' ) return $file;

    if ( ! current_user_can( 'manage_options' ) ) {
        $file['error'] = 'Upload SVG consentito solo agli amministratori.';
        return $file;
    }

    $autoload = plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';
    if ( ! file_exists( $autoload ) ) {
        $file['error'] = 'Sanitizzazione SVG non disponibile: esegui composer install nella cartella del plugin.';
        return $file;
    }

    require_once $autoload;

    $dirty = file_get_contents( $file['tmp_name'] );

    if ( $dirty === false ) {
        $file['error'] = 'Impossibile leggere il file SVG.';
        return $file;
    }

    try {
        $sanitizer = new \enshrined\svgSanitize\Sanitizer();
        $sanitizer->removeRemoteReferences( true );
        $sanitizer->minify( false );

        $clean = $sanitizer->sanitize( $dirty );
        if ( ! $clean ) {
            $file['error'] = 'SVG rifiutato: contenuto non sicuro o non valido.';
            return $file;
        }

        file_put_contents( $file['tmp_name'], $clean );
        return $file;

    } catch ( \Throwable $e ) {
        $file['error'] = 'Errore di sanitizzazione SVG: ' . $e->getMessage();
        return $file;
    }
} );

Pro

• Hai controllo totale
• Nessuna dipendenza “visibile” lato plugin

Contro

• Richiede Composer. Se lo usi abitualmente non è un contro, anzi… ma se non sei uno sviluppatore potrebbe non essere banale gestirlo.
• Devi comunque tenere aggiornato il package per la sanificazione

Quale soluzione fa per te?

Se non sai mettere mano al codice, non hai bisogno che ti dica che la prima soluzione è la tua.

Se sai sviluppare e vuoi avere il pieno controllo del codice del tuo sito vai con la seconda soluzione ma valuta se ne valga la pena realizzare un plugin ad hoc con dipendenze da aggiornare per fare una cosa che è già stata implementata da un plugin esistente e che viene già mantenuto aggiornato dai suoi sviluppatori.

Inoltre bisogna fare una considerazione. Quante volte ti capiterà di dover caricare un file SVG su WordPress

Se devi solo caricare il tuo logo una tantum o qualche grafica sporadicamente puoi valutare di installare un plugin, fare gli upload che ti servono e disinstallarlo subito dopo. In questo caso non ti occorre consentire sempre l’upload degli SVG e non devi preoccuparti degli aggiornamenti.

Chiaramente se carichi abitualmente file vettoriali sul sito, come infografiche, il discorso cambia e può essere utile avere un plugin sempre attivo.

Spero che l’articolo ti sia stato utile. Se hai bisogno di aiuto con il tuo sito WordPress non esitare a contattarmi!