Sabíais que algo tan «tonto» como abrir enlaces en una nueva ventana puede ser peligroso? Los malos pueden aprovecharse de esta funcionalidad para engañar a los usuarios y hacerles descargar malware o visitar sitios web maliciosos sin su conocimiento¹.
Es importante que los desarrolladores web eviten utilizar en la medida de lo posible, enlaces con target=»_blank» en sus sitios web. De hecho, una regla de oro en usabilidad es, que el usuario decida si quiere o no abrir los enlaces en ventanas nuevas. (Del mismo modo que no deberían suceder muchísimas otras cosas sin que el usuario lo decida, ejem).
rel=noopener en los enlaces evita que la página abierta en nueva ventana o pestaña tenga acceso a la página original y protege al usuario de posibles ataques
Vale, esta es una de estas cosas que dices «¿pues para qué existe entonces?»; bueno vale, pues claro que puede ser útil abrir enlaces en ventanas nuevas. Y además, sabemos que la gran mayoría de usuarios no tienen ni idea de cómo abrir enlaces en una nueva pestaña, no con botón derecho, ni con clic de rueda ni mucho menos con combinación de tecla.
Además, en la práctica, te encontrarás en casos reales de que el cliente te pide que se abran los enlaces de sus artículos en ventana o pestaña nueva porque hacen referencias externas, y no quieren que su usuario se «vaya» del post.
Vaaale, pues, aquí te dejo el truco: cuando no tengas más remedio que abrir un link a un target=»_blank» porque «yes to all» usa el atributo REL, tal que así:
<a href="https://link.externo" target="_blank" rel="noopener">Link exerno</a>Por cierto, para enlaces externos que no sean relevantes puedes añadir más parámetros al atributo REL, como nofollow y otros más.
TIP!: Hasta hace poco, yo usaba ventana nueva y rel=»nofollow noopener» para los típicos enlaces de los iconos de las redes sociales, ya que existía cierto conocimiento por aquel entonces de que no era recomendado indexar los perfiles sociales. Pues Google, no recomienda para nada hacer esto y recomienda que los enlaces a TU perfil social en fb, twitter etc, contengan «me» en el atributo REL tal como:
<a href="https://facebook.com/adefesio" target="_blank" rel="noopener me">Mi perfil de FB</a>Interesante ¿verdad?
Tu código está muy bien ¿pero como hago para añadir REL u otros atributos como TITLE en el editor de bloques Gutenberg a mis enlaces de texto, si no me aparece la opción?
Simplemente, en tu editor, colócate en el párrafo que contiene el enlace, y en el menú de los tres puntitos del extremo derecho, pulsa «editar como HTML». Te aparecerá el código en bruto, simplemente añade tu rel=»» en la etiqueta de apertura del enlace tal como muestro en mi ejemplo (el orden de los atributos -href, target, rel, no importa, sólo que estén separados por un espacio y bien entrecomillados.)
Reverse tabnabbing!
(La junta de la trócola!)
La vulnerabilidad de los enlaces con target blank se llama «reverse tabnabbing». Éxplicale este término a tu cliente, ya verás que risas. Esto ocurre cuando un sitio web malicioso abre una nueva ventana y la redirige a una página falsa que parece legítima. Si el usuario inicia sesión en esa página falsa, el sitio web malicioso puede robar sus credenciales¹.
Para evitar esta vulnerabilidad, se recomienda utilizar el atributo «rel=noopener» en los enlaces que abren en una nueva ventana. Esto evita que la página abierta tenga acceso a la página original y protege al usuario de posibles ataques².
Y aquí el amigo Bing, que nos deja la bibliografía que ha usado para confeccionar el borrador de de este post:
¹: Por qué no al abrir un enlace, este se abra en otra pestaña?
³: Como usar HTML para abrir un link en un tab nuevo – freeCodeCamp.org
Origen: Conversación con Bing, 26/6/2023(1) ¿Por qué no al abrir un enlace, este se abra en otra pestaña?. https://es.meta.stackoverflow.com/questions/4333/por-qu%c3%a9-no-al-abrir-un-enlace-este-se-abra-en-otra-pesta%c3%b1a Con acceso 26/6/2023.
(2) Como usar HTML para abrir un link en un tab nuevo – freeCodeCamp.org. https://www.freecodecamp.org/espanol/news/como-usar-html-para-abrir-un-link-en-un-tab-nuevo/ Con acceso 26/6/2023.
(3) Abrir las páginas en una nueva ventana del navegador – NorfiPC. https://norfipc.com/inf/javascript-abrir-nueva-ventana-navegador.html Con acceso 26/6/2023.
(4) Abrir enlaces en una ventana nueva: cómo y por qué no. https://apagayenciende.net/abrir-enlaces-en-una-ventana-nueva-como-y-por-que/ Con acceso 26/6/2023.
¹: La vulnerabilidad target=»_blank» y la solución rel=»noopener» – Ayuda WordPress
²: ¿Qué es rel = «noopener» en WordPress? (Con explicación)
Origen: Conversación con Bing, 26/6/2023(1) La vulnerabilidad target=»_blank» y la solución rel=»noopener …. https://bing.com/search?q=vulnerabilidad+atributo+rel+noopener Con acceso 26/6/2023.
(2) ¿Qué es rel = «noopener» en WordPress? (Con explicación). https://programmerclick.com/article/39001341950/ Con acceso 26/6/2023.
(3) ¿Qué es Rel = «Noopener» y cómo usarlo con WordPress?. https://www.recursoswp.com/que-es-rel-noopener-y-como-usarlo-con-wordpress/ Con acceso 26/6/2023.
(4) La vulnerabilidad target=»_blank» y la solución rel=»noopener …. https://ayudawp.com/la-vulnerabilidad-target_blank-la-solucion-relnoopener-noreferrer-wordpress/ Con acceso 26/6/2023.
(5) Uso del atributo rel en los enlaces de un sitio o aplicación web. https://es.stackoverflow.com/questions/322294/uso-del-atributo-rel-en-los-enlaces-de-un-sitio-o-aplicaci%C3%B3n-web Con acceso 26/6/2023.
Deja una respuesta