What does the a tag noopener mean? noreferrer attribute/nofollow effect

hyperlink label <a>Code is usually used with noopener, noreferrer and nofollow attributes, this article will share how to use noopener, noreferrer and nofollow code attributes.

What does the a tag noopener mean?

will target="_blank" When added to a link, the target page will open in a new tab.

In the newly opened page, you can obtain the source page window object through window.opener, burying potential security risks.

• Specifically, your own web page A link, there is a web page B link that can open another third-party address.
• Web page B obtains the window object of Web page A through window.opener;
• Then you can use page A to jump to the phishing page window.opener.location.href="abc.com", the user does not notice
• The address jumped, and after entering the user name and password on this page, information leakage occurred.
• In order to avoid the above problems, rel is introduced and the ="noopener" attribute is set, so that the newly opened page cannot obtain the window object of the source page.
• At this time, the value of window.opener is null.

So, if you want to open a third-party address in a new tab, it's best to add the a tag code rel="noopener"attribute.

The role of the noreferrer attribute

Similar to noopener.

Settingrel="noreferrer"After that, the newly opened page cannot get the window of the source page to attack.

At the same time, the document.referrer information cannot be obtained from the newly opened page.This information contains the address of the source page.

Usually noopener and noreferrer are set at the same time,rel="noopener noreferrer".

Since the latter has the former function of restricting access to window.opener at the same time, why should it be set at the same time?

For compatibility, because some old browsers do not support noopener.

The role of nofollow

The calculation of page weight by search engines includes the number of page references (backlinks), that is, if the page is linked by many other web pages, the page will be judged as a high-quality page.

Rankings in search results will rise.

When setting rel=”nofollow”, it means to tell the search engine that the link does not contribute to the above ranking.

• Generally used for linking withoutSEORanked internal addresses (like registration or login page links), don't want to waste export weight, or some poor quality pages.