Why is so, because when you link to a page on another website using the target="_ blank" attribute, you could expose your website to either performance or security issues, or both.
The reason is that the target page for the link can run the same process as your page. If the page is running multiple processes involving JavaScript, then the performance of your website could also be adversely affected.
Your target page link can also access your windows page object by setting the window.opener property, which allows that target page to redirect your website page to a malicious URL address.
The solution is to add rel="noopener" or rel="noreferrer" attributes to a link with target="_blank" attribute to avoid this problem. If you have already set rel = "nofollow" attribute, change it to rel="nofollow noopener".
For example there is a link to,
<a href="https://www.aroengbinang.com/p/koleksi-foto-taman-burung.html" target="_blank">Bird Park Photos</a>
change it to,
<a href="https://www.aroengbinang.com/p/koleksi-foto-taman-burung.html" rel="noopener" target="_blank">Bird Park Photos</a>
Auditing with Lighthouse uses a number of processes to find out if a link falls into the unsafe category. Among them is to collect all tags that contain the target = "_ blank" attributes but do not have the rel="noopener" or rel="noreferrer" attributes.
Because Lighthouse audit will filter out all links to the same host, hence if there are other pages on your website also contain links with the target="_ blank" attribute and without using the rel="noopener" attribute, then the performance and security effects will still apply to that page. However, all those other unsafe links are not visible in the Lighthouse audit. This is what you need to be aware of.
Therefore, when using the target = "_ blank" attribute, always add rel="noopener" or rel="noreferrer" attributes in the link. The existence of a rel="noopener" attribute prevents the target page from accessing the window.opener property and ensures it goes through a separate process. Meanwhile, the addition of the rel = "noreferrer" attribute, besides having the same functionality as rel="noopener", it also prevents the Referer header from being sent to the target page.
Label: Blog, Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
