Quando nelle pagine HTML si utilizza il link con target="_blank", il browser non si limita ad aprire una nuova scheda, ma, dietro le quinte, crea un ponte di comunicazione tra la pagina principale (Parent) e la nuova pagina (Child). Questo collegamento ha implicazioni profonde sia sulle prestazioni che sulla sicurezza. Per questo motivo il browser permette l'utilizzo dell'attributo rel per gestire le interazioni tra le due istanze.

Quando utilizziamo rel="noopener" tronchiamo la comunicazione tra le due pagine. Se non usiamo questa tecnica, nel momento in cui la pagina figlio viene aperta, questa ha la capacità di comunicare con la pagina padre attraverso l'oggetto Javascript window.opener ed è quindi potenzialmente in grado di eseguire questo codice.

window.opener.location = "https://sito-fuffa.com";

In questo scenario, mentre l'utente legge la nuova pagina, quella vecchia viene reindirizzata a un sito malevolo a sua insaputa. I browser moderni (Chromium, Gecko, WebKit) da un paio di anni a questa parte applicano l'attributo dietro le quinte, ma, non sapendo con che browser l'utente andrà ad interagire con la nostra applicazione, è sempre bene prevenire. L'attributo è specificatamente pensato per url esterni: risulta inutile se la nuova pagina risiede nel nostro dominio, dato che avremo per definizione il controllo su entrambe.

L'utilizzo di rel="noreferrer": va invece a manipolazione degli Header HTTP. Ogni volta che si apre un link, il browser invia una richiesta HTTP GET al server di destinazione. All'interno di questa richiesta è presente un header chiamato Referer.

GET /path-sito HTTP/1.1
Host: esempio.com
Referer: https://tuosito.it

Questo espone l'URL esatto da cui proviene l'utente, il che può rivelare dati sensibili o parametri privati presenti nell'URL. L'attributo rel="noreferrer" impedisce l'invio dell'intestazione Referer.
Per definizione, noreferrer implica anche noopener, poiché, se non so da dove vieni, non posso stabilire un legame tra le finestre. Una casistica in cui è però importante non impostarlo, ma utilizzare solo rel="noopener" è nel caso di link di affiliazione, perchè, in tal caso, l'attributo impedirebbe al network di sapere che la vendita arriva dalla propria applicazione.