This is How rel=”noopener” Protects Your Outgoing Links

noopener vs opener rel link

Hey there! Some links on this page may be affiliate links which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support!

When opening a link in a new tab with target="_blank", the rel attribute of the HTML a tag can have many values including opener and noopener.

The examples below will demonstrate how opener gives the destination page access to the source page’s window.opener object which can be exploited in malicious ways.

1. opener

When you click on this link with a rel="opener" value, the new tab will have access to this page’s window.opener object and can potentially change its content. This can be bad.

<a href="page.html" target="_blank" rel="opener">this link</a>

2. noopener

When you click on this link with a rel="noopener" value, the new tab will not have access to this page’s window.opener object because noopener prevents this behavior. This is safe.

<a href="page.html" target="_blank" rel="noopener">this link</a>

3. Default behavior

When you click on this link, most modern browsers will default to the noopener behavior.

<a href="page.html" target="_blank">this link</a>

Meet Tony

Tony from Tony Teaches Tech headshot

With a strong software engineering background, Tony is determined to demystify the web. Discover why Tony quit his job to pursue this mission. You can join the Tony Teaches Tech community here.

Leave a Reply

Your email address will not be published. Required fields are marked *