Come proteggere le immagini su un sito WordPress

Cerchi un modo per prevenire i furti di immagini dal tuo sito WordPress? Se è così, ci tocca dirti che non c’è un sistema infallibile. Ma, non disperare, vedremo dei sistemi efficaci per ridurre la probabilità che le immagini vengano prelevate.

Ti mostreremo come usare un plugin per proteggere le immagini (con diversi sistemi di protezione, quindi a più livelli) e parleremo dei sistemi che puoi mettere in pratica manualmente.

Iniziamo!

Perché proteggere le immagini del tuo sito

Ci sono diversi motivi per cui vorresti poter proteggere le immagini del tuo sito WordPress ed evitare che vengano scaricate e usate senza il tuo consenso.

Alcuni casi comuni sono:

• Generi guadagni dalle immagini: se vendi le tue foto o immagini che crei e mostri un’anteprima delle stesse, devi assicurarti di proteggere la versione originale dell’immagine (ad esempio l’immagine a risoluzione piena).
• Le immagini sono in un’area riservata: se i contenuti sono riservati solo ai membri e non vuoi che vengano facilmente condivisi altrove, può essere utile attivare una protezione.
• Usi immagini esclusive e originali: se ospiti sul tuo sito foto esclusive o hai creato grafiche o screenshot originali, non vuoi vedere semplicemente il tuo lavoro utilizzato altrove senza consenso.

Questi sono solo alcuni esempi, ma qualunque sia il motivo per cui vuoi evitare lo scraping o la diffusione delle immagini ho una buona e una cattiva notizia per te.

La cattiva notizia è che non c’è nessun metodo che ti assicura al 100% che le tue immagini non siano accessibili.

La buona è che ci sono dei sistemi che ti aiutano a proteggere le immagini dalla maggior parte (maggior parte = non tutti) dei tentativi di download e scraping.

Vediamo quali sono.

Come proteggere le immagini con un plugin

Utilizzare un plugin è uno dei sistemi per aggiungere una protezione alle immagini che mostriamo sul nostro sito WordPress.

Il plugin di cui vogliamo parlarti è Selective Image Guard di Jose Mortellaro.

Questo plugin è stato rilasciato di recente e ha due versioni che differiscono per le funzioni incluse: gratuita e pro (a partire da 29€ per un singolo sito).

Ti illustro brevemente le differenze e poi andremo a vedere nel dettaglio come usare la versione gratuita.

Versione gratuita (che trovi nella directory dei plugin):

• prevenzione degli screenshot da desktop;
• protezione dalla stampa;
• protezione selettiva delle immagini;
• rilevamento dell’uso di devtools e della disattivazione degli JavaScript.

Versione Pro (che trovi sul sito del creatore del plugin):

• protezione in bulk: è più facile applicare la protezione con una singola impostazione;
• protezione delle immagini in evidenza;
• protezione selettiva per post type (ad esempio anche per i custom post type);
• compatibilità con le gallerie di WooCommerce;
• aggiunta automatica del watermark (personalizzabile);
• supporto premium dallo sviluppatore del plugin.

Usare Selective Image Guard in versione gratuita

Prima di continuare, devi sapere che non ci sono soluzioni efficaci al 100% che si possono applicare lato client: ci sarà sempre un modo per riuscire a ottenere le immagini.

A cosa serve allora un plugin come questo? Usandolo abbiamo un deterrente che riduce la possibilità di scraping o scaricamento delle immagini. In pratica rendendo più difficile prelevare le immagini, meno persone saranno in grado di farlo.

Passiamo adesso alla pratica.

Per prima cosa dobbiamo installare e attivare il plugin.

Puoi farlo andando su Plugin > Aggiungi plugin e cercare “Selective Image Guard“. Poi dovrai cliccare “Installa ora” e dopo “Attiva”.

A questo punto attivare la protezione è molto semplice:

• apriamo la libreria dei media andando su Media > Libreria;
• selezioniamo l’immagine che ci interessa proteggere;
• clicchiamo sull’opzione “Protect this image” per attivarla.

Il plugin funziona in automatico, ma se vuoi sbirciare il funzionamento dietro le quinte, puoi farlo leggendo come funziona Selective Image Guard.

Qui sotto ti mostro degli esempi pratici della protezione.

In genere uno dei modi per prelevare un’immagine è quello di aprire lo strumento per sviluppatori del browser, come DevTools nel caso di Chrome, per risalire all’URL dell’immagine.

Prima di aver attivato il plugin, ispezionando l’elemento dell’immagine possiamo vedere l’URL e l’anteprima, come ti mostro in questo esempio:

Attivando il plugin, invece, vengono mascherati sia l’URL che l’anteprima, che viene sostituita con un’immagine segnaposto, come vedi qui:

Tieni presente che se sei loggato su WordPress e ispezioni la pagina continuerai a vedere le immagini, la protezione funziona per i visitatori non loggati al sito e per gli utenti che non hanno il permesso di caricamento dei file su WordPress. Se non sai come funzionano, puoi approfondire i diversi ruoli utente su WordPress.

Se, invece, si tenta di stampare la pagina o fare una stampa in PDF, le immagini protette verranno rese sfocate, come in questo esempio.

Le immagini protette diventano sfocate anche quando si prova a fare uno screeshot da desktop usando le combinazioni di tasti generalmente più usate (ad esempio non appena premiamo CTRL, ALT o SHIFT).

Inoltre, il plugin disattiva la possibilità di fare click destro sull’immagine per salvarla o aprirla in una nuova scheda.

Sempre per le immagini protette, il plugin disattiva l’hotlinking.

Cosa fare se usi sistemi di cache o CDN

Il plugin aggiunge degli header che vanno a indicare ai browser e alle CDN di non memorizzare nella cache le immagini per cui è stata attivata la protezione.

Questi sono gli header:

header( 'Expires: Thu, 01 Jan 1970 00:00:00 GMT' ); // Already expired
header( 'Cache-Control: no-store, no-cache, must-revalidate, max-age=0' );
header( 'Cache-Control: post-check=0, pre-check=0', false ); // For Internet Explorer
header( 'Pragma: no-cache' );

Se nel tuo caso questo non basta e le immagini continuano a essere incluse nella cache, devi far sì che la CDN o il sistema di cache escluda gli URL che contengono questi due parametri:

• /protect-image/
• sig-prot=1

Metodi manuali per evitare il furto delle immagini dal sito

Il plugin che abbiamo visto protegge le immagini sotto diversi aspetti evitando nella maggior parte dei casi che:

• le persone scarichino l’immagine;
• la stampino;
• riescano a fare uno screenshot;
• risalgano all’URL originale;
• utilizzino l’immagine su un sito diverso dal tuo (protezione hotlink).

Ci sono comunque altri metodi manuali che puoi utilizzare se non vuoi usare un plugin.

Ti mostrerò come:

• prevenire l’hotlinking;
• disattivare il tasto destro del mouse;
• aggiungere un watermark (fattibile con il plugin in versione Pro).

Per finire poi parleremo di licenze e di come capire se qualcuno sta usando le tue immagini su altri siti.

Bloccare l’hotlinking delle immagini

Altri siti possono usare l’URL delle tue immagini per mostrarle sul loro sito, il problema è che in questo modo viene utilizzata la banda del tuo sito e questo può sia farti raggiungere i limiti di risorse che rallentare il tuo sito.

Per fortuna il problema si può risolvere disattivando l’hotlink delle immagini. Il plugin che abbiamo visto prima attiva automaticamente l’hotlinking sulle immagini protette, ora invece ti mostrerò come fare ad attivarlo a livello di sito (e quindi per tutte le immagini).

Ci sono due metodi principali per farlo.

Evitare l’hotlinking da htaccess

Puoi aggiungere questo codice al tuo file .htaccess per far sì che le immagini non possano essere mostrate su altri siti.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tuosito.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://drive.com/immagine-placeholder.png [NC,R,L]

Prima di utilizzare il codice devi modificarlo:

• inserisci il tuo dominio al posto di: “tuosito.com”;
• al posto di “drive.com/immagine-placeholder.png” puoi inserire un’immagine da mostrare come segnaposto; ma non è obbligatorio, puoi anche non specificarla, rimuovendo l’URL.

Attivare la protezione hotlink da cPanel

Se non vuoi modificare il file htaccess, hai un’altra alternativa: attivare la protezione hotlink da cPanel.

Se hai un hosting WordPress o un altro piano su SupportHost, puoi accedere facilmente a questa funzione:

• accedi a cPanel;
• cerca “Hotlink protection” e apri lo strumento.

Dopodiché clicca sul pulsante “Enable“.

Se vuoi consentire l’accesso alle immagini ad alcuni siti, puoi modificare la configurazione come spiegato in dettaglio nel tutorial sulla protezione hotlink.

Disattivare il tasto destro del mouse

Uno dei modi che puoi usare per cercare di prevenire il furto di foto e immagini dai siti è quello di disattivare la funzione di click destro.

Questo metodo però da solo non è sufficiente, per esempio come abbiamo visto il plugin di cui abbiamo parlato disattiva il tasto destro, ma lo fa insieme ad altri tipi di protezione.

Vediamo come farlo via codice.

Per farlo utilizzeremo uno script creato da ishithemes su GitHub.

Per aggiungere la funzione a un sito WordPress, ci sono due metodi possibili:

• modificare il file header.php del tema: in questo caso conviene usare un tema child, altrimenti quando il tema si aggiorna perderai le modifiche;
• usare un plugin come Code Snippets.

Nel nostro caso abbiamo attivato la funzione usando Code Snippets. Per farlo, segui questi semplici passi:

• installa e attiva il plugin;
• vai su Snippet > Aggiungi nuovo;
• dai un nome allo snippet, ad esempio “Disattiva tasto destro“;
• incolla il codice nella sezione “contenuto dello snippet”

Il codice è questo:

<!-- <script type="text/javascript">
		document.onkeydown = function (event) {
		     event = (event || window.event);
		     if (event.keyCode == 123 || event.keyCode == 18)
		     {
		           return false;
		     }
		}
		document.addEventListener('contextmenu', event => event.preventDefault());
	</script> -->

Prima di salvare, bisogna selezionare “HTML” come tipo di snippet e in “Location” scegliere “In site <head> section“. In questo modo lo snippet viene caricato nella sezione giusta.

A questo punto non ti resta che cliccare su “Salva e attiva“.

In questa schermata puoi vedere un riepilogo di tutti i passi da fare.

Aggiungere un watermark alle immagini

I metodi di cui abbiamo parlato finora si concentrano sul cercare di evitare che le immagini vengano scaricate liberamente o mostrate su altri siti tramite link.

Un metodo diverso, invece, può essere quello di far sì che le immagini vengano comunque attribuite a te. Come? Aggiungendo un watermark con il tuo nome o con il tuo logo.

Ci sono diversi metodi che potresti utilizzare:

• modificare le immagini con programmi, ad esempio Photoshop, per aggiungere il watermark prima del caricamento;
• usare un plugin che aggiunga il watermark in automatico.

Se decidi di usare un plugin, puoi valutare quello di cui abbiamo parlato, Selective Image Guard. Nella versione Pro, il plugin ti permette di inserire il tuo watermark in automatico. In questo caso è comodo usare un singolo plugin sia per la protezione di base che per inserire il watermark.

Altri plugin che ti permettono di aggiungere il watermark sono:

• Image Watermark – aggiunge un watermark personalizzabile;
• Easy Watermark – ti permette anche di creare watermark di solo testo.

Aggiungere una nota sul copyright

Nell’utilizzo delle immagini è sempre bene specificare il tipo di licenza.

Come saprai esistono:

• licenze per uso privato;
• per uso commerciale;
• per uso editoriale.

Ci sono poi:

• immagini di pubblico dominio;
• protette da copyright e non riproducibili;
• creative commons: che possono essere utilizzate con certe condizioni che possono includere l’attribuzione, l’uso non commerciale o l’uso senza modifiche.

Specificando la licenza di utilizzo delle foto o delle immagini del tuo sito, non ti proteggi da chi vuole rubarle, ma sicuramente dai indicazioni chiare a chi vuole utilizzarle nella maniera corretta.

Come capire se le immagini del tuo sito vengono utilizzate da altri

Nella più rosea delle ipotesi chi utilizzerà le tue immagini, ti ringrazierà con un link alla fonte. Per monitorare può essere utile utilizzare strumenti di monitoraggio dei backlink come Ahrefs e tenere d’occhio le menzioni (anche senza link) usando ad esempio Google Alert.

E se altri siti stanno utilizzando le tue immagini (e senza consenso)?

Il sistema più rapido per capirlo è fare una ricerca inversa per immagini. Puoi usare Google da desktop.

Vai su Google, clicca sull’icona della fotocamera Ricerca tramite immagine e puoi caricare l’immagine o inserire il link.

Fai click su “Cerca” per avviare la ricerca e ti verranno mostrate le corrispondenze trovate.

Se trovi immagini che sono state utilizzate violando la licenza, puoi contattare i proprietari del sito per chiedere la rimozione. Se non funziona, puoi valutare se procedere successivamente per altre vie come contattando l’hosting che ospita il sito o rivolgendoti a un legale.

Conclusioni

Proteggere le immagini caricate su un sito web non è facile.

Ci sono diversi metodi oltre al classico clic destro che ci permettono di prelevare un’immagine inserita in una pagina web tra cui ispezionare la pagina con lo strumento per sviluppatori o anche fare uno screenshot. Non tutto è perduto, però, abbiamo diverse armi a disposizione per riuscire se non a bloccare completamente, almeno a non rendere la vita facile a chi cerca di utilizzare le nostre immagini senza consenso.

In questo articolo abbiamo visto proprio i metodi più efficaci per evitare il furto di immagini nello specifico per siti WordPress.

E tu, hai provato uno di questi metodi o ne conosci altri? Facci sapere con un commento.