jsx-no-target-blank.md

Prevent usage of unsafe target='_blank' (react/jsx-no-target-blank)

When creating a JSX element that has an a tag or a form tag, it is often desired to have the link open in a new tab using the target='_blank' attribute. Using this attribute unaccompanied by rel='noreferrer noopener', however, is a severe security vulnerability (see here for more details) This rules requires that you accompany all target='_blank' attributes with rel='noreferrer noopener'.

Rule Details

The following patterns are considered errors:

var Hello = <a target='_blank' href="http://example.com/"></a>

The following patterns are not considered errors:

var Hello = <p target='_blank'></p>
var Hello = <a target='_blank' rel='noopener noreferrer' href="http://example.com"></a>
var Hello = <a target='_blank' href="relative/path/in/the/host"></a>
var Hello = <a target='_blank' href="/absolute/path/in/the/host"></a>
var Hello = <a></a>

Options

"react/jsx-no-target-blank": [<enabled>, {
  "links": <boolean>,
  "forms": <boolean>
}]

• links - Prevent usage of unsafe target='_blank' inside links, defaults to true
• forms - Prevent usage of unsafe target='_blank' inside forms, defaults to false

When option forms is set to true, the following is considered an error:

var Hello = <form target='_blank' action="http://example.com/"></form>

When option links is set to true, the following is considered an error:

var Hello = <a target='_blank' href="http://example.com/"></form>

When Not To Use It

If you do not have any external links, you can disable this rule