Using target="_blank" the right way ✅
Recently Working on my side project, I came across and curious fact of
target='_blank' attribute used in
What actually happens while you open a link in new window by specifying
The page we're linking to gains limited access to the linking page via the
The newly opened page can now change the window.opener.location to some phishing page. In this case, Users trust the page that is already opened, and in this case they won't get suspicious.
Lets try and undertsand it in depth 🔒
Create a fake "phishing" page with adorable cat pictures, which everyone likes ❤️, get it shared on Facebook (which will open a link via _blank).
Create a "phishing" website at https://phishingwebsite/facebook.com/service.html and put the below code on your "phishing" page.
which will redirect the Facebook tab to your phishing page created by the attacker, asking the user to re-enter their Facebook password, the user is not on Facebook anymore but this fake Facebook-lookalike web page. This fake page looks exactly like Facebook and it asks to login because you were signed out for some reason. The user without even thinking, enters the details.
What just happend??
You've just sent your private credentials to someone who can now login in your Facebook account and do anything, like quickly changing the credentials, posting random post.
Lets see how we can fix this 🔑
Add rel attribute with
noopener value to the
Some old browsers for example (IE11) do not support
"noopener" so add
noreferrer as a value to rel
Browsers support to
To conclude my post,
rel="noopener noreferrer" should be added to links containing
target="_blank" as a precaution against reverse tabnabbing.This ensures window.opener is null in both Chrome and Firefox.
In Safari Technology Preview 68,
target="_blank" on anchors implies
rel="noopener" by default.
Thank you for reading my thoughts on this issue. Subscribe to my newsletter for more of this.