blog.bolajiayodeji.com Open in urlscan Pro
76.76.21.21  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Follow






Follow



THE SECURITY VULNERABILITIES OF THE TARGET="_BLANK" ATTRIBUTE


Bolaji Ayodeji
·May 12, 2020·

3 min read

+33

Play this article
Your browser does not support the audio element.SPEED1X

The HTML hyperlink tag allows you to create an element that can be clicked on to
reference another document or section on a web page. Hyperlinks are defined with
the HTML <a> tag like so:

Copy
Copy

<a href="/about">About Page"></a>



PERMALINKHTML TARGET ATTRIBUTE

While the href attribute specifies the destination address of the link, another
common attribute is target which is used to specify where to open the
destination address of the link. You can either open the link in:

 * _self - This would open the link in the same window or tab as it was clicked
   (PS: This is the default for all links)
 * _blank - This would open the link in a new window or tab
 * _parent - This would open the link in the next level parent frame. If there
   is no parent, it behaves like _self
 * _top - This would open the link in the topmost frame of the window. If there
   is no top frame, it behaves like _self

Most often, you'll find yourself only using the _blank target attribute than
others since the frame, and frameset tags are obsolete in HTML5.




PERMALINKTHE VULNERABILITIES

Every new window has the opener API, and when you click on an external link with
target="blank, the new tab has a window.opener which points to the parent window
and can run on the same process as the parent (unless site isolation is
enabled). So when a user clicks the external link, the new page opened has
control over the parent document's window object.

Since the new page can access the parent window object with the window.opener
property, it can redirect the external page to a malicious URL, which makes your
site or users vulnerable and exposed to data theft or other phishing attacks
(and since users trust your website already, they can easily be a victim).

Copy
Copy

window.opener.location = newURL


> Phishing is the fraudulent attempt to obtain sensitive information such as
> usernames, passwords and credit card details by disguising oneself as a
> trustworthy entity in an electronic communication. ~Wikipedia


PERMALINKTHE SOLUTION

When using the target blank attribute, please ensure to add rel="noopener
noreferrer" attribute to avoid exploitation of the window.opener API available
on every page.

Adding the rel="noopener noreferrer" attribute on the parent <a> element will
allow the new window run in a separate process and prevent the window.opener
reference from being set, which means the property will equal null.

Copy
Copy

var newWindow = window.open();
newWindow.opener = null;
newWindow.location = url;


When a user moves from URL A to URL B, URL B still receives information (like
traffic data) about the previous web location (URL A) even though it's owned by
a different user. Adding the rel="noreferrer" attribute on the parent would
prevent sending request "referrer" header information between both locations.

 * rel="noopener" protects a new window to be accessed by the window.opener
   property from an external window and make sure it runs in a separate process.
 * rel="noreferrer" is similar to noopener, except that it also prevents the
   destination window from seeing the referred URL.

Copy
Copy

<a href="https://hashnode.com/devblog" target="_blank" rel="noopener noreferrer">
  Create your Devblog today
</a>


By adding the rel="noopener" or rel="noreferrer" attribute to an external link,
it will prevent a new tab from taking advantage of the JavaScript window.opener
property which therefore improves the security and performance of your site
(since the new window is running on a separate process, any script on it won't
affect the referring or parent window).


PERMALINKBROWSER SUPPORT






120

19



HTML5a11yAccessibilitySecurityWeb Development


WRITTEN BY


BOLAJI AYODEJI

undefined.

undefined.

Follow

Article Series


WEB ENGINEERING

1


HOW TO CREATE AN AUTOMATED PROFILE README USING NODEJS AND GITHUB ACTIONS

Some years ago, GitHub introduced the new Profile README feature that allowed
GitHub users to pin a …


2


HOW TO SETUP GOOGLE ANALYTICS 4 IN A NEXT.JS PROJECT

Google Analytics is a web analytics service that tracks and reports several
types of website traffic…



Show all 20 posts
4


THE SECURITY VULNERABILITIES OF THE TARGET="_BLANK" ATTRIBUTE

The HTML hyperlink tag allows you to create an element that can be clicked on to
reference another d…


5


TIL: CSS LIST-STYLE-POSITION PROPERTY

The HTML list tag allows you to list ordered and unordered items. One major UI
problem I had with li…


6


IMAGE OPTIMIZATION AND TRANSFORMATION WITH CLOUDINARY

The web is now dominated with more visual content than ever hence the need to
consider ways of deliv…


7


TOP 15 RECOMMENDED TOOLS FOR REACT DEVELOPERS

As a software developer, the tools you use daily actually surpass the original
languages you write c…


8


ACCESSIBILITY AUDITING WITH AXE FOR AUTOMATED WEB UI TESTING

Accessibility has become a widely known and sort-for topic, with many developers
and organizations a…


9


HOW TO DEPLOY A NODE APPLICATION AND DATABASE TO HEROKU

Heroku is a cloud-based, fully-managed platform as a service (Paas) for
building, running, and manag…


10


HANDLING STATIC FORMS, THE CLIENT-SIDE WAY

Forms are interactive elements used to get input from the user for further
processing. Most times, f…


11


INTRODUCING JAMSTACK: THE ARCHITECTURE OF THE MODERN WEB

I’m sure you’ve come across the word JAMstack before, but you might not have
understood what it real…


12


THE DIFFERENCES BETWEEN OBJECT.FREEZE() VS CONST IN JAVASCRIPT

ES6 has brought several new features and methods into JavaScript since its
release. These features h…


13


INTRODUCTION TO WEB ACCESSIBILITY

As developers, it’s easy to assume that all users can see and use a keyboard,
mouse or screen, you f…


14


BUILDING & DEPLOYING YOUR FIRST PROGRESSIVE WEB APP

Progressive Web Apps are very much in use by some of the biggest companies like
Twitter, Forbes, Ali…


15


INTRODUCING CSS CUSTOM PROPERTIES (VARIABLES)

In the past years, maintaining CSS was a very big problem for bigger projects or
complex apps as a r…


16


GETTING STARTED WITH HUGO AND DEPLOYING TO NETLIFY

Hugo is a fast and modern static site generator written in Go and designed to
make website creation …


17


ITERATING THROUGH JAVASCRIPT OBJECTS  -  5 TECHNIQUES AND PERFORMANCE TESTS

Developers tend to know how to iterate through JavaScript Arrays easily but most
times they tend to …


18


INTRODUCTION TO BABEL AND JAVASCRIPT BUNDLERS

As earlier stated in my previous article ES6 modules is a very powerful concept.
Although support is…


19


INTRODUCTION TO ES6 MODULES

An essential aspect of software engineering is efficiency. Every successful app
needs a solid archit…


20


MANIPULATING ARRAYS IN JAVASCRIPT

Arrays have become an important part of any programming language. In this
article, I would show you…


21


INTRODUCTION TO CHROME LIGHTHOUSE

Chrome Lighthouse has been around for a while now, but what if I ask you to
explain what it does can…


22


INTRODUCTION TO JAVASCRIPT SWITCH CASES

In this short article, I will introduce you to JavaScript switch cases and how
to use them with prac…


23


HOW TO REDIRECT HTTP TO HTTPS USING .HTACCESS

Chrome and Firefox have started showing insecure warnings on sites without SSL
certificates. Without…


24


HOW TO BUILD AND DEPLOY A PROGRESSIVE WEB APP WITH PWAFIRE, GITHUB PAGES, AND
FIREBASE

Recently I discovered a new trend, a powerful web technology, one that every Web
Developer should kn…



©2023 Bolaji Ayodeji's Blog

Archive·Privacy policy·Terms
Publish with Hashnode

Powered by Hashnode - Home for tech writers and readers