rel noopener noreferrer è una coppia di attributi dei link esterni aperti in una nuova scheda: noopener protegge la pagina di origine, noreferrer non trasmette l’indirizzo di provenienza.
Su WordPress vengono aggiunti in automatico ai link con target _blank, quindi proteggono il sito e i dati di navigazione senza interventi da parte tua.
Quando si tratta della sicurezza del proprio sito web, la prudenza non è mai troppa. Abbiamo ben chiaro che, per proteggere il sito dagli attacchi hacker, è necessario adottare alcune misure preventive, una di queste è proprio il protocollo HTTPS e quindi del certificato SSL. Ma hai mai sentito parlare dell’importanza degli attributi del tag HTML “noopener noreferrer”?
Il “noreferrer” è un attributo che ha la funzione di non diffondere nessuna informazione circa la fonte del traffico. Questo mantiene una certa privacy sui dati di analisi a informazioni riguardanti il sito di origine: gli url di provenienza o le chiavi di ricerca utilizzate dall’utente per approdare sulla pagina web, ad esempio. I collegamenti verso il sito di destinazione appariranno come Traffico diretto nelle analytics di quest’ultimo, in Google Analytics ad esempio, e non nelle tue, né come “Traffico di riferimento” dal sito originario.
Il collegamento con noreferrer trasmette comunque link juice al sito esterno, perché l’attributo evita solo di inviare il referrer e non rivela nulla dei dati relativi al sito originario. Per impedire il passaggio di valore si usa nofollow.
A cosa servono gli attributi rel noopener noreferrer nei link?
Sono attributi aggiunti ai link verso pagine esterne per bloccare la strada agli hacker che sfruttano alcune vulnerabilità per azioni di phishing.
Non tutti hanno mai notato questo attributo aggiunto a tutti quei link che portano a pagine web esterne, al nostro sito, quindi un attributo che ha lo scopo di bloccare la strada agli hacker che mirano a sfruttare alcune vulnerabilità della struttura per portare avanti azioni di phishing.
Cos’è il reverse tabnabbing?
Si tratta di una tecnica molto sottile che spinge gli utenti a credere di trovarsi ancora nel sito sicuro ed ufficiale, inconsapevoli di essere dirottati su una pagina creata ad hoc per spingerli a rivelare i propri dati sensibili come password, codici di accesso o dati della carta di credito.
Il rischio di phishing sta nel fatto che gli hacker, sfruttando target=”_blank”, dirottano l’utente su una pagina web che apparentemente è del tutto uguale a quella del sito “originario”, ottenendo in questo modo illecito i dati riservati e sensibili.
Un modo per evitare questo inganno è quello di controllare l’url della pagina fake che sarà certamente diverso da quello originale, ma purtroppo non tutti gli utenti si accorgono di questa modifica. Tale tecnica prende il nome di Reverse Tabnabbing.
L’attributo noopener impedisce alla nuova pagina di accedere a quella di partenza tramite window.opener, come descrive la documentazione MDN sull’attributo rel noopener. Dal 2023 OWASP segnala che nei browser moderni target=”_blank” ha un rel=”noopener” implicito, ma esistono ancora browser che non lo fanno, quindi conviene lasciare l’attributo esplicito sui link esterni. Noreferrer include già gli effetti di noopener, ma i due valori si usano insieme per coprire anche i browser meno recenti.
Riguardo la SEO e l’impatto di questi attributi: rel=”noopener noreferrer” non danneggia il posizionamento, e l’effetto di noreferrer riguarda solo la visibilità della provenienza nelle analytics del sito di destinazione. L’aggiunta dell’attributo “nofollow” a un collegamento che include già rel=”noopener noreferrer” consente di comunicare a Google che si desidera collegare il proprio sito ad una pagina web esterna ma non si desidera implicare alcun tipo di approvazione, incluso il trasferimento di link juice. Google raccomanda sponsored per i link a pagamento, ugc per i contenuti generati dagli utenti e nofollow negli altri casi; per i link normali non serve alcun rel. Mentre i primi due attributi di cui abbiamo parlato vengono inseriti in automatico dal sistema WordPress, l’attributo “nofollow” dovrà essere inserito appositamente, flaggando la spunta della finestra di “collegamento ipertestuale”.
Un sito WordPress lasciato senza aggiornamenti per un anno è il primo bersaglio di attacchi e malware, e ripulirlo costa più di un anno di manutenzione.
Differenza tra noopener, noreferrer e nofollow
Noopener impedisce alla pagina aperta di controllare quella di origine, noreferrer in più non comunica da quale sito arriva il visitatore, nofollow invece parla solo a Google e non protegge nulla.
I primi due riguardano il comportamento del browser quando si clicca un link, il terzo riguarda come i motori di ricerca interpretano il link. Per questo si possono combinare nello stesso attributo rel, ma servono a scopi diversi. La tabella li mette a confronto sui punti che interessano a chi gestisce un sito WordPress.
| Attributo | Cosa fa | Cosa protegge | Va impostato a mano su WordPress? |
|---|---|---|---|
| noopener | La risorsa aperta non ha accesso al documento di origine, perché Window.opener restituisce null. Il browser continua a inviare il Referer. | La pagina di origine dal reverse tabnabbing. | No, viene aggiunto in automatico ai link con target _blank. |
| noreferrer | Omette l’header Referer e fa comportare il browser come se ci fosse anche noopener. | La pagina di origine e l’indirizzo da cui parte la visita. | No, viene aggiunto in automatico ai link con target _blank. |
| nofollow | È un segnale per Google che indica di non attribuire approvazione al link. | Nessuna protezione tecnica: riguarda solo l’interpretazione del link da parte del motore di ricerca. | Sì, si imposta dall’editor sul singolo link. |
Per i link normali, quelli verso fonti o risorse che citi volentieri, nofollow non serve e non devi aggiungere alcun rel per la SEO. Va usato solo quando il link non vuole essere un’indicazione di fiducia, per esempio verso un sito che non conosci.
C’è un effetto collaterale da conoscere sulle analytics: con noreferrer il sito di destinazione non riceve l’header Referer, quindi se linki un partner o un programma di affiliazione la fonte del traffico può non comparire nei suoi dati. Se ti serve che il partner veda da dove arrivano i clic, in quel caso conviene lasciare solo noopener.
Come aggiungere rel noopener noreferrer a un link HTML
Basta inserire rel=”noopener noreferrer” nel tag del link, accanto a target=”_blank”, e solo nei link esterni che si aprono in una nuova scheda. Nei link interni non serve.
La procedura è la stessa in un file HTML, in un tema o nel blocco “HTML personalizzato” di WordPress. Il codice finale è questo:
<a href=”https://esempio.it” target=”_blank” rel=”noopener noreferrer”>testo del link</a>
- Individua il link esterno, cioè quello che porta a un dominio diverso dal tuo, e controlla che nel tag ci sia già target=”_blank”. Se la scheda nuova non ti serve, puoi anche non aggiungerlo: senza target=”_blank” il link si apre nella stessa scheda e l’attributo rel di protezione non ha motivo di esserci.
- Dopo l’indirizzo e dopo target=”_blank”, scrivi rel=”noopener noreferrer”. I due valori vanno nello stesso attributo, separati da uno spazio, non in due attributi rel distinti.
- Controlla le virgolette: devono essere dritte (“) e ogni attributo deve chiudersi correttamente, altrimenti il browser legge male il resto del tag e il link può smettere di funzionare.
- Salva e prova il link dal sito pubblicato: deve aprirsi in una nuova scheda e portare alla pagina giusta. Per verificare l’attributo, clicca con il tasto destro sul link e apri “Ispeziona” nel browser.
Usa questa combinazione soprattutto quando linki siti che non controlli, come directory, fonti esterne o pagine di terzi. Sui link interni, per esempio da un articolo a una pagina servizi dello stesso sito, non serve né l’apertura in nuova scheda né l’attributo rel.
Se scegli noreferrer, ricorda che il sito di destinazione non riceve l’indicazione di provenienza del clic. Se ti interessa misurare quante persone escono verso un partner o un programma di affiliazione, aggiungi parametri UTM all’indirizzo del link: la fonte del traffico resta tracciabile anche senza referrer.
Domande frequenti su noopener e noreferrer
Cosa significano noopener e noreferrer?
Sono due valori dell’attributo rel che si applicano ai link esterni aperti in una nuova scheda. noopener impedisce alla pagina di destinazione di controllare quella di origine tramite window.opener. noreferrer fa un passo in più: evita che il browser comunichi l’indirizzo della pagina da cui arriva il visitatore.
A cosa serve l’attributo noopener?
Serve a bloccare il reverse tabnabbing, una tecnica in cui la pagina aperta riscrive quella di partenza, per esempio sostituendola con un falso sito di accesso. Senza noopener un link con target _blank può lasciare alla pagina di destinazione questa possibilità. Con noopener la pagina di origine resta com’è e il rischio viene eliminato.
Noreferrer influisce sulla SEO?
No, rel=”noopener noreferrer” non danneggia il posizionamento su Google. L’effetto di noreferrer riguarda solo ciò che il sito di destinazione vede nelle proprie analytics, cioè la provenienza del visitatore. Per i link normali verso fonti che citi volentieri non serve alcun rel, mentre nofollow va usato solo quando il link non deve essere un’indicazione di fiducia.
WordPress aggiunge noopener noreferrer in automatico?
Sì, per i link con target _blank WordPress aggiunge da solo rel=”noopener noreferrer”, senza che tu debba fare nulla. L’attributo nofollow invece va impostato a mano: nell’editor apri la finestra del collegamento ipertestuale e spunta la casella sul singolo link. Puoi verificare il risultato cliccando con il tasto destro sul link e scegliendo Ispeziona.
Devo aggiungere noopener a tutti i link?
No, basta sui link esterni che si aprono in una nuova scheda, cioè quelli che portano a un dominio diverso dal tuo. Sui link interni, come quello da un articolo a una pagina del tuo sito, non servono né target _blank né rel. Se un link si apre nella stessa scheda, l’attributo rel non ha motivo di esserci.
Noreferrer fa comparire il traffico come diretto in Google Analytics?
Sì, nelle analytics del sito di destinazione il clic arrivato con noreferrer compare come traffico diretto e non come traffico di riferimento. Il sito che ha inserito il link non risulta come fonte. Se linki un partner o un programma di affiliazione e vuoi che veda da dove arrivano i clic, conviene usare solo noopener oppure aggiungere parametri UTM all’indirizzo.
Rel noopener noreferrer protegge davvero dal phishing?
Protegge da una tecnica precisa, il reverse tabnabbing, ma da solo non basta contro il phishing. Il phishing si basa soprattutto su pagine finte che sembrano identiche a quelle reali, quindi conviene controllare sempre l’indirizzo della pagina prima di inserire password o dati della carta. Questo controllo resta una difesa necessaria anche con gli attributi attivi.
Vuoi un sito WordPress sicuro in ogni dettaglio?
Se vuoi sapere se i link esterni del tuo sito WordPress sono impostati in modo sicuro, li controllo uno per uno e ti dico cosa sistemare.
Scrivimi per una consulenzaCondividi
