Rel noopner e rel noreferrer: cosa sono e come si usano

I link rappresentano l’infrastruttura fondamentale del web, consentendo una navigazione fluida tra le pagine. L’apertura di collegamenti in una nuova scheda attraverso l’attributo target=”_blank” , però, può introdurre vulnerabilità sfruttabili da siti malevoli. In particolare, alcuni script possono manipolare la finestra originale, reindirizzando gli utenti verso contenuti non sicuri o alterando la navigazione.

Per rispondere a questi rischi, gli attributi rel=”noopener noreferrer” sono diventati soluzioni indispensabili. Il primo blocca l’accesso della nuova scheda alla pagina sorgente, prevenendo attacchi di tabnabbing, mentre il secondo impedisce la trasmissione delle informazioni di referrer.

L’uso consapevole di questi attributi influisce anche sulla gestione della privacy e sull’analisi del traffico web ed il giusto funzionamento consente di migliorare l’esperienza utente e rafforzare la protezione dei dati online.

Cosa significa rel=”noopener noreferrer”

Nell’ambito dello sviluppo web, ogni attributo all’interno di un link HTML può avere implicazioni rilevanti per la sicurezza e la privacy. L’uso di rel=”noopener noreferrer” nasce dall’esigenza di prevenire comportamenti indesiderati quando un collegamento viene aperto in una nuova scheda tramite target=”_blank” .

L’attributo noopener impedisce che la nuova scheda mantenga un accesso diretto alla finestra originale attraverso lo script window.opener. Senza questa protezione, una pagina esterna potrebbe manipolare la scheda di origine, ad esempio sostituendola con un sito fraudolento in un attacco di tabnabbing, esponendo gli utenti a potenziali minacce come il phishing.

D’altra parte, noreferrer si concentra sulla protezione della privacy e sulla gestione dei dati trasmessi ai siti di destinazione. Normalmente, quando viene seguito un link, il sito ricevente può ottenere informazioni sulla pagina di provenienza tramite il valore HTTP Referer (con una sola “r” per il nome dell’intestazione). Impostando rel=”noreferrer” , il browser impedisce questa comunicazione, rendendo anonima la navigazione agli occhi del sito collegato.

Questi due attributi, sebbene possano essere utilizzati separatamente, vengono spesso applicati congiuntamente per una protezione più completa. La loro funzione, però, non è solo tecnica: rappresentano un equilibrio tra sicurezza, tutela della privacy e necessità di tracciare il traffico web. Se da un lato bloccano azioni potenzialmente dannose, dall’altro possono influenzare il funzionamento degli strumenti di analisi del traffico, rendendo meno immediata l’identificazione delle fonti di accesso a un sito.

Perché utilizzare noopener e noreferrer nei link?

L’adozione di rel=”noopener noreferrer” risponde, quindi a tre necessità fondamentali: sicurezza, privacy e performance.

Migliorare la sicurezza: prevenzione di attacchi e manipolazioni

Uno dei principali motivi per cui rel=”noopener” è essenziale riguarda la protezione contro gli attacchi di tabnabbing e altri exploit basati su window.opener. Nel momento in cui una nuova scheda si apre senza l’attributo noopener , questa può mantenere un collegamento alla finestra di origine e modificarne il contenuto attraverso JavaScript.

Un sito malevolo potrebbe sfruttare questa connessione per sostituire la pagina originale con una copia fraudolenta, ingannando l’utente e inducendolo a fornire dati sensibili come credenziali di accesso o informazioni di pagamento. L’aggiunta di noopener tronca questa connessione, eliminando il rischio di manipolazione della scheda di origine.

Protezione della privacy: controllo della trasmissione del referrer

Quando un utente clicca su un link, il sito di destinazione può ricevere informazioni sulla pagina di provenienza attraverso l’intestazione HTTP Referer. Sebbene questa funzionalità sia utile per il tracciamento del traffico e l’analisi delle origini delle visite, in alcuni casi può compromettere la riservatezza degli utenti. Ad esempio, se un sito gestisce dati sensibili – come informazioni mediche o finanziarie – condividere automaticamente l’URL di provenienza potrebbe non essere desiderabile. L’attributo rel=”noreferrer” impedisce che queste informazioni vengano trasmesse, garantendo un maggiore livello di anonimato per gli utenti che seguono determinati collegamenti.

Effetti sulle performance: un miglioramento indiretto

Sebbene meno discusso, l’uso di noopener può avere anche implicazioni sulle performance del browser: quando una nuova scheda mantiene un legame con la finestra di origine attraverso window.opener, il browser potrebbe continuare a destinarvi risorse, occupando memoria e potenzialmente rallentando il caricamento delle pagine. L’aggiunta di noopener interrompe questo legame, riducendo il consumo di risorse e ottimizzando le prestazioni complessive della navigazione.

Come usare rel=”noopener noreferrer” nei link HTML

L’integrazione degli attributi rel=”noopener noreferrer” nei link HTML è un’operazione semplice ma importante per garantire sicurezza, privacy e prestazioni ottimali durante la navigazione.

Sintassi corretta e applicazione pratica

L’implementazione avviene direttamente all’interno dell’elemento <a>, aggiungendo l’attributo rel con entrambi i valori:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visita Example</a>

In questa configurazione:

• target=”_blank” indica al browser di aprire il link in una nuova scheda;
• rel=”noopener” impedisce alla scheda appena aperta di interagire con la pagina di origine, eliminando i rischi legati a window.opener;
• rel=”noreferrer” evita che il sito di destinazione possa rilevare la pagina di provenienza, preservando la privacy dell’utente.

Quando è necessario e quando opzionale

Sebbene l’aggiunta di questi attributi sia consigliata per la maggior parte dei link esterni, la loro applicazione può variare a seconda del contesto:

• obbligatorio per link esterni non affidabili: quando si rimanda a siti di cui non si può controllare il contenuto o le politiche di sicurezza, l’uso combinato di noopener e noreferrer è fondamentale per prevenire exploit e tracking indesiderati;
• utile per link a risorse affidabili: anche se si collega a fonti sicure, noopener è comunque raccomandato per prevenire manipolazioni. In alcuni casi, noreferrer può essere omesso se è necessario mantenere attivo il tracciamento del referrer;
• non necessario per link interni: quando si creano collegamenti all’interno dello stesso sito web, questi attributi non hanno alcuna utilità in termini di sicurezza, poiché entrambi i documenti appartengono allo stesso dominio e non vi è il rischio di attacchi di tabnabbing o manipolazione.

Rel noopener noreferrer e WordPress: cosa sapere

Il sistema WordPress, utilizzato da milioni di siti web in tutto il mondo, e facile da gestire se si sceglie un hosting WordPress, come quello proposto da VHosting, integra automaticamente misure di sicurezza per proteggere gli utenti da vulnerabilità comuni. Tra queste, l’aggiunta automatica degli attributi rel=”noopener noreferrer” ai link aperti in una nuova scheda rappresenta una strategia efficace per mitigare potenziali rischi.

Gestione automatica dei link in WordPress

WordPress implementa questa funzionalità per qualsiasi <a> che includa target=”_blank”, senza richiedere interventi manuali da parte dell’utente. Questo significa che tutti i collegamenti esterni aperti in una nuova scheda ricevono automaticamente la protezione contro attacchi di tabnabbing e la trasmissione dei dati di referrer, salvo specifiche modifiche da parte di sviluppatori o attraverso plugin personalizzati.

WordPress e l’interazione con i plugin builder (Elementor e altri)

Page builder come Elementor, ampiamente utilizzati nella creazione di siti web dinamici e personalizzati, adottano lo stesso approccio. Ogni volta che un link viene configurato per aprirsi in un’altra scheda, Elementor aggiunge in modo predefinito noopener noreferrer, mantenendo inalterata la protezione senza necessità di modifica manuale.

Nel caso in cui si vogliano modificare questi parametri, alcuni plugin offrono la possibilità di rimuovere noreferrer, ad esempio per esigenze specifiche di tracciamento analytics, pur mantenendo noopener attivo per garantire la sicurezza. Questa scelta può essere rilevante quando si monitora il traffico referral proveniente da campagne pubblicitarie o strategie di link building.

Eccezioni e personalizzazioni nel codice

Sebbene WordPress imposti questi attributi come standard, situazioni particolari possono richiedere personalizzazioni. Gli sviluppatori possono intervenire direttamente nel codice, modificando il comportamento predefinito con filtri ed editor di temi. Allo stesso tempo, qualsiasi rimozione di noopener dovrebbe essere valutata con attenzione, poiché aumenterebbe l’esposizione a potenziali attacchi di tabnabbing.

Impatto su SEO e tracciamento dati

L’uso di rel=”noopener noreferrer” nei link HTML ha conseguenze rilevanti sulla sicurezza, ma può anche influenzare il tracciamento del traffico web. Sebbene noopener non abbia impatti sulla SEO, noreferrer modifica il modo in cui i dati sui visitatori vengono registrati dagli strumenti di analisi.

Differenza tra nofollow e noreferrer

• nofollow indica ai motori di ricerca di non trasferire valore SEO al link di destinazione, utilizzato spesso per link sponsorizzati o non affidabili;
• noreferrer non incide sul ranking, ma impedisce la trasmissione dell’intestazione HTTP referrer, rendendo invisibile la sorgente del traffico al sito di destinazione.

Effetti sul monitoraggio del traffico

Google Analytics e altre piattaforme registrano le visite provenienti da link con noreferrer come “direct traffic” invece che come referral, rendendo difficile attribuire correttamente il traffico esterno. Per aggirare questo problema, è possibile utilizzare UTM parameters , che permettono di tracciare l’origine della visita senza dipendere dal referrer.