rel=”noopener noreferrer” a cosa servono e come rimuoverli da WordPress

Nel 2017 WordPress ha apportato alcune modifiche ai collegamenti che si aprono in una nuova scheda: aggiunge automaticamente al tag <a> l’attributo rel=”noopener noreferrer”.

Prima, il codice HTML dei link target=”_blank” era così:

<a href="https://esempio.it" target="_blank">Ancora di testo</a>

Ora è così:

<a href="https://esempio.it" target="_blank" rel="noopener noreferrer">Ancora di testo</a>

Sebbene l’attributo noopener sia utile per la sicurezza, il noreferrer ha alcuni aspetti negativi importanti che dovresti conoscere.

In questo articolo, ti spiegherò a cosa serve l’attributo rel=”noopener noreferrer” e poi ti mostrerò come rimuovere rel=”noreferrer”.

Cos’è l’attributo rel=”noreferrer”?

L’attributo rel definisce la relazione che la risorsa collegata ha con il documento a cui fa riferimento. L’attributo può avere diversi valori definiti dal W3C.

Quando fai clic su un link che porta da un sito ad un altro, la visita che ne consegue è nota per chi la riceve come visita da referral.

In Google Analytics puoi vedere le persone che hanno visitato il tuo sito proveniendo da altri siti web visionando il report Acquisition > All Traffic > Refferrals.

Ciò che l’attributo rel=”noreferrer” fa, è rimuovere i dati di riferimento dal clic.

Quindi, quando qualcuno fa clic su un link con il tag rel=”noreferrer”, verrà mostrato in Google Analytics come una visita diretta e non c’è modo di sapere la sua provenienza.

A livello tecnico, rel=”noreferrer” indica al browser di rimuovere le informazioni sui referral dall’intestazione HTTP.

Se non vuoi che un sito sappia che gli stai mandando traffico, allora ha senso usare questo tag.

D’altra parte, se vuoi che i siti sappiano che li stai linkando e gli mandi traffico, allora dovresti rimuovere questo tag.

Quindi abbiamo visto che l’attributo rel=”noreferrer” rimuove tutti i dati di riferimento dai link. Questo è un aspetto negativo per i proprietari dei siti web in quanto i report di Google Analytics avranno sempre più traffico da canale diretto perdendo molte informazioni preziose.

Cos’è l’attributo rel=”noopener”?

Per aprire un collegamento in una nuova scheda devi aggiungere l’attributo target=”_blank” al collegamento. Questo attributo causa una vulnerabilità di sicurezza nota, poiché la pagina aperta con l’attributo target=”_blank” può ottenere il controllo della pagina da cui è stata aperta, ciò che è noto come Tabnabbing inverso.

Il Tabnabbing inverso si verifica quando l’utente malintenzionato utilizza window.opener.location.assign() per sostituire la scheda in background con un documento dannoso.

Poiché l’onere di prevenire tali attacchi è sui proprietari dei siti Web, WordPress ha inserito l’attributo noopener in automatico per proteggere gli utenti. Quando aggiungi l’attributo noopener, la nuova pagina non può accedere all’oggetto della finestra tramite window.opener.

Inoltre, l’apertura di collegamenti in una nuova scheda può influire sulle prestazioni poiché alcuni processi della pagina di destinazione possono essere eseguiti nello stesso thread della pagina originale.

L’attributo rel=”noopener” impedisce che tutto ciò accada, rendendolo molto utile per questioni di sicurezza e prestazioni.

Non c’è una buona ragione per rimuovere l’attributo rel=”noopener” poiché non sembra avere alcun aspetto negativo.

L’attributo rel=”noopener” assicura che la pagina aperta in una nuova scheda non possa assumere il controllo della pagina originale. È utile sia per la sicurezza che per le prestazioni.

Cos’è il Tabnabbing inverso

Come dicevo, se linki con target=”_blank” una pagina dannosa, la nuova pagina potrebbe essere in grado di ottenere il controllo della pagina originale nel browser dell’utente e modificarne il contenuto.

Il Tabnabbing inverso, un tipo di Tabnabbing, è una sorta di attacco di Phishing in cui l’attaccante sostituisce la scheda della pagina legittima e attendibile con un documento dannoso usando window.opener.location.assign().

Per semplificare il Reverse Tabnabbing, quando clicchiamo su un link in una pagina web per aprire una nuova pagina web, e visualizziamo la nuova scheda – se poi torniamo alla pagina web precedente, quella pagina sarà cambiata automaticamente. Sembrerà la pagina web originale che stavi visualizzando, ma mostrerà un URL diverso. Gli utenti meno attenti potrebbero non notare la modifica dell’URL.

Quando torniamo alla pagina originale, ci potrebbe venire chiesto di fare login per accedere nuovamente al nostro account. Gli autori degli attacchi in realtà sostituiscono la scheda originale con un documento fake, dannoso, inseriamo i nostri dati di accesso e voilà, siamo hackerati.

Perché non voglio il noreferrer nei miei link

Quando creo un link verso un altro sito, di solito voglio che i destinatari lo sappiano. Se altri webmaster notano che sto inviando traffico, potrebbero iniziare a seguire il mio sito e magari potrebbero condividerlo.

Inoltre, come SEO ed appassionato di Web Analytics, mi piace sapere da dove proviene il mio traffico. Avere troppo traffico Diretto in Google Analytics vuol dire perdere dettagli ed informazioni che possono aiutare a valutare l’efficacia di ciascun canale di traffico.

Come rimuovere rel=”noreferrer” dai link di WordPress

WordPress vuole mettere rel=”noopener noreferrer” in tutti i link che si aprono in una nuova scheda. Sebbene mantenere rel=”noopener” sia una buona idea, come abbiamo visto potrebbe essere meglio rimuovere l’attributo noreferrer.

Ci sono diversi modi per farlo e non è detto che quello che funzioni per me funzioni anche per te.

Apri i collegamenti nella stessa finestra

Il modo più semplice per sbarazzartene è aprire i tuoi link nella stessa finestra. Questo significa che non esiste un attributo target=”_blank” e non c’è bisogno di rel=”noopener noreferrer” nei tuoi link.

Aggiungi gli attributi target=”_blank” rel=”noopener” via JavaScript

In una guida precedente avevo descritto un semplice metodo per applicare target=”_blank” rel=”noopener” a tutti i link in uscita via JavaScript.

In questo modo WordPress non capisce che il link si apre in una nuova finestra e quindi non applica l’attributo noreferrer.

Rimuovili con un plugin

C’è un plugin gratuito per WordPress che può rimuovere l’attributo noreferrer. Ho testato il plugin su uno dei miei siti e ha funzionato. L’ho installato e attivato e l’attributo noreferrer è scomparso da tutti i link nei miei post.

Tuttavia, questo plugin non sembra rimuovere l’attributo noreferrer dalle pagine di WordPress, solo singoli post. Inoltre, questo plugin è nuovo e non ci sono ancora molti download o recensioni. Quindi usalo a tuo rischio.

Rimuovi gli attributi dai tuoi blocchi in Gutenberg

Se stai utilizzando il nuovo editor Gutenberg in WordPress, potresti essere in grado di rimuovere manualmente l’attributo dai tuoi collegamenti.

Quando sei in un articolo, fai clic sui tre punti verticali nel blocco di testo e seleziona “Modifica come HTML”.

Ora elimina l’attributo noreferrer in modo che indichi solo rel=”noopener” all’interno del codice.

Dopo averlo fatto, assicurati di vedere l’articolo in anteprima, quindi fai clic con il tasto destro del mouse e ispeziona l’HTML per vedere se il codice è stato aggiunto di nuovo oppure se è stato effettivamente rimosso.

In alcuni casi, WordPress aggiungerà nuovamente l’attributo noreferrer al codice. In tal caso, dovrai provare un altro metodo.

Passa all’editor classico e aggiungi uno snippet PHP

Disabilita Gutenberg e torna al classico editor di WordPress. Puoi farlo con il plugin WordPress ufficiale gratuito chiamato Classic Editor.

Dopo aver attivato il plugin devi aggiungere uno snippet di PHP al tuo sito per rimuovere l’attributo noreferrer:

add_filter( 'wp_targeted_link_rel', 'my_targeted_link_rel_remove_noreferrer' );
function my_targeted_link_rel_remove_noreferrer( $rel_values ) {
   return preg_replace( '/noreferrer\s*/i', '', $rel_values );
}

Aggiungi questo codice al tuo file functions.php, via FTP o andando in WordPress Dashboard -> Aspetto -> Editor temi -> funzioni.php.

Alcuni miti su rel=”noreferrer”

Ci sono alcuni fraintendimenti sull’attributo rel=”noreferrer” che vorrei smarcare prima di chiudere.

Noreferrer vs. Nofollow

Gli attributi “noreferrer” e “nofollow” hanno un suono simile, ma in realtà non hanno nulla a che fare l’uno con l’altro.

Il Noreferrer rimuove le informazioni sui referral dai link a livello di browser, mentre nofollow indica ai motori di ricerca di non trasmettere PageRank ai collegamenti.

Un collegamento con nofollow non trasmette alcuna autorevolezza al collegamento, ma non modifica l’intestazione HTTP e mantiene le informazioni di referral nei report Analytics.

Un collegamento con il Noreferrer passa autorevolezza al collegamento, ma NON mostra le informazioni sul referral.

Nofollow è utile quando si collega a un sito che non si desidera supportare. È anche comunemente usato per i contenuti generati dagli utenti e i link di affiliazione o adv. Il noreferrer è completamente diverso. Semplicemente non ha nulla a che fare con nofollow.

Collegamenti di affiliazione

È un mito il fatto che l’attributo noreferrer possa incidere sulle entrate derivanti dai link di affiliazione.

Sebbene i programmi di affiliazione utilizzino informazioni sui referral per sapere quale affiliato ha indirizzato la vendita, la corretta assegnazione non è influenzata dall’attributo rel=”noreferrer”.

Questo perché la maggior parte dei link affiliati include l’ID referral nell’URL del link come parametro – esempio.it?affid=123.

Conclusioni

Anche se rel=”noopener” è utile per la sicurezza, rel=”noreferrer” è principalmente utile per la privacy. Se non vuoi che i siti sappiano che stai collegandoti a loro, allora ha senso usare rel = “noreferrer” sui tuoi link. Tuttavia, se sei come me e desideri che altri siti sappiano quando stai inviando loro traffico, allora ha senso rimuovere questo attributo dai tuoi link.