Protected external links

What are external links ?

Links are HTML elements materialized by the <a> tag. They are placed in a page and allow users, by clicking on them, to access another page. We talk about external links when they lead the user to another site. It is possible to define the behavior of a link on the browser with the attribute "target". When it is not set, the page opens on the current tab and replaces the current page. When defined with the value "_blank", it opens a new tab on the browser and leaves the current page accessible.

Example of an external link opening on a new tab :

<a href="" target="_blank">Cocolyze</a>

Why do they need to be protected ?

External links opening on a new tab expose sensitive code from the current page to the destination page. If the destination is malicious, it may maliciously redirect the current page to another destination. Similarly, the destination page may be running on the same process as the current page, and if a lot of JavaScript code is executed, the current page may be slowed down.

How to protect them

In order to secure external links, it is necessary to add the attribute "rel", on all links <a>, specifying the value "noopener" or "noreferrer" when they open on a new tab.

Example of a protected external link :

<a href="" target="_blank" rel="noopener">Cocolyze</a>