react/jsx-no-target-blank

In older browsers, a page opened with target="_blank" can reach the page that opened it through window.opener and send it to another address, for example a fake login page. rel="noreferrer" cuts that connection.

The rule only reports links that can leave your site: an href that starts with a scheme such as https: or with //, or an href in braces.

--fix adds rel="noreferrer" to the link.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-no-target-blank" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/jsx-no-target-blank" = ["error", {
  allowReferrer = false,
  enforceDynamicLinks = "always", # "always" or "never"
  warnOnSpreadAttributes = false,
  forms = false,
  links = true,
}]

Examples#

example.jsx1 problem

const docs = <a href="https://example.com/docs" target="_blank">Docs</a>;

example.jsx1 problem

const profile = <a href={website} target="_blank">Website</a>;

example.jsxNo problems

const docs = <a href="https://example.com/docs" target="_blank" rel="noreferrer">Docs</a>;

const help = <a href="/help" target="_blank">Help</a>;

Options#

Option	Default	What it does
`allowReferrer`	`false`	Accept `rel="noopener"` as well, which keeps the `Referer` header.
`enforceDynamicLinks`	`"always"`	`"never"` allows links with an `href` in braces.
`warnOnSpreadAttributes`	`false`	Treat `{...props}` as if it set an unsafe `target` and `href`, unless props after it say otherwise.
`forms`	`false`	Also check `<form target="_blank">` and its `action`.
`links`	`true`	Only with an oxlint config: `false` stops checking links.

example.jsxwith { "allowReferrer": true }No problems

const docs = <a href="https://example.com/docs" target="_blank" rel="noopener">Docs</a>;

example.jsxwith { "enforceDynamicLinks": "never" }No problems

const profile = <a href={website} target="_blank">Website</a>;

example.jsxwith { "warnOnSpreadAttributes": true }1 problem

const link = <a {...props}>Open</a>;

example.jsxwith { "warnOnSpreadAttributes": true }No problems

const link = <a {...props} rel="noreferrer">Open</a>;

example.jsxwith { "forms": true }1 problem

const search = <form action="https://example.com/search" target="_blank" />;

The rule also checks your own link and form components if your settings list them under linkComponents and formComponents. Settings go under [lint.settings] in bunfig.toml, or under settings in an ESLint config.

When not to use it#

Current browsers treat target="_blank" as if it had rel="noopener". If you don't support older ones, you don't need this rule.