What Is rel="noopener" in WordPress? A Comprehensive Guide

In the vast ecosystem of WordPress, where millions of websites are built and managed daily, even the smallest HTML attributes can play a critical role in security and user experience. One such attribute that often flies under the radar—but is essential for protecting your site and its visitors—is rel="noopener".

If you’ve ever added a link to your WordPress site that opens in a new tab (using target="_blank"), you’ve likely encountered rel="noopener"—either automatically inserted by WordPress or recommended by security best practices. But what exactly does it do? Why is it important? And how does WordPress handle it behind the scenes?

This guide demystifies rel="noopener", breaking down its purpose, security implications, and role in WordPress. Whether you’re a beginner blogger or a seasoned developer, by the end, you’ll understand how to use rel="noopener" effectively to safeguard your site and visitors.

Table of Contents#

  1. What Is rel="noopener"?
  2. Why Does rel="noopener" Matter? (The Dangers of Unsecured Links)
  3. How rel="noopener" Works: A Technical Deep Dive
  4. rel="noopener" vs. rel="noreferrer": What’s the Difference?
  5. WordPress and rel="noopener": Default Behavior Explained
  6. How to Check if Your WordPress Site Uses rel="noopener")
  7. When Might WordPress NOT Add rel="noopener"? (Edge Cases)
  8. How to Manually Add or Remove rel="noopener" in WordPress
  9. Common Misconceptions About rel="noopener")
  10. Best Practices for Using rel="noopener" in WordPress
  11. Conclusion
  12. References

What Is rel="noopener"?#

To understand rel="noopener", let’s start with the basics of HTML links. A standard hyperlink in HTML looks like this:

<a href="https://example.com">Visit Example.com</a>

The rel attribute (short for "relationship") defines the relationship between the current page and the linked page. It accepts values like nofollow (tells search engines not to follow the link), author (links to the author’s page), and—relevant here—noopener.

rel="noopener" is a security attribute that prevents a linked page (opened in a new tab/window via target="_blank") from accessing the original page’s window.opener property.

In simpler terms: When you click a link that opens in a new tab (target="_blank"), the new tab by default has a reference to the original tab via window.opener. rel="noopener" severs this connection, ensuring the new tab can’t interact with or manipulate the original page.

At first glance, rel="noopener" might seem like a minor technical detail, but it addresses a critical security vulnerability known as tabnabbing.

What Is Tabnabbing?#

Tabnabbing is a phishing technique where a malicious website (opened in a new tab via target="_blank") hijacks the original tab’s content. Here’s how it works:

  1. A user visits your WordPress site and clicks a link with target="_blank" (e.g., "Check out this cool tool!").
  2. The link opens a malicious website in a new tab.
  3. The malicious site uses window.opener (which references your original tab) to rewrite the original tab’s URL to a fake version of a trusted site (e.g., a fake login page for your bank, email, or even your own WordPress admin).
  4. When the user returns to the original tab, they see what appears to be a legitimate login page and unknowingly enter their credentials, which the attacker steals.

Example Scenario:
Imagine you run a travel blog and link to an external "hotel booking site" that’s actually malicious. A visitor clicks the link, which opens the malicious site in a new tab. The malicious site then changes your original blog tab to a fake "WordPress Login" page. When the visitor returns to your tab, they think they need to log in again and enter their credentials—giving the attacker access to their account.

Without rel="noopener", this attack is trivial for a malicious actor to execute. With rel="noopener", window.opener is nullified, and the malicious site can’t manipulate the original tab.

How rel="noopener" Works: A Technical Deep Dive#

To grasp rel="noopener", we need to understand the window.opener property in JavaScript.

The Role of window.opener#

When you open a link with target="_blank", the browser creates a new browsing context (tab/window). By default, this new context has a window.opener property that points back to the original window’s window object. This allows the new page to interact with the original page via JavaScript.

For example, a new page could run:

// Malicious code in the new tab  
if (window.opener) {  
  window.opener.location = "https://fake-bank.com/login";  
}

This would redirect the original tab to fake-bank.com/login, a classic tabnabbing attack.

How rel="noopener" Stops This#

When you add rel="noopener" to a link, the browser nullifies the window.opener property in the new tab. This means:

  • The new tab’s window.opener becomes null.
  • The new tab can no longer access or modify the original tab’s window object (e.g., it can’t change window.location).

Example with rel="noopener":

<a href="https://malicious-site.com" target="_blank" rel="noopener">Dangerous Link</a>

In the new tab opened by this link, window.opener will be null, so the malicious code above would fail (since window.opener is undefined).

rel="noopener" vs. rel="noreferrer": What’s the Difference?#

rel="noopener" and rel="noreferrer" are often mentioned together, but they serve distinct (though overlapping) purposes. Let’s clarify:

rel="noopener"#

  • Primary Function: Nullifies window.opener to prevent tabnabbing.
  • Referrer Behavior: Does NOT affect the Referer HTTP header (the original page’s URL is still sent to the linked site).

rel="noreferrer"#

  • Primary Functions:
    1. Nullifies window.opener (same as noopener).
    2. Prevents the Referer header from being sent to the linked site (the linked site won’t know which page the user came from).
  • Use Case: When you want to hide the referrer (for privacy) and prevent tabnabbing.

Key Takeaway:#

rel="noreferrer" includes the security benefits of rel="noopener" but adds privacy by hiding the referrer. If you only need to prevent tabnabbing (and want the linked site to see the referrer), rel="noopener" is sufficient.

WordPress and rel="noopener": Default Behavior Explained#

WordPress, as a security-focused platform, automatically adds rel="noopener" to links with target="_blank" in most cases. This behavior was introduced in WordPress 4.7 (released December 2016) to protect users from tabnabbing attacks.

How WordPress Adds rel="noopener"#

WordPress uses a core filter called wp_targeted_link_rel to append rel="noopener" to links with target="_blank". This filter runs whenever WordPress generates or processes links (e.g., in the block editor, classic editor, or when using functions like the_content()).

By default, the wp_targeted_link_rel filter returns noopener, so links like this:

<a href="https://external-site.com" target="_blank">External Link</a>

Are automatically converted to:

<a href="https://external-site.com" target="_blank" rel="noopener">External Link</a>

What About rel="noreferrer"?#

WordPress does NOT add noreferrer by default. noreferrer must be added manually if you want to hide the referrer.

How to Check if Your WordPress Site Uses rel="noopener"#

To confirm rel="noopener" is working on your site, follow these methods:

Method 1: View Page Source#

  1. Visit a page on your WordPress site with links that open in new tabs.
  2. Right-click anywhere on the page and select "View Page Source" (or press Ctrl+U/Cmd+U).
  3. Search for target="_blank" using Ctrl+F/Cmd+F.
  4. Check if the link includes rel="noopener".

Example of a secure link in page source:

<a href="https://example.com" target="_blank" rel="noopener">Example Link</a>

Method 2: Use Browser Developer Tools#

  1. Right-click the link and select "Inspect" (or press F12/Ctrl+Shift+I).
  2. In the Elements tab, locate the <a> tag for the link.
  3. Check if rel="noopener" is present in the tag.

Tools like W3C Link Checker or browser extensions (e.g., Link Redirect Trace) can scan your site for links and report their attributes, including rel="noopener".

When Might WordPress NOT Add rel="noopener"? (Edge Cases)#

While WordPress 4.7+ adds rel="noopener" by default, there are scenarios where it might be missing:

1. Outdated WordPress Versions#

Sites running WordPress older than 4.7 (released 2016) do not automatically add rel="noopener". If you’re on an outdated version, update immediately for security.

If you manually insert links via the "Custom HTML" block or classic editor’s HTML mode and forget to add rel="noopener", WordPress won’t auto-correct it. For example:

<!-- This link (added manually) will NOT have rel="noopener" -->  
<a href="https://external-site.com" target="_blank">Manual Link</a>

3. Themes/Plugins Overriding Default Behavior#

Some themes or plugins may generate links using custom code that bypasses WordPress’s wp_targeted_link_rel filter. For example:

  • A plugin that creates "related posts" links without using WordPress’s esc_url() or the_content() functions.
  • A theme that hardcodes links in templates (e.g., footer links) with target="_blank" but no rel="noopener".

Advanced users might intentionally disable the wp_targeted_link_rel filter via functions.php (see Section 8). This removes rel="noopener" from all links.

How to Manually Add or Remove rel="noopener" in WordPress#

Most users won’t need to manually adjust rel="noopener", but here’s how to handle edge cases:

Adding rel="noopener" Manually#

In the Block Editor (Gutenberg):#

  1. Insert a "Paragraph" or "Heading" block.
  2. Highlight text and click the link icon (🔗).
  3. Enter the URL and click the downward arrow next to the URL field.
  4. Check "Open in new tab."
  5. WordPress automatically adds rel="noopener".

In Custom HTML:#

If adding a link via HTML (e.g., in a Custom HTML block), explicitly include rel="noopener":

<a href="https://example.com" target="_blank" rel="noopener">Secure Link</a>

There’s almost no good reason to remove rel="noopener", as it exposes users to tabnabbing. However, if you must (e.g., for a trusted internal tool that requires window.opener), use the wp_targeted_link_rel filter:

  1. Go to Appearance → Theme File Editor (or use FTP to edit functions.php).
  2. Add this code to functions.php: 
    // Remove rel="noopener" from all links with target="_blank"  
add_filter('wp_targeted_link_rel', '__return_empty_string');
  3. Save changes.

Warning: This disables rel="noopener" site-wide. Only do this if you fully understand the risks.

Common Misconceptions About rel="noopener"#

Let’s debunk myths surrounding rel="noopener":

False. rel="noopener" only affects the window.opener property, not the link’s ability to open or function. The link will still work as expected.

False. Even internal links (e.g., to another page on your site) with target="_blank" should use rel="noopener". If an internal page is compromised (e.g., via a hacked plugin), it could still tabnab the original tab.

Myth 3: "If I Use rel="noreferrer", I Don’t Need rel="noopener""#

True. rel="noreferrer" includes noopener functionality (it nullifies window.opener). However, noreferrer also hides the referrer, which may not be desired (e.g., if you want the linked site to track traffic from yours).

Myth 4: "WordPress Always Adds rel="noopener""#

False. As discussed in Section 7, edge cases (e.g., manual HTML links, outdated WordPress, or custom code) can result in missing rel="noopener".

Best Practices for Using rel="noopener" in WordPress#

To maximize security:

  1. Always Pair target="_blank" with rel="noopener"
    Never use target="_blank" without rel="noopener" (or rel="noreferrer" if referrer hiding is needed).

  2. Keep WordPress Updated
    Ensure you’re on WordPress 4.7 or newer to leverage the automatic rel="noopener" behavior.

  3. Audit Custom HTML Links
    Periodically check manually inserted HTML links (e.g., in widgets, Custom HTML blocks, or theme files) to ensure they include rel="noopener" when using target="_blank".

  4. Avoid Removing rel="noopener"
    Only remove rel="noopener" if absolutely necessary, and even then, restrict it to specific links (not site-wide).

  5. Use rel="noreferrer" Sparingly
    Reserve rel="noreferrer" for cases where you need to hide the referrer (e.g., linking to a private document). For most links, rel="noopener" is sufficient.

Conclusion#

rel="noopener" is a small but mighty security attribute that protects WordPress users from tabnabbing attacks. By nullifying the window.opener property, it ensures malicious sites opened in new tabs can’t hijack the original tab.

WordPress simplifies this by automatically adding rel="noopener" to links with target="_blank" (for versions 4.7+), but users must remain vigilant—especially with custom HTML links, outdated sites, or plugins that override default behavior.

By following best practices—keeping WordPress updated, auditing links, and avoiding unnecessary removal of rel="noopener"—you can keep your site and visitors safe.

References#

2025-11