feat: Add ignorePattern to no-v-html (#2857)

Co-authored-by: Flo Edelmann <[email protected]>
Co-authored-by: Wayne Zhang <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 4 people

.changeset/purple-lights-invite.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': minor
+---
+
+Added `ignorePattern` option to [`vue/no-v-html`](https://eslint.vuejs.org/rules/no-v-html.html)

docs/rules/no-v-html.md

@@ -32,12 +32,42 @@ This rule reports all uses of `v-html` directive in order to reduce the risk of
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+    "vue/no-v-html": ["error", {
+        "ignorePattern": "^html"
+    }]
+}
+```
+
+- `ignorePattern` ... disables reporting when the `v-html` directive references a variable matching this pattern. By default, all `v-html` uses are forbidden.
+
+### `{ "ignorePattern": "^html" }`
+
+<eslint-code-block :rules="{'vue/no-v-html': ['error', { 'ignorePattern': '^html' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <h2>{{ userName }}</h2>
+  <span v-html="htmlUserLink" />
+
+  <!-- ✗ BAD -->
+  <span v-html="userName" />
+</template>
+```
+
+</eslint-code-block>
 
 ## :mute: When Not To Use It
 
 If you are certain the content passed to `v-html` is sanitized HTML you can disable this rule.
 
+## :couple: Related Rules
+
+- [vue/no-v-text](./no-v-text.md)
+- [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v4.7.0

docs/rules/no-v-text-v-html-on-component.md

@@ -84,6 +84,11 @@ If you use v-text / v-html on a component, it will overwrite the component's con
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/no-v-text](./no-v-text.md)
+- [vue/no-v-html](./no-v-html.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v8.4.0

docs/rules/no-v-text.md

@@ -32,6 +32,11 @@ This rule reports all uses of `v-text` directive.
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/no-v-html](./no-v-html.md)
+- [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.17.0

lib/rules/no-v-html.js

@@ -14,16 +14,40 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-v-html.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignorePattern: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       unexpected: "'v-html' directive can lead to XSS attack."
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0]
+    const ignoreRegEx = options?.ignorePattern
+      ? new RegExp(options.ignorePattern, 'u')
+      : undefined
+
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
       "VAttribute[directive=true][key.name.name='html']"(node) {
+        if (
+          ignoreRegEx &&
+          node.value &&
+          node.value.expression &&
+          node.value.expression.type === 'Identifier' &&
+          ignoreRegEx.test(node.value.expression.name)
+        ) {
+          return
+        }
         context.report({
           node,
           loc: node.loc,

tests/lib/rules/no-v-html.js

@@ -28,23 +28,66 @@ ruleTester.run('no-v-html', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-if="foo" v-bind="bar"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="htmlKnownToBeSafe"></div></template>',
+      options: [{ ignorePattern: '^html' }]
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div v-html="foo"></div></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><ul v-html:aaa="userHTML"></ul></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 36
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><section v-html/></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="unsafeString"></div></template>',
+      options: [{ ignorePattern: '^html' }],
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 37
+        }
+      ]
     }
   ]
 })