DEV Community

Cover image for Secure way to open an external link in a new tab or window
Hardique Dasore
Hardique Dasore

Posted on • Edited on

Secure way to open an external link in a new tab or window

In order to open a link from your website, we need to use the anchor tag <a> in HTML.
Inside the anchor tag the URL is added to the href parameter.



<a href="https://www.google.com/" >Google</a>


Enter fullscreen mode Exit fullscreen mode

Now to open the link in a separate tab, we add target="_blank" but this makes the website vulnerable to phishing attacks.



<a href="https://www.google.com/"  target="_blank">Google</a>


Enter fullscreen mode Exit fullscreen mode

How to prevent phishing attacks?

Opening an external link in a new tab makes your website vulnerable. The site you link can gain access to the window containing your website and can change it to display different webpage. This is called phishing. In order to make your website secure from tabnabbing, we add rel="noopener noreferrer"



<a href="https://www.google.com/" rel="noopener noreferrer" target="_blank">Google</a>


Enter fullscreen mode Exit fullscreen mode

Happy Coding!

Image description

Follow us on Instagram

Top comments (0)