# How to Handle noopener noreferrer on Links with target="_blank"

> Learn how to properly handle noopener noreferrer on links with target=_blank to prevent tabnabbing and secure your web applications. Protect your users' data now.

- Repository: [David Dias/Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
- Tags: best-practices
- Published: 2026-03-02

---

**Always include `rel="noopener noreferrer"` on anchor elements using `target="_blank"` to nullify `window.opener` and prevent tabnabbing attacks.**

When implementing `noopener noreferrer` on links with `target="_blank"`, you protect your users from a critical security vulnerability known as tabnabbing. The [thedaviddias/Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) repository documents this requirement explicitly in its [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) file at lines 313-315, establishing it as a mandatory security practice for modern web development.

## Understanding the Tabnabbing Vulnerability

When an anchor element includes `target="_blank"`, the newly opened browsing context receives a reference to the originating window via `window.opener`. A malicious external page can exploit this reference to perform a **tabnabbing attack**, redirecting the original tab to a phishing site while the user remains focused on the new content. This vulnerability exists because browsers maintain a connection between the two windows unless explicitly severed.

## The Role of `rel="noopener"`

Adding `rel="noopener"` instructs the browser to **nullify the `window.opener` property** in the new tab, effectively severing the connection between the two browsing contexts. Modern browsers including Chrome, Edge, Safari, and Firefox 52+ automatically implement this protection when the attribute is present, eliminating the tabnabbing risk entirely by preventing the target page from accessing the originating window.

## When to Include `rel="noreferrer"`

Older versions of Firefox (prior to version 52) do not support the `noopener` attribute. In these legacy browsers, `rel="noreferrer"` serves as the only reliable fallback because it both disables `window.opener` and prevents the browser from sending the `Referer` header. According to the Front-End-Checklist source code at [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) lines 313-315, the combination `rel="noopener noreferrer"` ensures universal compatibility:

> "In case you are using external links with `target="_blank"`, your link should have a `rel="noopener"` attribute to prevent tab nabbing. If you need to support older versions of Firefox, use `rel="noopener noreferrer"`."

For browsers that understand `noopener`, the `noreferrer` portion is safely ignored, while browsers that only recognize `noreferrer` still receive adequate protection against window manipulation.

## Additional Privacy Benefits

Beyond preventing tabnabbing, the `noreferrer` keyword strips the `Referer` header from requests to the external site. This prevents leakage of your current page's URL, enhancing user privacy when linking to third-party domains. Some browsers also treat `noreferrer` as a stronger guarantee that the opener relationship is completely removed, providing an additional security safety net.

## Implementation Examples

### Basic HTML Implementation

The standard pattern applies the attributes directly to the anchor element:

```html
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
   Open Example Site
</a>

```

### React Component Approach

For React applications, create a reusable ExternalLink component to ensure consistent security implementation:

```tsx
type ExternalLinkProps = React.ComponentPropsWithoutRef<'a'> & {
  children: React.ReactNode;
};

export const ExternalLink = ({ href, children, ...rest }: ExternalLinkProps) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    {...rest}
  >
    {children}
  </a>
);

```

### Dynamic jQuery Application

To retroactively secure existing links in legacy applications:

```javascript
$('a[target="_blank"]').attr('rel', 'noopener noreferrer');

```

### Markdown Documentation

When writing README files or documentation that renders to HTML:

```markdown
[Open Documentation](https://developer.mozilla.org){:target="_blank" rel="noopener noreferrer"}

```

## Browser Support Considerations

- **Modern browsers** (Chrome, Edge, Safari, Firefox ≥ 52): Support `rel="noopener"`, though `rel="noopener noreferrer"` remains safe and backward-compatible.
- **Legacy Firefox** (< 52): Does not recognize `noopener`; only `noreferrer` provides protection against `window.opener` access.

Using `rel="noopener noreferrer"` universally remains the simplest future-proof solution, as demonstrated in the thedaviddias/Front-End-Checklist repository's own documentation structure.

## Summary

- Always include `rel="noopener noreferrer"` on links using `target="_blank"` to prevent tabnabbing attacks.
- The `noopener` keyword nullifies `window.opener` in modern browsers, while `noreferrer` ensures protection in older Firefox versions.
- This pattern is explicitly required in the [Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) repository at [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) lines 313-315.
- Beyond security, `noreferrer` enhances privacy by preventing `Referer` header leakage to external domains.
- Use reusable components in frameworks like React to ensure consistent implementation across your application.

## Frequently Asked Questions

### What is tabnabbing and how does it exploit `target="_blank"`?

Tabnabbing occurs when a malicious page accessed via `target="_blank"` uses the `window.opener` reference to redirect the original page to a phishing site. This reference persists because the browser maintains a connection between the two browsing contexts unless explicitly severed with `rel="noopener"`.

### Do I need both `noopener` and `noreferrer` for modern websites?

While modern browsers (Chrome, Edge, Safari, Firefox ≥ 52) only require `rel="noopener"` to nullify `window.opener`, including both attributes ensures compatibility with older Firefox versions that ignore `noopener`. According to the Front-End-Checklist recommendations, using `rel="noopener noreferrer"` universally provides the safest implementation.

### Does `noreferrer` affect analytics tracking or SEO?

The `noreferrer` keyword prevents the browser from sending the `Referer` header to the target site, which means external sites cannot see that traffic came from your page. While this affects referral data in some analytics platforms, it does not negatively impact SEO rankings or the functionality of the external site itself.

### Can I add these attributes dynamically to existing links?

Yes, you can programmatically apply these security attributes using JavaScript. For example, with jQuery: `$('a[target="_blank"]').attr('rel', 'noopener noreferrer');`. However, server-side rendering of these attributes in the initial HTML is preferred for immediate protection before JavaScript executes.