Vuejs: V-HTML data binding of html data against eslint rule

Question

I am using the following method to bind html and display in my page. It is working perfectly, however i receive a warning from my eslint that 'v-html' directive can lead to XSS attack.eslint(vue/no-v-html)

  <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>

Then i change it following method. But i not able to render html tag.

 <button
            id="foreignerBtn"
            class="tabButton"
            @click="foreignerClick"
          >{{ textContent2 }}</button>

Answer 1

As Decade Moon mentions you can disable the rule if the content passed to v-html is sanitized HTML.

https://eslint.vuejs.org/rules/no-v-html.html

Disable the rule by wrapping the html in

<!-- eslint-disable vue/no-v-html -->
<button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>
<!--eslint-enable-->

Answer 2

As stated in the other answer, you can disable the warning but a good practice is to make sure the rule is rightfully disabled.

To do so, you can use dompurify that will parse the HTML you are giving to the browser, remove any malicious part and display it safely.

The issue is still there but you can use RisXSS which is an ESLint plugin that will warn the uses of v-html if you do not sanitize it before (in a sense, this is an improved version of vue/no-v-html ESLint rule).

To do so, install dompurify and eslint-plugin-risxss:

npm install dompurify eslint-plugin-risxss

Add risxss to your ESLint plugins then use DOMPurify:

<template>
    <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="sanitizedTextContent2"
        <!-- no warning, good to go -->
    ></button>
    <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
        <!-- warning here -->
    ></button>
</template>
<script>
import DOMPurify from 'dompurify';

export default {
    data () {
    return {
        sanitizedTextContent2: DOMPurify.sanitize(textContent2)
    }
    }
}
</script>

Disclaimer: I am a contributor of RisXSS plugin.