Come utilizzare HTML per aprire un collegamento in una nuova scheda

Le schede sono fantastiche, vero? Consentono al multitasker in ognuno di noi di destreggiarsi tra una serie di attività online contemporaneamente.

Le schede sono così comuni ora che, quando fai clic su un collegamento, è 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 di ancoraggio

Per creare un collegamento in una pagina Web, è necessario racchiudere un elemento (testo, un'immagine e così via) in un elemento anchor ( ) e impostare il suo hrefattributo sull'URL a cui si desidera collegarsi.

Check out freeCodeCamp.

Dai un'occhiata a freeCodeCamp.

Se fai clic sul collegamento sopra, il browser aprirà il collegamento nella finestra o scheda corrente. Questo è il comportamento predefinito in ogni browser.

Per aprire un collegamento in una nuova scheda, avremo bisogno di esaminare alcuni degli altri attributi degli altri attributi dell'elemento di ancoraggio.

L'attributo di destinazione

Questo attributo indica al browser come aprire il collegamento.

Per aprire un collegamento in una nuova scheda, è sufficiente impostare l' targetattributo su _blank:

Check out freeCodeCamp.

Ora, quando qualcuno fa clic sul collegamento, si aprirà in una nuova scheda, o forse in una nuova finestra a seconda delle impostazioni del browser della persona.

Problemi di sicurezza con target="_blank"

Consiglio vivamente di aggiungere sempre rel="noreferrer noopener"all'elemento di ancoraggio ogni volta che utilizzi l' targetattributo:

Check out freeCodeCamp.

Ciò si traduce nel seguente output:

Dai un'occhiata a freeCodeCamp.

L' relattributo imposta la relazione tra la tua pagina e l'URL collegato. Impostarlo su noopener noreferrerserve a prevenire un tipo di phishing noto come tabnabbing.

Cos'è il tabnabbing?

Tabnabbing, a volte chiamato tabnabbing inverso, è un exploit che utilizza il comportamento predefinito del browser con target="_blank"per ottenere un accesso parziale alla tua pagina tramite l' window.objectAPI.

Con il tabnabbing, una pagina a cui ti colleghi potrebbe causare il reindirizzamento della tua pagina a una pagina di accesso falsa. Questo sarebbe difficile da notare per la maggior parte degli utenti perché il focus sarebbe sulla scheda che si è appena aperta, non sulla scheda originale con la tua pagina.

Quindi, quando una persona torna alla scheda con la tua pagina, vedrebbe invece la pagina di accesso falsa e potrebbe inserire i propri dettagli di accesso.

Se sei interessato a saperne di più su come funziona il tabnabbing e su cosa possono fare i cattivi attori con l'exploit, dai un'occhiata all'articolo di Alex Yumashev e questo di OWASP.

Se desideri vedere una cassaforteesempio funzionante, controlla questa pagina e il suo repository GitHub per ulteriori informazioni sull'exploit e sull'attributo rel.

In sintesi

È facile usare l'HTML per aprire un collegamento in una nuova scheda. Hai solo bisogno di un elemento anchor ( ) con tre attributi importanti:

  1. L' hrefattributo impostato sull'URL della pagina a cui desideri collegarti
  2. L' targetattributo impostato su _blank, che indica al browser di aprire il collegamento in una nuova scheda / finestra, a seconda delle impostazioni del browser
  3. L' relattributo impostato su noreferrer noopenerper prevenire possibili attacchi dannosi dalle pagine a cui ti colleghi

Di nuovo, ecco l'esempio di lavoro HTML:

Check out freeCodeCamp.

Che si traduce nel seguente output nel browser:

Dai un'occhiata a freeCodeCamp.

Grazie ancora per la lettura. Buona codifica.