noBlankTarget (since v1.0.0)
Diagnostic Category: lint/a11y/noBlankTarget
Source: jsx-no-target-blank
Disallow target="_blank"
attribute without rel="noreferrer"
When creating anchor a
element, there are times when its link has to be opened in a new browser tab
via target="_blank"
attribute. This attribute has to paired with rel="noreferrer"
or you’re incur
in a security issue.
Refer to the noreferrer documentation and the the noopener documentation
Examples
Section titled ExamplesInvalid
Section titled Invalid<a href='http://external.link' target='_blank'>child</a>
a11y/noBlankTarget.js:1:32 lint/a11y/noBlankTarget FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using target="_blank" without rel="noreferrer".
> 1 │ <a href='http://external.link' target='_blank'>child</a>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Opening external links in new tabs without rel="noreferrer" is a security risk. See the explanation for more details.
ℹ Safe fix: Add the rel="noreferrer" attribute.
1 │ <a·href='http://external.link'·target='_blank'·rel="noreferrer">child</a>
│ +++++++++++++++++
<a href='http://external.link' target='_blank' rel="noopener">child</a>
a11y/noBlankTarget.js:1:32 lint/a11y/noBlankTarget FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using target="_blank" without rel="noreferrer".
> 1 │ <a href='http://external.link' target='_blank' rel="noopener">child</a>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Opening external links in new tabs without rel="noreferrer" is a security risk. See the explanation for more details.
ℹ Safe fix: Add the "noreferrer" to the existing attribute.
1 │ <a·href='http://external.link'·target='_blank'·rel="noreferrer·noopener">child</a>
│ +++++++++++
<a {...props} href='http://external.link' target='_blank' rel="noopener">child</a>
a11y/noBlankTarget.js:1:43 lint/a11y/noBlankTarget FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using target="_blank" without rel="noreferrer".
> 1 │ <a {...props} href='http://external.link' target='_blank' rel="noopener">child</a>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Opening external links in new tabs without rel="noreferrer" is a security risk. See the explanation for more details.
ℹ Safe fix: Add the "noreferrer" to the existing attribute.
1 │ <a·{...props}·href='http://external.link'·target='_blank'·rel="noreferrer·noopener">child</a>
│ +++++++++++
Valid
Section titled Valid<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>
<a href='http://external.link' target='_blank' rel="noopener" {...props}>child</a>