<
zhead
>

Early Access

Link

opener

Learn how to use the opener rel link tag to improve your site.

The "opener" link relation is used to control the behavior of the `window.opener` API property within the context of browser-based navigation. Specifically, when a link with `rel="opener"` is clicked, it allows the new window to retain a reference to the opening window via the `window.opener` property. This is particularly relevant when using `target="_blank"` to open a link in a new browsing context.

Code Examples

<a href="https://example.com" target="_blank" rel="opener">Visit Example</a>
Correctly uses `rel="opener"` for a link that opens in a new tab and retains window communication.
<a href="https://example.com" target="_blank">Visit Example</a>
Omits `rel="opener"`, which is good for security in general but noted as bad here because it is necessary for the context of a specific functionality.

Recommendations

  • Mitigate Security Risks
    While enabling `rel="opener"` can be useful for window communication, be mindful that it poses security risks, as the newly opened window can potentially navigate the opener window to a different URL. Always validate the necessity before use.
  • Use When Necessary
    Prefer not using `rel="opener"` unless there’s a required feature that necessitates its use. For instance, if your page needs to communicate back to its opener, this relation becomes necessary. However, in most cases, avoiding it enhances security by default.

Related Documentation