feat: Add ignorePattern to no-v-html

This allows configuring the rule such that certain variables are allowed
in v-html=. For instance, we would like to allowlist variables named
“*Html” (as in the test), where the name already marks them as
containing safe HTML that’s expected to be used with v-html=.

Author: lucaswerkmeister

.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)

lib/rules/no-v-html.js

@@ -4,6 +4,7 @@
  */
 'use strict'
 const utils = require('../utils')
+const { toRegExp } = require('../utils/regexp')
 
 module.exports = {
   meta: {
@@ -14,16 +15,32 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-v-html.html'
     },
     fixable: null,
-    schema: [],
+    schema: [{
+      type: 'object',
+      properties: {
+        ignorePattern: {
+          type: 'string'
+        }
+      }
+    }],
     messages: {
       unexpected: "'v-html' directive can lead to XSS attack."
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0]
+    let ignoredVarMatcher = null
+    if (options?.ignorePattern) {
+      ignoredVarMatcher = toRegExp(options.ignorePattern, { remove: 'g' })
+    }
+
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
       "VAttribute[directive=true][key.name.name='html']"(node) {
+        if (ignoredVarMatcher !== null && node.value.expression.type === 'Identifier' && ignoredVarMatcher.test(node.value.expression.name)) {
+          return
+        }
         context.report({
           node,
           loc: node.loc,

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

@@ -28,6 +28,11 @@ 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="knownHtml"></div></template>',
+      options: [{ignorePattern: '/^(?:html|.+Html)$/'}]
     }
   ],
   invalid: [
@@ -45,6 +50,12 @@ ruleTester.run('no-v-html', rule, {
       filename: 'test.vue',
       code: '<template><section v-html/></template>',
       errors: ["'v-html' directive can lead to XSS attack."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="unsafeString"></div></template>',
+      options: [{ignorePattern: '^(?:html|.+Html)$'}],
+      errors: ["'v-html' directive can lead to XSS attack."]
     }
   ]
 })