logoESLint React

no-unsafe-target-blank

Disallows 'target="_blank"' without 'rel="noreferrer noopener"'.

Full Name in eslint-plugin-react-dom

react-dom/no-unsafe-target-blank

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-unsafe-target-blank

Features

⚙️ 🔧

Presets

strict strict-typescript strict-type-checked

Rule Details

When using target="_blank" on links without rel="noreferrer noopener", the opened page could historically access the window.opener property of the original page, a security vulnerability known as tabnabbing. Modern browsers (Chrome 88+, Firefox 79+, Safari 12.1+) now implicitly treat target="_blank" as rel="noopener", so window.opener is no longer accessible. Explicitly adding rel="noreferrer" is still recommended: it covers older browsers and also hides the Referer header from the linked page, which improves privacy.

Examples

function MyComponent() {
  return (
    // 🔴 Problem: target="_blank" without rel relies on the browser's implicit noopener
    // and leaks the Referer header to the linked page
    <a href="https://eslint-react.xyz" target="_blank">
      Example
    </a>
  );
}
function MyComponent() {
  return (
    // 🟢 Recommended: Always add rel="noreferrer noopener" when using target="_blank"
    <a href="https://eslint-react.xyz" target="_blank" rel="noreferrer noopener">
      Example
    </a>
  );
}

Options

Rule Options

type Options = {
  allowReferrer?: boolean; // default: false
};

allowReferrer

When set to true, rel="noopener" alone is accepted and the suggested fix adds rel="noopener" instead of rel="noreferrer noopener". This preserves the Referer header while still requiring an explicit token that prevents tabnabbing.

Default: false

Resources

Further Reading


See Also

On this page