HTML Links are the tool that connects your web pages together, and makes it a website. We will be discussing how this great tool can be maliciously used against your website (and maybe your dearly users). This is what many web designers/developers are not aware of.
Fun Fact: A website is a collection of web pages, that are linked together with URLs and hosted to the server. Links as the name implies links your web pages together, what that also mean is that without web page links there's no web site! We just have chunks of web pages, hugh!
That Malicious Story
Anyways, website is not the topic for today but web page links is. When you use a
target="_blank" on your
<a> (or whatever) link, the browser will be informed about the old page or the referring page, that sounds okay right??? No! Wait one more thing, the browser can also control the referring page! This is where the problem comes, the browser also provides a
window.opener object which allows you to partially interact with the referring page. This exposes the website to controls like:
- Partially control your web page (the page from which a user opened another page). By redirecting it to a malicious URL.
That's Horrible Hugh!
I know at this time, your possible question would be how then can I avoid this, it's simple! The rel attribute came to rescue! How??? Yes, of course we are going to talk about that but before then, let's talk about a more step-by-step case of how an attacker can abuse your links.
Some Use Cases
- You directed a user to an external web page
- The user comes back only to see the same page because there's no significant different from it and the new phished page.
User continues interaction === attacker gains access.
Okay, back to How can I prevent this? The solution for this is to use
rel="noreferrer" on your
<a href ... tags, this blocks the browser from carrying your precious information over to a stranger website.
- rel="noopener", tells the browser not to give information about your website
- rel="noreferrer" I am like my brother, but I also block the HTTP
Referrerfrom being sent to the header of the new page.
To be sure all is save, always use both the
noreferrer values, as it was reported that some browsers does not support the
noopener, but all browsers tend to support the
<a rel="noopener noreferrer" href="https://lyty.dev/html/html-link.html" target="_blank">HTML Links</a>
A preview of how this works can be seen on the link in the first paragraph of this page. Feel free to inspect it on your browser to confirm the actions.
Good As Go!
Top comments (6)
I just learned about this the other day through Chrome DevTools. I did NOT know that it's best to use both
noreferrer. Thanks for the info!
Yeah sure, for some browsers that does not support the
<a rel="noopener noreferrer">and
<iframe sandbox>. What are some others?
Also, are there HTML security linting tools?
Sure we have security linting tools, browser extensions are out there.
A while ago, I read about this