Go to content
The Codest
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2021-04-28
Software Development

Web app security. Target="_blank" vulnerability

Lukasz Kolko

Web app security. Target="_blank" vulnerability - Image

Using web applications has become commonplace for every society. We deal with them every day. We can say that they surround us. We use them at work, for entertainment and as tools for communicating with others. Often, as users and as developers, we do not realize how many security vulnerabilities are discovered every day in such applications.

Recently, we have written about web application security when it comes to XSS vulnerability. This time we want to pay your attention to another danger.

The vulnerability discussed in this paper has been with us for a long time and due to its simplicity, it is often underestimated or even unknown by some web application developers.

Almost every web application contains links that, when clicked upon, open in a new tab so as not to close the tab with the original page. This is a preferred behavior because the creators want the user to spend as much time in the application as possible.

An attack that exploits this vulnerability is the so-called "reverse tabnabbing." It is an attack where a page linked from the target page is able to replace that page with, for example, a phishing site.

Attack scenario

  1. Suppose the victim uses Facebook which is known for opening links via target="_blank",
  2. Create a fake viral page,
  3. Create a phishing website that looks like Facebook sign-in page,
  4. Put the below code on the viral page e.g., via found XSS vulnerability window.opener.location = 'https://phishing-website/facebook.com';
  5. The victim clicks on the link on Facebook to the viral page,
  6. The viral page redirects the Facebook tab to the phishing website asking the user to sign in again.

So, we can change the parent tab from infected target page by window object from Web API. Typically, an attack involves using several discovered vulnerabilities and phishing scams in parallel.

The problem

When we open a new tab in the browser using a link with the target="_blank" attribute, we have access to our "referrer" from the new tab. More specifically, to the opener property of the Window object, which returns a reference to the window that opened it, our parent page.

This is due to the behavior of the Window.open() function. With access to this attribute, we can easily replace our parent page. Note that some modern browsers can make window.opener function in target tab as null to prevent this behavior.

Example code

<a href="https://github.com" target="_blank">Go to GitHub - infected link</a>
if (link)
  link[0].onclick = () => {
    if (window) window.opener.location = 'https://stackoverflow.com'
  }

Above you can see the infected link which originally opens a new tab with a GitHub page but meanwhile it changes our "parent" page to Stackoverflow site.

Live example

https://codesandbox.io/s/targetblank-vulnerability-r8uij

1. HTML links

Add rel="noopener noreferrer" to the <a> tag.

The rel attribute defines the relationship between a linked resource and the current document.

noopener tells the browser to navigate to the target without granting access to the parent that opened it. Target tab Window.opener will be null.

noreferrer prevents the browser, when navigating to target, to send to the parent the address or any other value as referrer via the referer HTTP header. Note that this HTTP header name is intentionally misspelled as "referrer."

2. JavaScript links

For the JavaScript Window.open function, you can add the values noopener and noreferrer in the windowFeatures parameter of the Window.open function but different browsers may respond differently so it is recommended to make Window.opener as null after using Window.open() function.

Read more:

Rails API & CORS. A dash of consciousness

Data fetching strategies in NextJS

7 Reasons Why Your Online Shop Needs Magento

If you find this article interesting, follow Lukasz on Github: https://github.com/twistezo

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

5 reasons why you will find qualified Ruby developers in Poland

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A Deeper Look at the Most Popular React Hooks

In the course of many interviews, I noticed that even experienced programmers have a problem with distinguishing Hooks, not to mention their more advanced capabilities. So, I will try to explain in this article how Hooks should...

Pawel Rybczynski

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

Tech company specializing in scaling tech teams for clients and partners thanks to top-class development engineers.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.