【Nuxt.js】v-htmlでdirective can lead to XSS attack.とwarningが出る対処法

先日NuxtのvueファイルのtemplateをpugからHTMLに下記の備忘録のように書き換えたのですが
HTMLのv-htmlの部分が黄色いwarnの嵐だったので対処法をまとめました。

こんなかんじでv-htmlの部分がwarnになります。

<template>
  <v-main>
    <h1 v-html="title" />
  </v-main>
</template>

<script>
export default {
  data () {
    return {
      title: '<span>タイトル<br>下見出し</span>'
    }
  }
}
</script>

 WARN  ESLintError                                                                                                                                                          friendly-errors 09:53:46

                                                                                                                                                                            friendly-errors 09:53:46
/hogehoge/pages/index.vue
  3:9  warning  'v-html' directive can lead to XSS attack  vue/no-v-html

✖ 1 problem (0 errors, 1 warning)

簡単な対処法

v-html属性に変数をバインドするとプレーンなテキストではなくHTMLを表示させてくれます。
ESLintを設定している場合warnが出力されてしまいます。

warning  'v-html' directive can lead to XSS attack  vue/no-v-html

ここに書かれていますが、ユーザーからの投稿内容などが入り得る場合などはXSSの危険があるため非推奨とされています。

XSSの危険性に問題がなければ非表示すれば大丈夫です。

<template>
  <v-main>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <h1 v-html="title" />
  </v-main>
</template>

もしくはHTMLがなければv-textかマッシュタグ構文に書き換えればOKです。

ESLint側のルールで非表示にする

毎回<!-- eslint-disable-next-line vue/no-v-html -->を書くのは大変なのとソースが汚くなるので、Nuxt内にある.eslintrc.jsのrulesを追加することで非表示にすることもできます。

.eslintrc.js

module.exports = {
　-- 省略 --
  rules: {
    'vue/no-v-html': 'off'
  }
}

これでコードの記入時やyarn dev時にwarnの出力がなくなりました。