templateにコメントを書いて「warning 'v-html' directive can lead to XSS attack vue/no-v-html」の警告を個別に無効化する

参考にさせていただいたページ

• disable eslint in vue template · Issue #260 · vuejs/eslint-plugin-vue · GitHub

範囲を無効化する

以下のように書くと、任意の複数行を無効化できるらしいです。有効化も忘れずにしましょう。

        <!-- eslint-disable vue/no-v-html -->
        <div
          class="hoge"
          v-html="foo"
        />
        <!-- eslint-enable -->

あと以下の sanitize-html とかで、許可するタグや属性を絞ると良いと思います。

github.com

注意点

特に汎用のコンポーネントについては、本当に無効化して良いのか注意が必要です。

また、テキストを改行したいだけであれば、brタグを使わずに \n と white-space: pre-wrap; を使えば v-text でも改行可能です。

br以外だと、aタグを含んだ文字列をv-htmlに渡したいケースというのが特に多いと思いますので、そういった場合は sanitize-html などを使ってXSS対策をするのが良さそうです。