Articolo originale: How to Use HTML to Open a Link in a New Tab

Le schede del browser sono fantastiche, non è vero? Permettono al multitasker in tutti noi di fare un sacco di cose diverse online allo stesso tempo.

Le schede sono così comuni che ora, quando clicchi su un link, è probabile che si apra in una nuova scheda.

Se ti sei mai chiesto come farlo con i tuoi link, sei nel posto giusto.

L'elemento ancora

Per crare un link in una pagina web, devi avvolgere un elemento (testo, un'immagine, e così via) in un elemento ancora (<a>) e impostare il suo attributo href all'URL a cui vuoi che linki.

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Check out freeCodeCamp.

Se clicchi il link qua dopra, il browser aprirà il link nella finestra o scheda corrente. Questo è il comportamento di default in ogni browser.

Per aprire il link in una nuova scheda, dovremo vedere altri attributi dell'elemento ancora.

L'attributo Target

Questo attributo dice al browser come aprire il link.

Per aprire il link in una nuova pagina, dai all'attributo target il valore _blank:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Ora quando qualcuno clicca sul link, si pare in una nuova scheda, oppure in una nuova finestra a seconda delle impostazioni del browser della persona.

Problemi di sicurezza con target="_blank"

Consiglio fortemente di aggiungere sempre rel="noreferrer noopener" all'elemento ancora quando usi l'attributo target:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Questo risulta nel seguente output:

Check out freeCodeCamp.

L'attributo rel setta la relazione tra la tua pagina e l'URL linkato. Il valore noopener noreferrer previene un tipo di phishing noto come tabnabbing.

Cosa è tabnabbing?

Tabnabbing, a volte chiamato reverse tabnabbing, è un exploit che usa il comportamento di defult del browser con target="_blank" per ottenere parziale accesso alla tua finestra attraverso l'API window.object.

Con tabnabbing, una pagina a cui linki potrebbe causare il reindirizzamento a una falsa pagina di login. Questo è difficile da notare per la maggior parte degli utenti perché il focus è sulla nuova scheda ceh si è aperta, e non sulla scheda originale con la tua pagina.

Quindi quando una persona torna alla scheda con la tua pagina, vedeono invece la falsa pagina di login e potrebbero inserire i loro dati per il login.

Se vuoi imparare di più su come funziona tabnabbing e cosa malintenzionati potrebbero fare con questo exploit, leggi l'articolo di Alex Yumashev e quest'altro di OWASP.

Se vuoi vedere un esempio sicuro in funzione, guarda questa pagina e il suo repo su GitHub per maggiori informazioni su questo exploit e l'attributo rel.

In breve

È facile usaare HTML per aprire un link in una nuova pagina. Hai solo bisogno dell'elemento ancora (<a>) con tre attributi importanti:

  1. L'attributo href cobn valore dell'URL della pagina a cui vuoi linkare
  2. L'attributo target con valore di _blank, che dice al browser di aprire il link in una nuova scheda/finestra, a seconda delle impostazioni del browser
  3. L'attributo rel con valore di noreferrer noopener per prevenire possibiliattacchi malintenzionati dalle pagine a cui stai linkando

Di nuovo, ecco un esempio completo funzionante:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Il quale risulta nel seguente output nel browser:

Check out freeCodeCamp.

Grazie di nuovo per leggere. Happy coding.