Link esterni WordPress JavaScript: sicurezza e nuova scheda

Con JavaScript puoi riconoscere automaticamente i link esterni in WordPress, aggiungere un’icona visiva, aprirli in una nuova scheda e applicare gli attributi rel="noopener noreferrer". La soluzione funziona senza modificare manualmente ogni collegamento presente negli articoli e nelle pagine. Il controllo utilizza l’origine del sito, quindi distingue i collegamenti interni da quelli diretti verso domini differenti. L’attributo noopener impedisce alla nuova scheda di controllare la pagina originale tramite window.opener, mentre noreferrer nasconde l’URL di provenienza al sito esterno. Il codice va caricato sul front-end di WordPress tramite un tema child o un piccolo plugin personalizzato, evitando modifiche dirette ai file del tema principale.

Come riconoscere i link esterni in WordPress con JavaScript

Un link viene considerato esterno quando il suo protocollo è http o https e il dominio di destinazione non coincide con l’origine della pagina WordPress. Il confronto tra url.origin e window.location.origin include protocollo, dominio e porta, evitando di classificare come esterni i collegamenti interni del sito.

Il codice seguente ignora ancore locali come #commenti, collegamenti mailto:, numeri di telefono e altri protocolli che non aprono normali pagine Web. Gli URL relativi vengono invece risolti correttamente rispetto all’indirizzo della pagina corrente.

Passo 1: creare il file JavaScript

Crea il file link-esterni.js nella cartella del tema child, ad esempio:

/wp-content/themes/nome-tema-child/js/link-esterni.js

Inserisci questo codice nel file:

document.addEventListener('DOMContentLoaded', function () {
const linkEsterni = document.querySelectorAll('a[href]');

linkEsterni.forEach(function (link) {
const href = link.getAttribute('href');

if (!href || href.startsWith('#')) {
return;
}

let url;

try {
url = new URL(href, window.location.href);
} catch (errore) {
return;
}

const protocolloValido =
url.protocol === 'http:' || url.protocol === 'https:';

if (!protocolloValido || url.origin === window.location.origin) {
return;
}

link.setAttribute('target', '_blank');

const relEsistente = (link.getAttribute('rel') || '')
.split(/s+/)
.filter(Boolean);

const relSicuro = new Set(relEsistente);
relSicuro.add('noopener');
relSicuro.add('noreferrer');

link.setAttribute('rel', Array.from(relSicuro).join(' '));

if (!link.querySelector('.icona-link-esterno')) {
const icona = document.createElement('span');

icona.className = 'icona-link-esterno';
icona.setAttribute('aria-hidden', 'true');
icona.textContent = '↗';

link.appendChild(icona);
}

const etichettaEsistente = link.getAttribute('aria-label');
const testoLink = etichettaEsistente || link.textContent.trim();

if (
testoLink &&
!testoLink.toLowerCase().includes('nuova scheda')
) {
link.setAttribute(
'aria-label',
testoLink + ' (si apre in una nuova scheda)'
);
}
});
});

Il selettore a[href] esamina tutti i collegamenti con un attributo href presenti nel front-end. Il metodo new URL() consente di analizzare sia gli indirizzi assoluti, come https://esempio.it, sia quelli relativi, come /pagina-interna/.

L’uso di Set evita di aggiungere due volte noopener o noreferrer quando un link contiene già uno dei due attributi. L’icona viene inserita come elemento separato con aria-hidden="true", così il simbolo grafico non viene letto inutilmente dalle tecnologie assistive.

Come caricare lo script nel tema child di WordPress

Il file JavaScript deve essere inserito nella coda degli script pubblici di WordPress. Il metodo corretto è wp_enqueue_script(), richiamato dall’hook wp_enqueue_scripts.

Passo 2: modificare functions.php

Apri il file functions.php del tema child e aggiungi:

<?php
function backdigit_carica_link_esterni() {
$file_js = get_stylesheet_directory() . '/js/link-esterni.js';
$url_js  = get_stylesheet_directory_uri() . '/js/link-esterni.js';

wp_enqueue_script(
'link-esterni',
$url_js,
array(),
file_exists($file_js) ? filemtime($file_js) : null,
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_link_esterni');

get_stylesheet_directory_uri() punta al tema child attivo, mentre filemtime() cambia automaticamente la versione dello script quando il file viene modificato. Questo riduce il rischio che il browser continui a usare una copia precedente memorizzata nella cache.

Se il codice viene inserito in un plugin personalizzato, il percorso deve usare le funzioni del plugin invece di quelle del tema. Non è consigliabile modificare direttamente functions.php del tema principale perché gli aggiornamenti potrebbero cancellare le personalizzazioni.

La funzione viene eseguita solo sul front-end tramite wp_enqueue_scripts; l’area di amministrazione di WordPress non viene coinvolta. Dopo il salvataggio, svuota la cache del plugin di ottimizzazione, del CDN e del browser prima di verificare il risultato.

Come aggiungere e stilizzare l’icona dei link esterni

Il JavaScript crea un elemento con classe icona-link-esterno, ma l’aspetto dell’icona dipende dal CSS. Aggiungi il seguente blocco nel file style.css del tema child:

.icona-link-esterno {
display: inline-block;
margin-left: 0.25em;
font-size: 0.85em;
line-height: 1;
vertical-align: super;
text-decoration: none;
}

a[target="_blank"] {
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
}

Il carattere ↗ rappresenta un’apertura verso l’esterno e non richiede immagini aggiuntive o librerie grafiche. Puoi sostituirlo con un’icona proveniente dal sistema grafico del tema, mantenendo però aria-hidden="true" sull’elemento decorativo.

L’icona non dovrebbe essere l’unico segnale che indica un link esterno. Il testo aggiunto all’attributo aria-label, cioè “si apre in una nuova scheda”, comunica il comportamento anche agli utenti che navigano con uno screen reader. Se il link contiene soltanto un’immagine senza testo alternativo, è opportuno impostare prima un attributo alt descrittivo o un’adeguata etichetta accessibile.

Sicurezza, privacy e verifica del comportamento

L’attributo target="_blank" apre il collegamento in una nuova scheda, ma l’impostazione di sicurezza va esplicitata con rel="noopener". Questo attributo impedisce alla pagina aperta di usare window.opener per manipolare la scheda WordPress originale.

rel="noreferrer" aggiunge un livello di riservatezza perché impedisce l’invio dell’URL della pagina di provenienza nell’intestazione HTTP Referer. La scelta può influire sui dati di attribuzione del traffico nei servizi di analisi del sito: se il referrer è necessario per finalità tecniche o statistiche, puoi mantenere noopener e rimuovere noreferrer dal codice.

Dopo l’installazione, verifica almeno questi casi nel front-end:

  • Un collegamento verso una pagina dello stesso dominio non deve ricevere l’icona.
  • Un URL HTTPS diretto verso un dominio diverso deve aprirsi in una nuova scheda.
  • Un collegamento con mailto: deve restare escluso.
  • Un link che contiene già rel="nofollow" deve conservare nofollow, aggiungendo gli attributi di sicurezza.
  • Un link già elaborato non deve ricevere più icone o etichette duplicate.
  • La navigazione da tastiera deve mostrare chiaramente il focus sul collegamento.

Il codice agisce sui link presenti quando il DOM viene caricato. Collegamenti aggiunti successivamente da plugin tramite AJAX, filtri o componenti dinamici potrebbero non essere analizzati; in quel caso è necessario richiamare la funzione dopo l’inserimento oppure usare un MutationObserver progettato per quel componente specifico.

La soluzione è adatta a contenuti editoriali, menu personalizzati e blocchi Gutenberg renderizzati nella pagina. Non applica automaticamente la stessa logica ai link caricati dentro iframe, perché un iframe appartiene a un documento separato e può essere protetto da regole di origine diversa.

I link esterni WordPress JavaScript sicurezza funzionano correttamente quando riconoscimento, accessibilità e attributi rel vengono gestiti insieme.

Potrebbe interessarti anche:

FAQ

Sì, è consigliabile inserirlo esplicitamente anche se i browser moderni applicano spesso una protezione predefinita. noopener impedisce alla nuova scheda di accedere alla pagina di origine tramite window.opener.

Il CSS da solo non confronta in modo affidabile il dominio del link con quello della pagina corrente. JavaScript può eseguire questo confronto e applicare classe, icona, target e attributi rel.

Lo script confronta url.origin con window.location.origin. Un URL assoluto che appartiene allo stesso protocollo, dominio e porta del sito viene quindi considerato interno.

Sì, perché impedisce l’invio del referrer al sito esterno. Se hai bisogno di conservare l’informazione sulla provenienza, valuta l’uso di noopener senza noreferrer, secondo le esigenze di privacy e analisi del sito.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti