Opening links in a new window is dangerous

Did you know that something as "silly" as opening links in a new window can be dangerous? Bad actors can take advantage of this functionality to trick users into downloading malware or visiting malicious websites without their knowledge¹.

It is important that web developers avoid using, as far as possible, links with target=»_blank» on their websites. In fact, a golden rule in usability is that the user decides whether or not they want to open the links in new windows. (Just like a lot of other things shouldn't happen without the user deciding, ahem.)

rel=noopener in links prevents the page opened in a new window or tab from having access to the original page and protects the user from possible attacks

Okay, this is one of those things where you say “why does it exist then?”; Well okay, of course it can be useful to open links in new windows. And furthermore, we know that the vast majority of users have no idea how to open links in a new tab, not with the right click, nor with a wheel click, much less with a key combination.

Furthermore, in practice, you will find yourself in real cases where the client asks you to open the links to their articles in a new window or tab because they make external references, and they do not want their user to "leave" the post.

Ok, well, here's the trick: when you have no choice but to open a link to a target="_blank" because "yes to all" use the REL attribute, like this:

<a href="https://link.externo" target="_blank" rel="noopener">external link

By the way, for external links that are not relevant you can add more parameters to the REL attribute, such as nofollow and others.

TIP!: Until recently, I used new window and rel=»nofollow noopener» for the typical social media icon links, since there was some knowledge at that time that it was not recommended to index social profiles. Well, Google does not recommend doing this at all. and recommends that links to YOUR social profile on fb, twitter etc, contain "me" in the REL attribute such as:

<a href="https://facebook.com/adefesio" target="_blank" rel="noopener me">My FB profile

Interesting right?

Your code is very good, but how do I add REL or other attributes such as TITLE in the Gutenberg block editor to my text links, if the option does not appear?

Simply, in your editor, go to the paragraph that contains the link, and in the menu with the three dots on the far right, press "edit as HTML." The raw code will appear, simply add your rel=»» in the opening tag of the link as I show in my example (the order of the -href, target, rel attributes does not matter, just that they are separated by a space and well in quotes.)

Reverse tabnabbing!
(The trocola joint!)

The vulnerability of links with target blank is called "reverse tabnabbing". Explain this term to your client, you will see how many laughs. This occurs when a malicious website opens a new window and redirects it to a fake page that looks legitimate. If the user logs in on that fake page, the malicious website can steal their credentials¹.

To avoid this vulnerability, it is recommended to use the "rel=noopener" attribute on links that open in a new window. This prevents the opened page from accessing the original page and protects the user from possible attacks².

And here is our friend Bing, who leaves us the bibliography that he used to draft this post:

¹: Why doesn't when I open a link, it open in another tab?
³: How to use HTML to open a link in a new tab – 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) How to use HTML to open a link in a new tab – freeCodeCamp.org. https://www.freecodecamp.org/espanol/news/como-usar-html-para-abrir-un-link-en-un-tab-nuevo/ With access 6/26/2023.
(3) Open the pages in a new browser window – NorfiPC. https://norfipc.com/inf/javascript-abrir-nueva-ventana-navegador.html Accessed 6/26/2023.
(4) Open links in a new window: how and why not. https://apagayenciende.net/abrir-enlaces-en-una-ventana-nueva-como-y-por-que/ With access 6/26/2023.

¹: The target=»_blank» vulnerability and the rel=»noopener» solution – WordPress Help
²: What is rel="noopener" in WordPress? (With explanation)

Origin: Conversation with Bing, 6/26/2023(1) The target=»_blank» vulnerability and the rel=»noopener solution…. https://bing.com/search?q=vulnerability+attribute+rel+noopener Accessed 6/26/2023.
(2) What is rel="noopener" in WordPress? (With explanation). https://programmerclick.com/article/39001341950/ Accessed 6/26/2023.
(3) What is Rel = “Noopener” and how to use it with WordPress? https://www.recursoswp.com/que-es-rel-noopener-y-como-usarlo-con-wordpress/ With access 6/26/2023.
(4) The target=»_blank» vulnerability and the rel=»noopener solution…. https://ayudawp.com/la-vulneribilidad-target_blank-la-solucion-relnoopener-noreferrer-wordpress/ Accessed 6/26/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.