Why we should add refs when linking to other websites

Links are one of the important things of the Internet. So cool that the World Wide Web would not be the World Wide WEB without them. So as part of your Homepage you want your visitors to also take a look at your Twitter profile. To do so you add a link.

<a href="https://twitter.com/jansauer" target="_blank">

When a visitor clicks on it a new window/tab is opened and the twitter profile is loaded. Different window, different domain how could this have any security implications? Introducing Window.opener. A way for websites to interact with the page that opened them and so old that it is implemented in all browsers.

This allows a malicious site to modify the window location of the site it was opened by and results in some dangerous attacks. Imagine a Shopping site that links to an external product review. The user clicks on it and reads the review in a new window. What he does not know is that the review site is compromised and changes the original shop site to a fake shop. The user does not see the page change and when he goes back to the shop window everything looks the same and he does not notice the changed url. As a result he tries to buy something and sends his payment details to an attacker.

To combat this add rel="noopener" or rel="noreferrer" to your target="_blank" links. Browser will then leave parts of the opener Object null. Also in newer browser versions this is done for target="_blank" links by default

• https://web.dev/external-anchors-use-rel-noopener