Come prevenire l'hotlinking delle immagini in WordPress?

"Dovrei mantenere o eliminare i collegamenti alle immagini in WordPress?" Questa è una domanda che può essere dibattuta a lungo.

Anche se dopo aver scelto l'hosting WordPress gestito, potresti aver mantenuto le impostazioni predefinite. Ma immagina, quando carichi e inserisci un'immagine in un articolo o in una pagina, un collegamento viene automaticamente aggiunto all'immagine stessa.

E se i tuoi visitatori fanno clic su quell'immagine in un articolo, verranno spostati su un altro sito Web o su una pagina che visualizza solo l'immagine nella dimensione originale. Mentre in generale, le immagini sono ridimensionate per adattarsi perfettamente ai tuoi articoli. Questo fenomeno è chiamato collegamento a caldo o collegamento in linea.

Che cos'è il collegamento di immagini?

L'hotlinking, noto anche come "furto di larghezza di banda", è una pratica impropria svolta da individui che creano collegamenti diretti a contenuti (immagini, video) ospitati su altri server al fine di utilizzare le proprie risorse di calcolo e di larghezza di banda.

Un classico esempio è costituito dai collegamenti diretti a contenuti multimediali su un server A che vengono inseriti in pagine web servite dal server B ; il browser del visitatore che accede alla pagina Web sul server B invierà richieste HTTP al server A per recuperare risorse multimediali, causando uno spreco di CPU e larghezza di banda e, in definitiva, denaro.

Come funziona l'hotlinking?

Bisogna risalire al codice HTML per capire prima come vengono visualizzate le immagini nelle pagine web.

Senza entrare nei dettagli, l'HTML è un linguaggio semplice strutturato per markup: i tag (in questo caso i tag HTML) delimitano ogni elemento della pagina in modo gerarchico, inquadrando i valori e portando attributi al loro contenuto (la larghezza o l'altezza del immagine, o il testo alternativo che ne consente la descrizione, ad esempio).

La classica visualizzazione di un'immagine è realizzata con tag img per immagine e tag alt per descrizione nel codice di una pagina che si trova su un sito web. Ad esempio, considera i seguenti scenari.

Codice HTML del server Un sito web:

<img src=”/image.jpg” alt=”descrizione” />

Un sito web che esegue un hotlink procede quindi semplicemente, utilizzando nell'attributo src (che significa sorgente) dei tag immagine, l'indirizzo diretto delle tue immagini.

Questo è ciò che facciamo di solito, ad esempio, quando mostriamo le nostre immagini dai nostri siti web.

Codice HTML del sito Web del server B:

<img src=”http://www.tuodominio.com/image.jpg” alt=”descrizione” />

Alla fine, ti ritrovi con una delle tue immagini pubblicata su un sito web che non è tuo, senza la tua autorizzazione, e la ciliegina sulla torta: l'autore di questo guaio sta pungendo la tua larghezza di banda!

Come rilevare il collegamento a caldo?

Questo non è ovvio!

Puoi comunque utilizzare strumenti come TinEye. Si tratta di un sito Web con estensione per browser, che sarà in grado di cercare immagini simili a quella che indichi. Funziona molto bene, nel limite dei siti web che TinEye indicizza, e richiede di controllare a mano tutte le tue immagini!

L'altra soluzione è automatizzare il rilevamento delle immagini caricate da un sito Web diverso dal tuo. È tecnicamente più complesso ma funziona molto bene.

In linea di principio, il file .htaccess del server Apache è responsabile dell'intercettazione delle immagini prima che vengano visualizzate.

Come prevenire l'hotlinking in WordPress usando .htaccess

Vediamo come puoi prevenire l'hotlinking nel tuo WordPress inserendo alcune righe nel file .htaccess nella cartella principale del documento.

Accedi alla tua piattaforma di hosting , usa le tue credenziali di accesso in qualsiasi software FTP (sto usando Filezilla), vai su /public_html/ → e accedi al tuo file .htaccess .

Immagina l'impatto che questo tipo di comportamento può avere se molte delle tue immagini vengono visualizzate su forum con traffico molto elevato?

Innanzitutto, devi visualizzare/modificare (o creare) il file .htaccess all'interno della directory principale del tuo sito web.

Una volta aperto il file, incollare alla fine le seguenti righe e salvare il file:

RewriteEngine attivato
RewriteCond "%{HTTP_REFERER}" "!^$"
RewriteCond "%{HTTP_REFERER}" "!www.tuodominio.com" [NC]
RewriteRule "\.(jpg|jpeg|png|gif|svg)$" "-" [F,NC]

Nota: non dimenticare di sostituire tuodominio.com con il nome e l'estensione del tuo sito web.

• La prima riga serve per attivare mod_rewrite .
• La seconda riga consente riferimenti vuoti. Dovresti abilitarlo poiché alcuni visitatori potrebbero utilizzare un firewall personale o un programma antivirus che elimina le informazioni sul referrer della pagina inviate dal browser web.
• La terza riga, invece, è quella che impedisce il download e l'hotlinking dei contenuti, quando HTTP_REFERER non è impostato esplicitamente su tuodominio.com , che dovrebbe essere quello da proteggere. In questo caso è necessario sostituire tuodominio.com con il nome di dominio che desideri proteggere.
• La quarta riga specifica gli interni vietati, quelli che sono inibiti dall'hotlinking.

In questo caso è possibile specificare un numero qualsiasi di interni separati da “ | " carattere. Anche in questo caso, il confronto non fa distinzione tra maiuscole e minuscole e in caso di corrispondenza positiva, la richiesta viene riscritta su un file nullo, originando un errore 403 .

Dal browser, seguendo l'esempio dei server A e B fatto all'inizio, la pagina web caricata dal server B sembrerebbe priva di contenuti caricati da A . L'utilizzo della banda del server A e della CPU in questo modo diventa trascurabile e limitato solo all'elaborazione della richiesta da parte del motore di riscrittura.

Usa il plug-in per evitare l'hotlinking

Come probabilmente saprai, un plug-in può estendere la funzionalità del tuo sito Web e quindi impedire l'hotlinking sul tuo sito Web. Ecco 2 dei plugin più popolari in quest'area:

1. Sicurezza di iThemes

iThemes Security risolve le vulnerabilità comuni, blocca gli attacchi automatizzati e protegge le credenziali. Il plug-in ha un sistema di scansione del malware, oltre alla possibilità di tracciare gli utenti che apportano modifiche ai contenuti, nonché connessioni e disconnessioni. Molte altre funzionalità ti aiutano a proteggere il tuo sito web.

Avvolgendo!

Per vedere se hai bloccato l'hotlink tramite .htaccess o plugin, prova il tuo sito web su altlab.com, dove dovrai inserire l'indirizzo dell'immagine. Se non viene visualizzato o viene visualizzata l'immagine scelta, l'anti-hotlink sarà attivo.

Conosci altri modi per rimuovere i collegamenti dalle immagini di WordPress? Se è così, condividi il tuo modo di farlo nei commenti qui sotto.

*Questo è un post degli ospiti di Saud Razzak di Cloudways.