Las pestañas son geniales, ¿no? Permiten que el multitarea en todos nosotros haga malabarismos con un montón de tareas en línea al mismo tiempo.
Las pestañas son tan comunes ahora que, cuando haces clic en un enlace, es probable que se abra en una nueva pestaña.
Si alguna vez se ha preguntado cómo hacerlo con sus propios enlaces, ha venido al lugar correcto.
El elemento ancla
Para crear un enlace en una página web, debe envolver un elemento (texto, una imagen, etc.) en un elemento anchor ( ) y establecer su hrefatributo en la URL a la que desea enlazar.
Check out freeCodeCamp.
Echa un vistazo a freeCodeCamp.
Si hace clic en el enlace de arriba, el navegador abrirá el enlace en la ventana o pestaña actual. Este es el comportamiento predeterminado en todos los navegadores.
Para abrir un enlace en una nueva pestaña, necesitaremos ver algunos de los otros atributos de los otros atributos del elemento de anclaje.
El atributo objetivo
Este atributo le dice al navegador cómo abrir el enlace.
Para abrir un enlace en una pestaña nueva, simplemente establezca el targetatributo en _blank:
Check out freeCodeCamp.
Ahora, cuando alguien haga clic en el enlace, se abrirá en una nueva pestaña, o posiblemente en una nueva ventana, según la configuración del navegador de la persona.
Preocupaciones de seguridad con target="_blank"
Recomiendo encarecidamente que siempre agregue rel="noreferrer noopener"al elemento de anclaje cada vez que use el targetatributo:
Check out freeCodeCamp.
Esto da como resultado la siguiente salida:
Echa un vistazo a freeCodeCamp.
El relatributo establece la relación entre su página y la URL vinculada. Configurarlo noopener noreferreres para prevenir un tipo de phishing conocido como tabnabbing.
¿Qué es tabnabbing?
Tabnabbing, a veces llamado tabnabbing inverso, es un exploit que utiliza el comportamiento predeterminado del navegador target="_blank"para obtener acceso parcial a su página a través de la window.objectAPI.
Con tabnabbing, una página a la que enlaza podría hacer que su página se redirija a una página de inicio de sesión falsa. Esto sería difícil de notar para la mayoría de los usuarios porque el enfoque estaría en la pestaña que se acaba de abrir, no en la pestaña original con su página.
Luego, cuando una persona vuelve a la pestaña con su página, verá la página de inicio de sesión falsa y podría ingresar sus datos de inicio de sesión.
Si está interesado en aprender más sobre cómo funciona el tabnabbing y qué pueden hacer los malos actores con el exploit, consulte el artículo de Alex Yumashev y este de OWASP.
Si quieres ver una caja fuerteejemplo de trabajo, consulte esta página y su repositorio de GitHub para obtener más información sobre el exploit y el relatributo.
En resumen
Es fácil usar HTML para abrir un enlace en una nueva pestaña. Solo necesita un elemento anchor ( ) con tres atributos importantes:
- El
hrefatributo establecido en la URL de la página a la que desea vincular - El
targetatributo establecido en_blank, que le dice al navegador que abra el enlace en una nueva pestaña / ventana, según la configuración del navegador. - El
relatributo establecido ennoreferrer noopenerpara evitar posibles ataques maliciosos desde las páginas a las que enlaza
Nuevamente, aquí está el HTML de ejemplo funcional:
Check out freeCodeCamp.
Lo que da como resultado la siguiente salida en el navegador:
Echa un vistazo a freeCodeCamp.
Gracias de nuevo por leer. Codificación feliz.