loading...

Using target=_blank The Malicious Way

olasheni profile image Erisan Olasheni Updated on ・3 min read

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

Posted on May 13 by:

olasheni profile

Erisan Olasheni

@olasheni

A web developer and a programmer.

Discussion

markdown guide
 

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

 

I just learned about this the other day through Chrome DevTools. I did NOT know that it's best to use both noopener and noreferrer. Thanks for the info!

 

Yeah sure, for some browsers that does not support the noopener value.