Come utilizzare in sicurezza le immagini vettoriali con WordPress

Pubblicato: 2019-06-12

Esistono dozzine di tipi di file immagine che puoi utilizzare per i tuoi file multimediali. Fuori dagli schemi, WordPress supporta la maggior parte dei tipi di file di immagine più popolari, inclusi .jpeg , .png , .gif e altro. Tuttavia, non include alcun supporto per le immagini vettoriali.

In passato, abbiamo parlato di come creare grafica vettoriale scalabile (SVG) e dei relativi vantaggi. Per questo articolo, esamineremo ancora una volta il concetto di SVG, perché utilizzarli nel modo sbagliato potrebbe non essere sicuro e come implementarli effettivamente senza compromettere il tuo sito web.

Andiamo a lavorare!

Iscriviti al nostro canale Youtube

Un'introduzione agli SVG

Gli SVG sono immagini basate non su pixel, ma su vettori, come avrai intuito dal nome. Se provi ad aprire un normale file di immagine utilizzando un editor di testo, vedrai un relativo incomprensibile. Tuttavia, se invece hai provato ad aprire un SVG, probabilmente vedrai un codice come il seguente (preso dal nostro primo pezzo sugli SVG): 

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

Quelli, in poche parole, sono una serie di vettori che compongono una rappresentazione del logo Adobe, con un tocco di colore inserito:

Il logo di Adobe.

Gli SVG sono unici perché mantengono la loro qualità a qualsiasi dimensione (cioè scalabili) e appariranno comunque perfetti indipendentemente dalle dimensioni utilizzate. Questo lo rende un tipo di file ideale per alcuni casi d'uso specifici:

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

Tecnicamente, ci sono tre modi per creare SVG. Potresti scrivere tu stesso il codice, il che non è pratico a meno che tu non sia una macchina. Gli altri percorsi sarebbero disegnare un SVG da zero o prendere un'immagine esistente e utilizzare software come Illustrator o Sketch per esportarla come SVG.

Nonostante gli aspetti positivi, ci sono due svantaggi nell'utilizzo di SVG. In primo luogo, non sono pratici per la grafica complessa. Ad esempio, una normale fotografia richiederebbe milioni di vettori per essere composta, il che creerebbe un gigantesco file SVG. Il secondo svantaggio dell'utilizzo di SVG è relativo alla sicurezza e ne parleremo nella prossima sezione.

Perché l'utilizzo di 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 utilizzando un editor di testo, che è simile a un normale documento.

Il problema sta nella possibilità di aggiungere JavaScript insieme alle informazioni vettoriali. In teoria, ciò significa che l'implementazione del supporto SVG sul tuo sito Web potrebbe esporti ad attacchi se qualcuno carica un file contenente codice dannoso.

È una preoccupazione così considerevole che il supporto SVG per WordPress sia in discussione da oltre sei anni :

Un biglietto Trac di sei anni fa.

Sebbene non sia necessario eseguire l'intero ticket, l'essenza è fino a quando non c'è un modo per garantire che il codice SVG che carichi su WordPress sia sicuro, l'implementazione della funzione potrebbe causare più problemi che vantaggi.

In questo momento, ci sono già diversi strumenti che puoi utilizzare per garantire che i tuoi SVG siano al sicuro, chiamati "disinfettanti". Tuttavia, al momento non ci sono modi validi per implementare le loro funzionalità in WordPress.

Nel complesso, aggiungere il supporto SVG a WordPress è relativamente semplice in pratica. La vera difficoltà sta nel farlo in modo da non lasciare il tuo sito web vulnerabile a potenziali attacchi.

2 modi per utilizzare in sicurezza le immagini vettoriali con WordPress

Per questa sezione, esploreremo sia un approccio manuale che basato su plug-in per un utilizzo sicuro di SVG in WordPress. Sarai quindi in grado di scegliere l'opzione migliore per le tue esigenze. Arriviamo ad esso!

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

Puoi aggiungere il supporto SVG a WordPress in pochi minuti con un frammento di codice. Tuttavia, questo ti lascerebbe aperto 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 che desideri per poter caricare file .svg su WordPress.
  3. Disinfetta ogni file SVG prima di caricarlo.

Nel complesso, i passaggi uno e due non sono difficili da realizzare. Il primo compito è accedere al tuo sito web tramite File Transfer Protocol (FTP) e navigare nella cartella principale di WordPress. All'interno, cerca il tuo file functions.php , aprilo e aggiungi il seguente codice (per gentile concessione di Chris Coyier di CodePen e CSS Tricks): 

// 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 soddisfa due funzioni: ti consente di caricare 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 si fanno un po' più complicate, dal momento che dobbiamo impedire agli utenti di cui non ci fidiamo di caricare SVG corrotti. Ad esempio, potresti fidarti dei tuoi editor e autori per caricare i file corretti, ma non dei tuoi contributori. Ci sono due modi per farlo:

  1. Crea ruoli utente personalizzati con accesso limitato o nullo alla libreria multimediale.
  2. Utilizza un plug-in, come WP Upload Restriction, per limitare i tipi di file che ciascun ruolo utente può caricare.

Entrambi gli approcci hanno i loro difetti, che è uno dei motivi per implementazione SVG manuale può ottenere difficile. Tuttavia, una volta stabilito un metodo per assicurarti che nessuno possa caricare SVG dannoso, devi anche assicurarti di non farlo anche per errore.

Idealmente, eseguirai ogni SVG che carichi sul tuo sito Web tramite uno strumento disinfettante prima di farlo. Questo prenderà il tuo file, assicurati che non includa nulla di spiacevole e rimuoverà se lo fa. In definitiva, questo ti lascia con un file SVG pulito che puoi finalmente caricare su WordPress.

2. Usa il plugin Safe SVG

Con l'approccio di cui sopra, volevamo mostrarti quanto può essere complessa l'implementazione sicura di SVG. Questo è così puoi apprezzare correttamente ciò che fa il plugin Safe SVG.

Il plugin SVG sicuro.

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

  • Consentendoti di caricare SVG in primo luogo.
  • Assicurati di poter vedere i tuoi SVG all'interno della libreria multimediale.
  • Sanificare il codice di ogni SVG che carichi per prevenire problemi di sicurezza.

Questo è praticamente un tipo di plug-in plug-and-play ed è sicuramente l'approccio più diretto all'implementazione sicura di SVG in WordPress. Se sei intenzionato a utilizzare gli SVG, ti consigliamo di provarlo.

Come Animare SVG Usando CSS e Plugin

Se affronti tutti i problemi (a seconda del metodo } che usi) di implementare SVG in WordPress, probabilmente vorrai ottenere il massimo dal tuo investimento. Ciò significa utilizzare CSS per animare i tuoi SVG se la situazione lo richiede. Ci sono due modi in cui puoi eseguire il processo, che abbiamo trattato in passato:

  1. Anima gli SVG manualmente con i CSS come faresti con qualsiasi altro elemento.
  2. Usa strumenti come SVGator per aiutarti a generare e animare SVG.

Se sei pronto per un po' di sperimentazione, alcune animazioni qua e là possono davvero dare una spinta all'esperienza utente del tuo sito. Ancora più importante, l'utilizzo di SVG e CSS per ottenere ciò è molto meglio che aggiungere video o GIF, in particolare per i dispositivi mobili.

Conclusione

Gli SVG sono una scelta fantastica per molte situazioni. Per fare un esempio, sono l'opzione perfetta per i loghi di siti Web grazie alla loro scalabilità. In generale, l'utilizzo di SVG può aiutarti a progettare un sito Web più reattivo, il che è sempre una buona cosa per i tuoi utenti.

Tuttavia, se hai intenzione di aggiungere il supporto SVG a WordPress, devi assicurarti di utilizzare un approccio che protegga il tuo sito. Ci sono due metodi da consigliare:

  1. Aggiungi il supporto SVG manualmente e disinfetta il tuo codice.
  2. Usa il plugin Safe SVG.

Hai domande su come utilizzare gli SVG in modo sicuro in WordPress? Parliamo di loro nella sezione commenti qui sotto!

Immagine in miniatura dell'articolo: microtic / shutterstock.com