Prevent Sending HTTP Referer Headers from Your Website

Opening links in a new window is a generic method to navigate the users to another domain. We can achieve this using target="_blank". I’m sure everybody used the target with _blank value in some of his projects, but I’m not sure everybody knows the drawbacks of it.

When any external link is opened with target="_blank" then that external link will open in another new blank tab. Now, this page will open and follow the same process of the original page. This also means if the new external page has any performance issue like if it has high load time then this will also affect the original page performance. If you are open the same origin you have full access — to the document object too — on cross-origin this is disabled (window.opener.document), but you can still access the location object.

It means that if you embed a link into your site or article which point to another page and opened in a new window. The target page can modify the original page in some way through JavaScript using window.opener object.

To see this in work, please navigate to this link

So what happens here? After you click on the link (in the opened document), the browser opens the page which runs a script that using the window.opener object to modify the original page (which you come from). Plain dull but can be harmful.

The last question is: how we can disable this behavior? Use rel="noopener" on every link which is using target="_blank" and navigate to another document.

<a href="https://niteshsoni.info" rel="noopener"></a>

rel="noopener" is used so that when a new window is created upon clicking a link, malicious javascript code running in the new window will not access your previous window via the window.opener attribute and will ensure it runs in a separate process.

In older browsers, you can use rel="noreferrer", attribute has the same effect, but will also prevent the Referer header from being sent to the new page

<a href="https://niteshsoni.info" rel="noopener noreferrer"></a>

rel="noreferrer" is used so that when a user clicks on a hyperlink and is transferred to a new location, no referrer information will be leaked to the destination link. Meaning, it will not be possible for the destination to know when that user came from.

This also applies if you open the window through JavaScript window.open(); function because you also open a window. In this case, you have to clear the opener object:

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

In my view, there are no major downsides in applying the first solution (adding rel="noopener" to every target="_blank" link). This issue shows how easy it is to create loopholes in your web page security