Sicurezza e Prestazioni: Le Keyword noopener e noreferrer

La documentazione ufficiale di Google Lighthouse individua due punti critici nei link web esterni (cross-origin) delle pagine web: prestazioni e sicurezza. Ecco cosa ci dice Google a proposito delle prestazioni:

Quando aprite un’altra pagina utilizzando target="_blank", l’altra pagina potrebbe essere eseguita sullo stesso processo della vostra pagina, a meno che non sia abilitato l’isolamento del sito. Se l’altra pagina esegue una gran quantità di codice JavaScript, ne potrebbe soffrire anche la vostra pagina. Si legga The Performance Benefits of rel=noopener

Ed ecco, invece, quanto si afferma a proposito della sicurezza:

L’altra pagina può accedere al vostro oggetto window con la proprietà window.opener. Questo espone una superficie di attacco in quanto l’altra pagina può potenzialmente reindirizzare la vostra pagina ad un URL malevolo. Si legga About rel=noopener.

In pratica il DOM della pagina di origine può essere modificato da uno script presente nella pagina di destinazione, il quale accede alla proprietà opener dell’oggetto window, descritto nella documentazione di Mozilla. Ecco un esempio pratico di quello che avviene.

Google raccomanda, quindi, di utilizzare sempre, insieme all’attributo target="_blank", l’attributo rel="noopener" o l’attributo rel="noreferrer", oppure entrambi:

<a href="https://www.google.it/" target="_blank" rel="noopener noreferrer">Google</a>

• rel="noopener" evita che la nuova pagina possa accedere alla proprietà window.opener e fa in modo che questa venga eseguita in un processo separato
• rel="noreferrer" ha lo stesso effetto, e in più evita che venga trasmesso alla nuova pagina l’header Referer

Nella specifica del W3C si legge:

For historical reasons, the noreferrer keyword implies the behavior associated with the noopener keyword when present on a hyperlink that creates a new browsing context. That is, <a href=”…” rel=”noreferrer” target=”_blank”> has the same behavior as <a href=”…” rel=”noreferrer noopener” target=”_blank”>.

HTML Living Standard

Una lettura più techica della questione è offerta da Jake Archibald, developer advocate di Google Chrome.

Se i due attributi apportano un livello di sicurezza aggiuntivo alle pagine web, non è detto che sia sempre il caso di utilizzarli, o, quanto meno, che sia il caso di utilizzarli entrambi. Ho detto, infatti, che la keyword noreferrer previene la trasmissione dell’header Referer, il che si traduce nella mancata trasmissione di tutte le informazioni che riguardano il sito da cui è stata generata la visita. Questo significa che, nelle statistiche del sito visitato, il sito referral non viene registrato e il destinatario della visita non ne verrà a conoscenza. Questo potrebbe non essere positivo se si vuole far sapere al destinatario della visita che il click proviene proprio dalle nostre pagine.

Non sembra, invece, che ci siano controindicazioni sull’utilizzo della keyword nopener. Questa protegge semplicemente la pagina da link malevoli, senza compromettere in alcun modo la SEO.

noopener e noreferrer in WordPress

noopener e noreferrer in TinyMCE

A partire dalla versione 4.7.4, l’editor classico di WordPress aggiunge automaticamente l’attributo rel="noopener" ai link che vengono aperti in una nuova scheda. Al momento dell’inserimento del link basterà selezionare la spunta sull’opzione Apri il link in una nuova scheda:

Anche se non è consigliato né consigliabile eliminare l’attributo rel="noopener" dall’editor classico, è comunque possibile evitare che venga inserito automaticamente con un piccolo hack. Basterà, infatti, aggiungere il seguente codice ad un plugin o al file functions.php di un child theme:

function my_tiny_mce_before_init( $mceInit ) {
     $mceInit['allow_unsafe_link_target'] = true;
     return $mceInit;    
 }
 add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

Maggiori informazioni sulla personalizzazione dell’editor TinyMCE in WordPress sono in questo articolo di Kinsta.

noopener e noreferrer in Gutenberg

L’importanza delle due keyword è implicitamente riconosciuta dagli sviluppatori dell’editor a blocchi di WordPress, Gutenberg. Nel nuovo editor, infatti, l’inserimento dell’attributo rel="noopener noreferrer" è automatico ogni volta che si aggiunge un link con attributo target="_blank".

Gutenberg aggiunge l’attributo rel="noopener noreferrer" anche ai link testuali. Basta impostare l’apertura in una nuova finestra.

Al momento non sembra possibile automatizzare l’eliminazione di una delle due keyword, ma quanto meno Gutenberg, a differenza di TinyMCE, permette di modificare manualmente il codice del link.

Basterà, quindi, modificare come HTML il blocco che contiene il link da modificare, ed eliminare manualmente noreferrer.

Nel caso dei link collegati alle immagini, sarà possibile modificare il valore dell’attributo rel nelle impostazioni del blocco immagine.