L’attributo rel=”noopener” impedisce alla pagina aperta da un link di controllare la finestra di origine tramite window.opener. È particolarmente rilevante quando usi target="_blank" per aprire una nuova scheda.

Il problema di window.opener

Senza isolamento, la pagina di destinazione può ottenere un riferimento alla scheda che l’ha aperta e tentare di modificarne l’indirizzo. Questo comportamento è stato sfruttato in attacchi detti reverse tabnabbing: l’utente torna alla scheda precedente e può trovarsi su una pagina contraffatta.

Esempio corretto

<a href="https://example.com"
   target="_blank"
   rel="noopener">
  Apri il sito esterno
</a>

I browser moderni trattano generalmente i link con target="_blank" come se avessero il comportamento noopener, ma dichiararlo resta utile per chiarezza, compatibilità e strumenti che generano HTML.

noopener e noreferrer non sono la stessa cosa

noopener isola window.opener. noreferrer chiede inoltre di non inviare l’header HTTP Referer alla destinazione e implica il comportamento noopener. Usa noreferrer soltanto quando vuoi anche ridurre le informazioni di provenienza, perché influenza analytics e attribuzione.

Differenza rispetto a nofollow

nofollow riguarda il rapporto con i motori di ricerca, non la sicurezza della nuova scheda. Non sostituisce noopener. Per link pubblicitari o di affiliazione Google indica attributi come sponsored; per contenuti generati dagli utenti può essere pertinente ugc.

Combinazioni comuni

rel="noopener"
rel="noopener noreferrer"
rel="sponsored noopener"
rel="ugc nofollow noopener"

Gli attributi sono separati da spazi. Inserisci soltanto quelli coerenti con funzione e relazione del link.

Quando non serve target=”_blank”

Aprire automaticamente una nuova scheda può sorprendere l’utente e rendere più difficile la navigazione da tastiera o con tecnologie assistive. Per molti link è preferibile la navigazione normale. Se scegli una nuova scheda, segnalalo quando il contesto non lo rende evidente.

WordPress e rel=”noopener”

L’editor di WordPress può aggiungere gli attributi opportuni quando imposti l’apertura in una nuova scheda. Il risultato dipende da versione, blocco e plugin. Controlla l’HTML finale anziché affidarti a vecchie guide.

Non rimuovere automaticamente noopener da tutto il sito. Se un’applicazione ha davvero bisogno di comunicare tra finestre, progetta esplicitamente il flusso con origini attendibili e postMessage, verificando sempre l’origine dei messaggi.

Controllare i link nel codice

Cerca link con target="_blank" privi di isolamento nei template e nei contenuti generati. Non applicare sostituzioni testuali cieche a JSON, shortcode o script. Modifica il componente che genera l’HTML e poi verifica il frontend.

JavaScript: window.open()

Quando apri una finestra via JavaScript, usa le funzionalità che impediscono l’accesso a opener e non inserire input non validato nell’URL.

window.open('https://example.com', '_blank', 'noopener');

FAQ

noopener nasconde il sito di provenienza?

No. Per limitare il referrer si usa una referrer policy o noreferrer. Noopener riguarda il collegamento tra le finestre.

nofollow rende sicuro target blank?

No. Nofollow è un’indicazione per i motori di ricerca; non impedisce l’uso di window.opener.

Devo aggiungerlo ai link nella stessa scheda?

Normalmente no, perché il problema riguarda l’apertura di un nuovo contesto con un riferimento all’origine.

Conclusione

rel="noopener" è una misura semplice per isolare le nuove schede aperte con target="_blank". Non confonderlo con noreferrer o nofollow e non rimuoverlo senza una ragione tecnica verificata. La documentazione MDN su noopener riassume il comportamento previsto.