[New] jsx-no-script-url: support linkAttributes setting

jsx-eslint · Jan 8, 2024 · 15c3f18 · 15c3f18
1 parent b2e744d
commit 15c3f18
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 17 deletions.
diff --git a/docs/rules/jsx-no-script-url.md b/docs/rules/jsx-no-script-url.md
@@ -23,6 +23,8 @@ Examples of **correct** code for this rule:
 <a href={"javascript:"}></a>
 ```
 
+This rule takes the `linkComponents` setting into account.
+
 ## Rule Options
 
 ```json
@@ -45,6 +47,9 @@ Examples of **correct** code for this rule:
 
 Allows you to indicate a specific list of properties used by a custom component to be checked.
 
+NOTE: This rule now takes into account the `linkComponents` config in [global shared settings](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration), which should be used as the sole source of truth for link components.
+The rule still allows passing link components as rule option for backwards compatibility, but this option is deprecated. If specified, this option will be used together with global `linkComponents` config.
+
 ### name
 
 Component name.

diff --git a/lib/rules/jsx-no-script-url.js b/lib/rules/jsx-no-script-url.js
@@ -5,7 +5,9 @@
 
 'use strict';
 
+const includes = require('array-includes');
 const docsUrl = require('../util/docsUrl');
+const linkComponentsUtil = require('../util/linkComponents');
 const report = require('../util/report');
 
 // ------------------------------------------------------------------------------
@@ -21,26 +23,20 @@ function hasJavaScriptProtocol(attr) {
     && isJavaScriptProtocol.test(attr.value.value);
 }
 
-function shouldVerifyElement(node, config) {
-  const name = node.name && node.name.name;
-  return name === 'a' || config.find((i) => i.name === name);
-}
-
 function shouldVerifyProp(node, config) {
   const name = node.name && node.name.name;
   const parentName = node.parent.name && node.parent.name.name;
 
-  if (parentName === 'a' && name === 'href') {
-    return true;
-  }
+  if (!name || !parentName || !config.has(parentName)) return false;
 
-  const el = config.find((i) => i.name === parentName);
-  if (!el) {
-    return false;
-  }
+  const attributes = config.get(parentName);
+  return includes(attributes, name);
+}
 
-  const props = el.props || [];
-  return node.name && props.indexOf(name) !== -1;
+function parseLegacyOption(config, option) {
+  option.forEach((opt) => {
+    config.set(opt.name, opt.props);
+  });
 }
 
 const messages = {
@@ -82,11 +78,14 @@ module.exports = {
   },
 
   create(context) {
-    const config = context.options[0] || [];
+    const linkComponents = linkComponentsUtil.getLinkComponents(context);
+    if (context.options[0]) {
+      parseLegacyOption(linkComponents, context.options[0]);
+    }
+
     return {
       JSXAttribute(node) {
-        const parent = node.parent;
-        if (shouldVerifyElement(parent, config) && shouldVerifyProp(node, config) && hasJavaScriptProtocol(node)) {
+        if (shouldVerifyProp(node, linkComponents) && hasJavaScriptProtocol(node)) {
           report(context, messages.noScriptURL, 'noScriptURL', {
             node,
           });

diff --git a/tests/lib/rules/jsx-no-script-url.js b/tests/lib/rules/jsx-no-script-url.js
@@ -66,6 +66,24 @@ ruleTester.run('jsx-no-script-url', rule, {
         [{ name: 'Foo', props: ['to', 'href'] }],
       ],
     },
+    {
+      code: '<Foo to="javascript:"></Foo>',
+      errors: [{ messageId: 'noScriptURL' }],
+      settings: {
+        linkComponents: [
+          { name: 'Foo', linkAttribute: 'to' },
+        ],
+      },
+    },
+    {
+      code: '<Foo href="javascript:"></Foo>',
+      errors: [{ messageId: 'noScriptURL' }],
+      settings: {
+        linkComponents: [
+          { name: 'Foo', linkAttribute: ['to', 'href'] },
+        ],
+      },
+    },
     {
       code: `
       <div>
@@ -84,5 +102,27 @@ ruleTester.run('jsx-no-script-url', rule, {
         ],
       ],
     },
+    {
+      code: `
+      <div>
+        <Foo href="javascript:"></Foo>
+        <Bar link="javascript:"></Bar>
+      </div>
+    `,
+      errors: [
+        { messageId: 'noScriptURL' },
+        { messageId: 'noScriptURL' },
+      ],
+      options: [
+        [
+          { name: 'Bar', props: ['link'] },
+        ],
+      ],
+      settings: {
+        linkComponents: [
+          { name: 'Foo', linkAttribute: ['to', 'href'] },
+        ],
+      },
+    },
   ]),
 });