Cosa sono i tag rel=”noopener noreferrer” e a cosa servono?

Gli attributi “noopener” e “noreferrer” si aggiungono ai link esterni che si aprono in una nuova scheda, per ragioni di sicurezza e privacy: “noopener” impedisce alla pagina di destinazione di manipolare quella di origine, “noreferrer” evita di trasmettere da dove arriva il traffico. Su WordPress vengono aggiunti in automatico ai link con target _blank. In pratica proteggono il sito e i dati di navigazione senza che tu debba fare nulla.

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 esterni al sito originario appariranno come Traffico diretto in Google Analytics, e non più come “Traffico di riferimento” dal sito originario.

Se un hacker sfrutta un link che non include noreferrer, potrai accorgerti dell’inganno andando a visualizzare URL del sito “ingannevole” come link in “Traffico referral” sulla dashboard di Google Analytics. Al contrario, quando il collegamento include noreferrer, verrà visualizzato nel traffico diretto. Tale link trasmetterà link juice al sito esterno (attraverso il collegamento) ma non rivelerà nulla dei dati relativi al sito originario.

Cos’è il tag “noopener”?

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.

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.

“noopener noreferrer” Cosa sono e che impatto hanno sulla SEO?

“Solitamente gli attributi rel=”noopener noreferrer” vengono inseriti nei collegamenti ipertestuali esterni. l tag rel=”noopener noreferrer” che possono essere aggiunti a un collegamento ipertestuale o backlink. Il loro scopo è quello di impedire alla nuova pagina aperta dal collegamento, di accedere alla pagina originale. una misura per migliorare la sicurezza del nostro sito, impedendo alla nuova pagina che si apre di manipolare la nostra pagina web originale in qualche maniera.”

Riguardo la SEO e l’impatto di questi attributi: 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. 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”.