In HTML, link types indicate the relationship between two documents, in which one links to the other using an
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 About rel=noopener 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.
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
<a target="_blank" href="https://www.google.com">Google</a>
- Google -
<a target="_blank" rel="noopener" href="https://www.google.com">Google</a>
- Google -
<a target="_blank" rel="noreferrer" href="https://www.google.com">Google</a>
Steps for verification
- Click on link and go to new page/tab
- Open developer console and check value of
- While you are in developer console, go to network tab and reload the page to check
Request Headers(Chrome browser). For first & second, it should be
https://gulshansaini.dev/what-is-rel-noopener/whereas in third case,
refererproperty 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