Come utilizzare immagini vettoriali con WordPress in modo sicuro

Pubblicato in data 29 Novembre 2019 Categoria Consigli WordPress

Come utilizzare in modo sicuro immagini vettoriali con WordPress

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 per le immagini vettoriali.

In questo articolo esamineremo il concetto di SVG e perché utilizzarli non correttamente potrebbe creare problemi di sicurezza. Vedremo quindi come implementarli senza compromettere il tuo sito web.

Iniziamo!

Introduzione agli SVG

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 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 :

Il logo Adobe

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 file 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 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 degli SVG è legato alla sicurezza e ne discuteremo nella prossima sezione.

Perché l’utilizzo degli 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 supporto 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 di SVG su WordPress è in discussione da oltre sei anni :

Il ticket trac per l'implementazione di SVG su WordPress

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 SVG, chiamati “sanitizers” (disinfettanti) ma al momento non sembrano esserci modi per integrare le loro funzionalità con WordPress.

Nel complesso, l’aggiunta del supporto 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 SVG e disinfetta il tuo codice

Puoi aggiungere il supporto SVG a 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 SVG prevede i seguenti passaggi:

  1. Abilita il supporto 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 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 SVG. Potresti ad esempio permettere il caricamento dei file SVG ai 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 di SVG può diventare complicata.

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

Dovrai controllare tutti gli 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. Utilizzare un plugin SVG sicuro

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

Il plugin safe SVG per WordPress

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

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

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

Come animare SVG usando CSS e plugin

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

Esistono due modi per eseguire questo processo :

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

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

Conclusione

Gli SVG sono una scelta fantastica per molte situazioni come ad esempio i loghi dei siti web grazie alla loro scalabilità. In generale, l’uso di 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 SVG a WordPress, dovrai assicurarti di utilizzare un approccio che mantenga il tuo sito sicuro.

Esistono due metodi per farlo:

  1. Aggiungere il supporto SVG manualmente e “disinfettare” il codice.
  2. Utilizzare il plugin SVG sicuro.