Window.open() and target=”_blank” have a security vulnerability

We often use the HTML target="_blank" or the Javascript window.open() to open pages in new tabs.

// in html
<a href="www.google.com" target="_blank">open google</a>
// in javascript
window.open("www.google.com")

But when the newly opened pages are pointing to a site that we don't know we are opened to a phishing vulnerability. The new page gains some partial access to the linking page with the window.opener object.

For example, it can use the window.opener.location to point the user of the initial page to a fake phishing site that mimics the looks of the original and do all kinds of nasty stuff. This can be very efficient given that the user trusts the page that is already opened.

In order to prevent this we can:

  1. in HTML use the rel="noopener" with target="_blank"
<a href="someLink.com" target="_blank" rel="noopener noreferrer">
    open securely in a new tab
</a>
  1. in Javascript be sure to reset the "opener" property
const newWindow = window.open("someLink.com");
newWindow.opener = null;

later edit: it seems that noreferrer is now redundant, so noopener should be enough for the HTML use.
later edit 2: we also have access to the windowFeatures parameter for the Window.open(), so we can do:

window.open('https://www.your.url','_blank','noopener')

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X