Using target=_blank The Malicious Way

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:

• Run the same process as your web page, running some JavaScript that might affect your page's performance.
• 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 attacker uses some JavaScript on the new page to change the location of the referring page to a phished page that looks exactly like the former web page through window.opener.location
• 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 .

The Solution

Okay, back to How can I prevent this? The solution for this is to use rel="noopener" or 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 Referrer from being sent to the header of the new page.

Safe Use

To be sure all is save, always use both the noopener and noreferrer values, as it was reported that some browsers does not support the noopener, but all browsers tend to support the noreferrer.

Example

<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!