# react/jsx-no-target-blank

> Require `rel="noreferrer"` on links that open in a new tab

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const docs = <a href="https://example.com/docs" target="_blank">Docs</a>;
```

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

Not reported:

{/* good */}
```jsx
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. |

{/* good {"options": [{"allowReferrer": true}]} */}
```jsx
const docs = <a href="https://example.com/docs" target="_blank" rel="noopener">Docs</a>;
```

{/* good {"options": [{"enforceDynamicLinks": "never"}]} */}
```jsx
const profile = <a href={website} target="_blank">Website</a>;
```

{/* bad {"options": [{"warnOnSpreadAttributes": true}]} */}
```jsx
const link = <a {...props}>Open</a>;
```

{/* good {"options": [{"warnOnSpreadAttributes": true}]} */}
```jsx
const link = <a {...props} rel="noreferrer">Open</a>;
```

{/* bad {"options": [{"forms": true}]} */}
```jsx
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.