What is rel noopener?

In HTML, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.

When you open another page using target="_blank", the other page may run on the same process as your page, unless Site Isolation is enabled. The other page can access your window object with the window.opener property. This allows other page to redirect your page to a malicious URL - see link for more details. However, as mentioned by @jake in his article the origin security model of the web prevents other page from reading your page.

Solution

Include rel="noopener" for all external links, generally when using target="_blank". The new window will run in separate process and it won’t be able to access window.opener property of parent page. You may also use rel="noreferrer" which also prevents Referer header being sent to new page.

Try it yourself

• Google - Neither noopener nor noreferrer
• Google - rel="noopener"
• Google - rel="noreferrer"

Steps for verification

1. Click on link and go to new page/tab
2. Open developer console and check value of window.opener
3. While you are in developer console, go to network tab and reload the page to check referer under Request Headers(Chrome browser). For first & second, it should be https://tutorial.tips/what-is-rel-noopener/ whereas in third case, referer property should not be present.

Is SEO impacted if we use noopener or noreferrer?

Search engines do not consider noopener or noreferrer to rank pages. It is used to improve security of website.

Benefits of noopener

• Improved security
• Improved performance - if new tab/page is running expensive JavaScript, it won’t affect referring page as it will not run on separate process.