This article was originally published on the public account CoyPan as expected

Translation of this article: medium.com/front-end-w… Prevent Sending HTTP Referer Headers from Your Website

Opening a link in a new window is a common logic in front-end development to direct the user to a new domain name. We can do that with target=’_blank’. I’m sure everyone has used it in one of their projects, but I’m not sure everyone knows the pitfalls.

When an external link uses target=_blank, the external link opens a new browser TAB. At this point, the new page opens and occupies the same process as the original page. This also means that if the new page has any performance issues, such as a high load time, it will also affect the performance of the original page. If you open a same-domain page, you will be able to access all the contents of the original page in the new page, including the Document object (window.opener. Document). If you open a cross-domain page, you can’t access document, but you can still access the Location object.

This means that if you embed a link in your site or article that opens a new page in a new window, that new page can use window.opener to modify the original page to some extent.

IO /adamlaki/de…

(I made a small GIF here, so that you can see the effect of the above example.)

Let’s see what happens in the example above. Okay? When you click the link (in the opened Document), the browser will open the page. This page has JavaScript code running: window.opener modizes the original page (the one you’re from). It’s a little tedious but it can be harmful.

So the question is: How do we stop this from happening? Add rel=”noopener” to all links that open new pages with target=_blank.

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

With rel=noopener, when a new page is opened via a link, the malicious JavaScript code in the new page will not be able to query the original page via window.opener’s call. This ensures that the new page runs in a separate process.

In older browsers, you can use the rel= Noreferrer attribute to the same effect. However, this also prevents the Refererheader from being sent to the new page.

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

In the example above, rel=”noreferrer” is used. When a user clicks the hyperlink to go to a new page, the new page does not get the referrer information. This would mean that the new page would not know where the user came from.

All of this applies if you open a page in JavaScript window.open, because you’re opening a new window. In this case, you have to be clear about the opener object:

var newWindow = window.open();
newWindow.opener = null;
Copy the code

In my opinion, there is no obvious downside to using the first solution (adding rel=”noopener” to every target=”_blank” link). This question shows how easy it is to find holes in the security of your web pages.

Author’s Summary

This is a short article that covers security issues when opening a new window using the tag. You can use window.opener to control the original page in the new page. If the old and new pages are in the same domain, then the original page can be manipulated in the new page. If it is a different domain, the location object of the original page can still be accessed through window.opener. Location in the new page.

Imagine that on your page A, you open a new window and go to page B. At the moment there is a code in page B window.opener. Location = ‘http://c.com’. In this case, page A will automatically jump to page C. If page C is a phishing site that looks exactly like page A, the user may be taken in.

The solution is: in withtarget="_blank"the<a>Tag, plusrel="noopener"Properties. If you are usingwindow.openThe way to open the page willopenerThe object is left empty. As a side effect, in some older browsers, the new page is not availablerefererInformation.

Write in the back

This article introduces a kind of front-end development prone to cause security problems, the problem is not big, but relatively easy to ignore. This is the first time I have come across this question.

As expected.