Unsafe links to the cross-origin destinations

To solve this kind of problem, it is often necessary to add rel="noopener" or rel="noreferrer" to HTML. The addition should be done to the target="_ blank" links. In this way, this problem can be eliminated.

When a problem is discovered in the scanning studies of the Google Lighthouse system, the system gives you a warning about it:

To discover that a link can cause unsafe situations, Lighthouse takes the following actions or processes:

1. First, Lighthouse looks at the <a> tags in the system. Among them, options where the target="_ blank" attribute is located are gathered. Those with the rel="noopener" or rel="noreferrer" attributes are not included in gathering.
2. All codes with the same-host link are filtered.

If you are working for a large website, you may have a problem filtering same-host links. If a page has a target="_ blank" link that goes to another page, it needs to use rel="noopener". If it does not use that, Lighthouse may not be able to scan it while performing the audit.

How to prevent security vulnerabilities? 

You need to add code snippets to all the links that the Lighthouse system offers you as a warning. Adding rel="noopener" or rel="noreferrer" will fix the problem. In general, the place you need to add will be target="_ blank".

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>

1. The main thing the rel="noopener" code snippet does is to prevent the other site from creating a security vulnerability on your site via the malicious URL. For this, access to window.opener is blocked.
2. rel="noreferrer" does a similar action. Also, it prevents the system from sending the ‘’Referrer’’ header to a new page.