[Fix] jsx-no-target-blank: False negative when rel attribute is ass…

…igned using ConditionalExpression
jsx-eslint · Jul 13, 2022 · d998b85 · d998b85
1 parent 6b42731
commit d998b85
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-key`]: avoid a crash on a non-array node.body from [#3320][] ([#3328][] @ljharb)
 * [`display-name`]: fix false positive for assignment of function returning null ([#3331][] @apbarrero)
 * [`display-name`]: fix identifying `_` as a capital letter ([#3335][] @apbarrero)
+* [`jsx-no-target-blank`]: False negative when rel attribute is assigned using ConditionalExpression ([#3332][] @V2dha)
 
 ### Changed
 * [Refactor] [`jsx-indent-props`]: improved readability of the checkNodesIndent function ([#3315][] @caroline223)
@@ -25,6 +26,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 [#3339]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3339
 [#3335]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3335
+[#3332]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3332
 [#3331]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3331
 [#3328]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3328
 [#3327]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3327

diff --git a/lib/rules/jsx-no-target-blank.js b/lib/rules/jsx-no-target-blank.js
@@ -74,6 +74,29 @@ function getStringFromValue(value) {
       if (value.expression.type === 'TemplateLiteral') {
         return value.expression.quasis[0].value.cooked;
       }
+      const expr = value.expression;
+      if (expr.type === 'ConditionalExpression') {
+        if (
+          typeof expr.consequent.value === 'string'
+          && (
+            (expr.consequent.value && expr.consequent.value.toLowerCase() === 'noreferrer')
+            || (expr.consequent.value && expr.consequent.value.toLowerCase() === 'noopener noreferrer')
+            || (expr.consequent.value && expr.consequent.value.toLowerCase() === 'noreferrer noopener')
+          )
+        ) {
+          return expr.consequent.value;
+        }
+        if (
+          typeof expr.alternate.value === 'string'
+          && (
+            (expr.alternate.value && expr.alternate.value.toLowerCase() === 'noreferrer')
+            || (expr.alternate.value && expr.alternate.value.toLowerCase() === 'noopener noreferrer')
+            || (expr.consequent.value && expr.consequent.value.toLowerCase() === 'noreferrer noopener')
+          )
+        ) {
+          return expr.alternate.value;
+        }
+      }
       return value.expression && value.expression.value;
     }
   }

diff --git a/tests/lib/rules/jsx-no-target-blank.js b/tests/lib/rules/jsx-no-target-blank.js
@@ -141,6 +141,21 @@ ruleTester.run('jsx-no-target-blank', rule, {
     {
       code: '<a href target="_blank"/>',
     },
+    {
+      code: '<a href={href} target={isExternal ? "_blank" : undefined} rel="noopener noreferrer" />',
+    },
+    {
+      code: '<a href={href} target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined} />',
+    },
+    {
+      code: '<a href={href} target={isExternal ? "_blank" : undefined} rel={isExternal ? undefined : "noopener noreferrer"} />',
+    },
+    {
+      code: '<a href={href} target={isExternal ? undefined : "_blank"} rel={isExternal ? "noreferrer" : "noopener noreferrer"} />',
+    },
+    {
+      code: '<a href={href} target="_blank" rel={isExternal ? "noopener" : "noopener noreferrer"} />',
+    },
   ]),
   invalid: parsers.all([
     {
@@ -352,5 +367,17 @@ ruleTester.run('jsx-no-target-blank', rule, {
       options: [{ forms: true, links: false }],
       errors: defaultErrors,
     },
+    {
+      code: '<a href={href} target="_blank" rel={isExternal ? "undefined" : "undefined"} />',
+      errors: defaultErrors,
+    },
+    {
+      code: '<a href={href} target="_blank" rel={isExternal ? "noopener" : "undefined"} />',
+      errors: defaultErrors,
+    },
+    {
+      code: '<a href={href} target="_blank" rel={isExternal ? "undefined" : "noopener"} />',
+      errors: defaultErrors,
+    },
   ]),
 });