Come utilizzare immagini vettoriali con WordPress in modo sicuro

Esistono dozzine di tipi di file immagine che è possibile utilizzare per il web. WordPress supporta la maggior parte di quelli più diffusi, compresi .jpeg , .png , .gif ma non include alcun supporto ai file vettoriali.

In questo articolo esamineremo il concetto di formato SVG e perché utilizzarlo non correttamente nel tuo sito WordPress potrebbe creare problemi di sicurezza. Vedremo quindi come implementarlo senza compromettere il tuo sito web.

Iniziamo!

File SVG : cosa sono?

Gli SVG (Scalable Vector Graphics) sono immagini basate non su pixel, ma su vettori, come avrai intuito dal nome. Se provi ad aprire un normale file di immagine usando un editor di testo, vedrai del testo incomprensibile.

Se invece hai provato ad aprire un file in formato SVG, probabilmente avrai visto del codice come il seguente :

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

In breve, il codice sopra forma una serie di vettori che compongono la rappresentazione del logo Adobe, con un tocco di colore :

I file SVG sono unici perché mantengono la loro qualità a qualsiasi dimensione (cioè scalabili) e rimangono perfetti indipendentemente dalle dimensioni utilizzate. Questo lo rende un tipo di file ideale per usi specifici come :

• Loghi che vorrai riutilizzare su piattaforme diverse.
• Icone che vuoi ridimensionare a seconda del contesto.
• Immagini che vorrai animare usando i fogli di stile (CSS).

Tecnicamente, esistono tre modi per creare immagini SVG. Puoi scrivere il codice tu stesso , il che non è molto pratico, puoi disegnare un SVG da zero, oppure puoi prendere un’immagine esistente ed usare un software come Illustrator o Sketch per esportarlo in formato SVG.

Ci sono però due svantaggi principali nell’utilizzo di immagini SVG.

In primo luogo, non sono pratici per la grafica complessa. La conversione di una normale fotografia, ad esempio, richiederebbe la composizione di milioni di vettori e comporterebbe la generazione di un file SVG di enormi dimensioni.

Il secondo svantaggio dell’uso dei file SVG è legato alla sicurezza e ne discuteremo nella prossima sezione.

Perché l’utilizzo del formato SVG può influire sulla sicurezza del tuo sito web

Sebbene di solito ci riferiamo agli SVG come file di immagine, sarebbe più accurato chiamarli “documenti”. Dopotutto, puoi facilmente aprire, leggere e modificare un file SVG usando un editor di testo perché è simile a un normale documento txt.

Il problema della sicurezza sta nella possibilità di aggiungere codice JavaScript insieme alle informazioni vettoriali. Questo significa che l’implementazione del formato SVG sul tuo sito web potrebbe renderlo vulnerabile ad attacchi se qualcuno carica un file SVG contenente codice dannoso.

Il discorso sicurezza è talmente preoccupante che Il supporto al formato SVG su WordPress è in discussione da oltre sei anni :

Fino a quando non ci sarà un modo per garantire che il codice SVG caricato su WordPress sia sicuro, l’implementazione di questa funzionalità potrebbe causare più problemi che vantaggi.

Esistono comunque diversi strumenti che puoi utilizzare per garantire la sicurezza dei tuoi file vettoriali SVG, chiamati “sanitizers” (disinfettanti) ma al momento non sembrano esserci modi per integrare le loro funzionalità con WordPress.

Nel complesso, l’aggiunta del supporto al formato SVG a WordPress è relativamente semplice. La vera difficoltà sta nel farlo in modo da non rendere il tuo sito vulnerabile a potenziali attacchi.

2 modi per utilizzare in sicurezza le immagini vettoriali con WordPress

In questa sezione, esploreremo un approccio manuale e uno basato su plugin per l’utilizzo scuro di file SVG in WordPress.

Sarai quindi in grado di scegliere l’opzione migliore in base alle tue esigenze.

1. Aggiungi manualmente il supporto al formato SVG e disinfetta il tuo codice

Puoi aggiungere il supporto al formato SVG in WordPress in pochi minuti con uno snippet di codice. Tuttavia questa operazione ti renderebbe vulnerabile ai potenziali problemi di sicurezza di cui abbiamo discusso in precedenza.

L’approccio più sicuro all’implementazione di file vettoriali SVG prevede i seguenti passaggi:

1. Abilita il supporto al formato SVG modificando il tuo file functions.php.
2. Limita i ruoli utente desiderati dalla possibilità di caricare file .svg su WordPress.
3. “Disinfetta” (sanitize) tutti i file vettoriali SVG prima di caricarli.

Nel complesso i primi due step non sono difficili da realizzare. Dovrai accedere al tuo sito web tramite File Transfer Protocol (FTP) e recarti nella cartella del tema utilizzato su WordPress. All’interno di essa cerca il file functions.php , aprilo e aggiungi il seguente codice :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Questo codice soddisfa due funzioni: consente di caricare i file SVG su WordPress e di visualizzarli nella tua libreria multimediale. Una volta aggiunto il codice, salva le modifiche al file functions.php e chiudilo.

Le cose ora diventano un po’ più complicate, dal momento che dobbiamo impedire agli utenti di cui non ci fidiamo di caricare file vettoriali. Potresti ad esempio permettere il caricamento dei vettoriali SVG agli editor e agli autori ma non ai collaboratori.

Esistono due modi per farlo :

1. Creare ruoli utente personalizzati con accesso limitato o nullo al catalogo multimediale.
2. Utilizzare un plugin, ad esempio WP Upload Restriction , per limitare i tipi di file che ogni ruolo utente può caricare.

Entrambi gli approcci hanno i loro difetti ed anche questo è uno dei motivi per cui l’implementazione manuale del formato SVG può diventare complicata.

Tuttavia, una volta stabilito un metodo per garantire che nessuno possa caricare file SVG dannosi, dovrai essere sicuro di non farlo tu per errore!

Dovrai controllare tutti i file SVG tramite uno strumento “disinfettante” prima di caricarli sul tuo sito web. In questo modo sarai sicuro che non includano nulla di spiacevole ed avrai un file SVG pulito che potrai finalmente caricare su WordPress.

2. Utilizza un plugin SVG sicuro

Con l’approccio di cui sopra, ti abbiamo mostrato quanto può essere complessa l’implementazione sicura di file vettoriali SVG in modo da poter apprezzare ciò che fa il plugin Safe SVG .

In breve, questo plugin si occupa di tutti i problemi che abbiamo elencato prima, tra cui:

• Consente di caricare file in formato SVG.
• Dà la possibilità di poter vedere le tue immagini SVG all’interno del catalogo multimediale.
• “Disinfetta” il codice di ogni file in formato SVG caricato per prevenire problemi di sicurezza.

Questo è sicuramente l’approccio più diretto all’implementazione del formato SVG in modo sicuro su WordPress. Se hai intenzione di utilizzare file vettoriali su WordPress, ti consigliamo di provarlo.

Come animare gli SVG usando CSS e plugin

Se risolvi tutti i problemi (a seconda del metodo che utilizzi) dell’implementazione dei file vettoriali SVG in WordPress, probabilmente vorrai ottenere il massimo con il minimo sforzo come ad esempio usare i CSS per animare i tuoi file vettoriali.

Esistono due modi per eseguire questo processo :

1. Animare manualmente i file SVG con CSS come qualsiasi altro elemento.
2. Utilizzare strumenti come SVGator per generare e animare gli SVG.

Se hai voglia di sperimentare, alcune (poche!) animazioni qua e là possono davvero migliorare l’esperienza utente del tuo sito.

Conclusione

I file vettoriali SVG sono una scelta fantastica per molte situazioni come ad esempio i loghi dei siti web grazie alla loro scalabilità. In generale, l’uso del formato SVG può aiutarti a progettare un sito web più responsivo, il che è sempre una buona cosa per quanto riguarda i tuoi utenti.

Tuttavia, se stai pensando di aggiungere il supporto al formato SVG a WordPress, dovrai assicurarti di utilizzare un approccio che mantenga il tuo sito sicuro.

Esistono due metodi per farlo:

1. Aggiungere il supporto al formato SVG manualmente e “disinfettare” il codice.
2. Utilizzare il plugin Safe SVG.

Buon lavoro!