The following error occurs when writing JS code:

jsx-no-target-blank[ESLint]

Specific access to the source address

The reason is that the default a tag link, if set target=_blank, can get the reference of the original TAB in the new window through the opener attribute of the global object, which may cause hacker attacks and other risks

One of them is written well in English, and the examples cited below are also examples of this blog

The newly opened window belongs to homologous time

Enter the mathiasbynens. Making. IO/rel – noopene…

Then Click on the first example: “Click me!! 1 (same origin)”

A tag (Click me!! 1 (same-origin)) source:

<a class="user-generated" href="malicious.html" target="_blank"> <b>Click me!! 1 (same-origin)</b> </a>Copy the code

At this point, a new TAB will open and go to the malicious. HTML page, where the malicious.

if (window.opener) { opener.location = 'https://mathiasbynens.github.io/rel-noopener/#hax'; // Just `opener.location.hash = '#hax'` only works on the same origin. } else { document.querySelector('h1').innerHTML =  'The previous tab is safe and intact. <code>window.opener</code> was <code>null</code>; mischief <em>not</em> managed! '; }Copy the code

At this point, open debugging on the newly opened page and input opener. Location, opener. Document

So in the new TAB, you can take the operner and do anything you want to change the old TAB page, like redirect, change the DOM

Then cut back to the original TAB, found that the url has been changed to: mathiasbynens. Making. IO/rel – noopene…

When the new TAB and the original page belong to cross-domain

Click a TAB: Click me!! 1 (cross-origin)

<a class="user-generated" href="https://mathiasbynens.be/demo/opener" target="_blank"> <b>Click me!! 1 (cross-origin)</b> </a>Copy the code

Similarly, mathiasbynens. Be/demo/opener…

if (window.opener) { opener.location = 'https://mathiasbynens.github.io/rel-noopener/#hax'; } else { document.querySelector('h1').innerHTML = 'The previous tab is safe and intact. <code>window.opener</code> was <code>null</code>; mischief <em>not</em> managed! '; }Copy the code

At this point, open debugging on the newly opened page and input opener. Location, opener. Document

You can see that the value inside the document can’t be retrieved across fields, location is an empty object, but you can still see the href and replace keys when you click expand. Let’s try redirecting

Then cut back to the original TAB, found that the url has been changed to: mathiasbynens. Making. IO/rel – noopene…

It indicates that in the case of cross-domain, the original TAB can also be partially controlled, so the hacker can control the original TAB to redirect to a URL similar to the original website after getting opener. At this time, the user does not know that the URL has been replaced. If the user is guided to input the account password, information leakage will occur, resulting in attacks

Solution: rel=noopener

Add rel=noopener to the A tag, or rel= Noreferrer for older browsers

Noopener has the following compatibility:

Noreferrer compatibility is as follows:

More wonderful articles can see my blog, if there are mistakes, welcome to correct, common progress