react/jsx-no-target-blank Correctness ​
What it does ​
This rule aims to prevent user generated link hrefs and form actions from creating security vulnerabilities by requiring rel='noreferrer'
for external link hrefs and form actions, and optionally any dynamically generated link hrefs and form actions.
Why is this bad? ​
When creating a JSX element that has an a
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'
, however, is a severe security vulnerability (see noreferrer
docs and noopener
docs for more details). This rules requires that you accompany target='_blank'
attributes with rel='noreferrer'
.
Example ​
jsx
/// correct
var Hello = <p target="_blank"></p>;
var Hello = <a target="_blank" rel="noreferrer" href="https://example.com"></a>;
var Hello = <a target="_blank" rel="noopener noreferrer" href="https://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>;
/// incorrect
var Hello = <a target="_blank" href="https://example.com/"></a>;
var Hello = <a target="_blank" href={dynamicLink}></a>;