How to open a url in a new TAB page

Let’s open a url in a new TAB on the site with the following HTML

<a href="https://malicious-domain.netlify.com" target="_blank">Visit malicious websites!</a>
Copy the code

Here we have an href attribute that points to the malicious site and targets it with a _blank attribute to open it in a new TAB.

The process seems so straightforward, what are the security risks that users might face here?

The user redirects from your page to the domain, at which point the browser appends all the window variable content of your current site to the window.opener variable of the malicious site. Malicious sites can now access your site’s window, which obviously opens a security hole when redirecting this method.

Once a malicious site accesses the window variable of your site via window.opener, it can redirect your previous site to a new phishing site that may be similar to the actual site you opened and may even ask you to log in again.

In the case of a malicious site, simply write the following code to accomplish the above modification

if (window.opener) {
  window.opener.location = 'https://www.dhilipkmr.dev';
}
Copy the code

Thus, innocent users fall into this trap and provide login details that could be exposed to an attacker.

How can we avoid this?

An easy way to do this is to add the rel attribute with noopener to the tag.

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">Visit malicious websites!</a>
Copy the code

What does it do?

Rel = “noopener” indicates that the browser should not append the window variable of the current site to a newly opened malicious site.

This makes the window.opener value of the malicious site null.

Therefore, be careful when navigating users to new domains that you don’t maintain.

It is not always possible to open a new TAB with a tag, in some cases you must open it by executing javascript window.open(), as shown below:

function openInNewTab() {
  // Some code
  window.open('https://malicious-domain.netlify.com');
}
Copy the code
<span class="link" onclick="openInNewTab()">Visit malicious websites!</span>
Copy the code

Noopener is not mentioned here, so this causes the window of the current site to be passed to a malicious site.

What should I do when I open a new TAB through JS?

function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }
Copy the code
<span class="link" onclick="openInNewTabWithoutOpener()">Visit malicious websites!</span>
Copy the code

We’ve already opened a virtual TAB with window.open() that opens about:blank, so that means it hasn’t been redirected to a malicious site.

We then change the opener value of the new tag to null.

We will change the url of the new label to the url of the malicious website.

This time, opener is empty again, so it can’t access the window variable of the first website.

Problem solved.

But this method won’t work in older versions of Safari, so we run into problems again.

How do I fix Safari?

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}
Copy the code
<span class="link" onclick="openInNewTabWithoutOpener()">Visit malicious websites!</span>
Copy the code

Here, we simulate clicking on the anchor tag.

  • We create<a>Mark and assign the desired attributes, and then execute on themclick()The behavior is the same as clicking a link.
  • Don’t forget to add to the tag hererelProperties.

Other facts:

  • When you click on the anchor tagCMD + LINKWhen Chrome, Firefox and Safari will turn malicious websiteswindow.openerAs anull.
  • However, on elements that are opened through JavaScript processing of the new TABCMD + LINKOn, the browser appends the window variable and sends it to the new TAB.
  • By default, the new version of Safari is removed in all caseswindow.openerTo pass window information to the new TAB, you must specify it explicitlyrel='opener'.

No one gets past your security.

Source: Dev.to, Author: Dhilip Kumar

This article is first published in the wechat public number “front-end foreign language selection”, attention is to send a gift package, you can save a lot of money!