{react/jsx-no-target-blank}} React /jsx-no-target-blank {react/jsx-no-target-blank}}

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener
Copy the code

I have never thought about why it is like this before, but I just saw an article recently, and I have a clearer understanding of this.

A, noopener

This property is to prevent phishing, so if you have an external link that opens on a new page and you don’t have rel=”noopener”, then that new page has the same permissions as the previous one, It can through the window. The opener. The location. The href = “looks like the original site of the same false website address”, therefore, it can be the original page into fake login page allows you to log in, so as to get your message.

So what happens if you add rel=”noopener”, the window.opener of the new page is set to null, and they don’t have access to the previous page

Second, the noreferrer

It has similar functions with Noopener, but the difference lies in that some old browsers may not support Noopener, so it is often seen that Noopener and Noreferrer appear at the same time.

A new open page link without noreferrer, in the new page through the document. Referrer to get the information of the previous page

Third, nofollow

This attribute is less used, because the article mentioned above just know this is related to SEO. Some sites will have links at the bottom of the site, generally the site you trust, so you would like to add these sites to the bottom of your site, however, you do not trust the site or you add links to small sites in your large site, then add this property.