DEV Community

Erisan Olasheni
Erisan Olasheni

Posted on • Updated on

Using target=_blank The Malicious Way

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


<a rel="noopener noreferrer" href="" 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)

coryrunn profile image

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!

olasheni profile image
Erisan Olasheni • Edited

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

patarapolw profile image
Pacharapol Withayasakpunt

<a rel="noopener noreferrer"> and <iframe sandbox>. What are some others?

Also, are there HTML security linting tools?

olasheni profile image
Erisan Olasheni

Sure we have security linting tools, browser extensions are out there.

codetheorem2 profile image
Hrishikesh Agarwal

Nice insight.

mvdev profile image
Mondher Vallejo

A while ago, I read about this