Las pestañas son geniales, ¿no? Nos permiten balancear multitareas en un conjunto de tareas online al mismo tiempo.

Las pestañas son tan comunes ahora, que cuando  das clic a un link, normalmente se abren en una pestaña nueva.

Si alguna vez te preguntaste como hacer eso con tus propios links, has venido al sitio correcto.

El Elemento Anchor

Para crear un link en la página web, necesitas  envolver un elemento(texto, imagen y así) en un elemento anchor (<a>)  y poner en él el atributo href en el URL que quieras link a él.

<p>Dale un vistazo <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Mira esto freeCodeCamp.

Si tú das clic en el link arriba, el buscador  abrirá un link en la actual ventana o tab.

Para abrir un  link en una nueva pestaña, necesitamos mirar algunos otros atributos del elemento anchor.

El Atributo Target

Este atributo le dice al buscador como abrir el link.

Para abrir el link en una nueva pestaña, solo pones atributo target en _blank:

<p>Dale un vistazo <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Ahora cuando alguien hace clic en un link, este lo abrirá en una nueva pestaña, o con la posibilidad de una nueva ventana dependiendo de la configuración del buscador de la persona.

La seguridad concierne con target="_blank"

Recomiendo fuertemente que siempre añadas rel="noreferrer noopener" al elemento anchor siempre y cuando que uses el atributo target :

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

Este es el resultado del siguiente output:

                          Dale un vistazo a freeCodeCamp.

El atributo rel coloca la relación entre tu página y el URL enlazado.  Posicionando en este noopener noreferrer para prevenir el tipo de phishing conocido como tabnabbing.

¿Qué es tabnabbing?

Tabnabbing, algunas veces llamado reverse tabnabbing, es un exploit que usa el comportamiento por defecto del navegador con target="_blank" para ganar acceso parcial a tu página a través window.object API.

Con tabnabbing, una página que tu link puede causar que tu página desvíe a una página falsa de login. Esto puede ser difícil de notar para la mayoría de usuarios porque la atención debería estar en la pestaña que acaba de abrirse- y no en la pestaña original de la página.

Entonces cuando la persona cambie de vuelta a la pestaña con tu página, este verá una página falsa de login en su lugar, y puede que entre sus datos de login.

Si estás interesado en aprender más de como tabnabbing trabaja y que pueden hacer estos malos actores con este exploit, checa el artículo de Alex Yumashev's y este otro por OWASP.

Si quieres  ver un ejemplo seguro de como trabaja, checa esta página y su GitHub repo para más información sobre el exploit y el  atributo rel .

En resumen

Es fácil usar HTML para abrir un link en una nueva pestaña. Solo necesitas un elemento anchor (<a>) con tres importantes atributos:

  1. El atributohref pone el URL de la página que quieres link a él.
  2. El atributo target  pone en _blank, que dice al navegador que abra el link en nueva tab o ventana, dependiendo de la configuración del navegador.
  3. El atributorel pone a noreferrer noopener para prevenir posibles ataques maliciosos de las páginas que tú enlaces.

De nuevo aquí hay un ejemplo de como trabaja en HTML:

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

Tales resultados se muestran en el buscador:

Dale un vistazo a freeCodeCamp.

Gracias otra vez por leer. ¡Feliz día programando!

Traducido del artículo: How to Use HTML to Open a Link in a New Tab por Kris Koishigawa.