Original Post
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 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.
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
nornoreferrer
<a target="_blank" href="https://www.google.com">Google</a>
-
Google -
rel="noopener"
<a target="_blank" rel="noopener" href="https://www.google.com">Google</a>
-
Google -
rel="noreferrer"
<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
window.opener
- While you are in developer console, go to network tab and reload the page to check
referer
underRequest Headers
(Chrome browser). For first & second, it should behttps://gulshansaini.dev/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 the referring page as it will not run on a separate process.
Link to original post: https://gulshansaini.dev/what-is-rel-noopener/
Top comments (0)