π HTML tip π
You can force a user's browser to open a new tab when clicking on a link by adding target="_blank" to it.
But you should always add rel="noreferrer" to it!
The reason and an explanation in a short thread. β
You can force a user's browser to open a new tab when clicking on a link by adding target="_blank" to it.
But you should always add rel="noreferrer" to it!
The reason and an explanation in a short thread. β
When a new tab opens, the page loaded gets access to the window.opener attribute. If the site has malicious code in it, it can use the opener property to redirect your page to another malicious site that might harm the user.
1/7
1/7
Adding rel="noreferrer" prevents that the window.opener property is accessible for the site linked to and additionally skips sending a Referer HTTP header to that page with your website's URL.
2/7
2/7
-> Explanation of the actual hack
When your browser opens a new tab after a user clicks a link, the window.opener attribute is set.
This is not only a string with the url, it is actually the window object of the other tab!
3/7
When your browser opens a new tab after a user clicks a link, the window.opener attribute is set.
This is not only a string with the url, it is actually the window object of the other tab!
3/7
Now imagine the following:
A popular blog popularblog.tech/ultra-viral-arβ¦ links to other.page/additional-infβ¦.
So far so good, nothing bad here.
other.page, however, contains malicious code.
4/7
A popular blog popularblog.tech/ultra-viral-arβ¦ links to other.page/additional-infβ¦.
So far so good, nothing bad here.
other.page, however, contains malicious code.
4/7
This malicious code does the following:
window.opener.location = 'fake.site/popularblog.teβ¦'
This redirects the original tab to a new page!
This fake site is a perfect copy of the original blog.
5/7
window.opener.location = 'fake.site/popularblog.teβ¦'
This redirects the original tab to a new page!
This fake site is a perfect copy of the original blog.
5/7
You'd probably not even realize that your other tab loads a fully different website.
It could contain malicious ads or popups that try to bring users to download malware, buy questionable products, or whatever else there is one could do online to cause harm.
6/7
It could contain malicious ads or popups that try to bring users to download malware, buy questionable products, or whatever else there is one could do online to cause harm.
6/7
When your links are protected with a rel of either noopener or noreferer, window.opener isn't set and can't be used for this type of hack.
You immediately protect all your users from falling into a nasty trap.
7/7
You immediately protect all your users from falling into a nasty trap.
7/7
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
