DEV Community

CHIN SHAN LEE
CHIN SHAN LEE

Posted on • Updated on

[HTML] open a link in new tab safely

refer to : https://mathiasbynens.github.io/rel-noopener/

Browsers now are implicitly set rel=noopener for any target=_blank link.But to prevent user using older version browser, how can we ensure they are open a new tab from our site safely ?

Just Simply add rel="noopener noreferrer"

<a                              
   href="https://google.com/"
   //our target is opening the link with tab
   target="_blank"
   //prevent pages from abusing window.opener
   rel="noopener noreferrer"
>
   Target-Page
</a>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
mornir profile image
Jérôme Pott

Nice short reminder. 🙂

I personally don't support older browsers, so I no longer use the rel attribute on external links. I mean older browsers don't receive security updates anymore! And here we're talking about preventing the tabnagging attack, which I wouldn't worry about unless I have user accounts and accept money on my website.
Also it's supposed that the linked website was hacked. (I know it's only an example, but I wouldn't worry about tabnagging attacks from google.com 😉)

Beware also that noreferrer will mess with analytics data.

For people wanting to learn about noopener, noreferrer and no follow: dev.to/mornir/noopener-noreferrer-...