Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

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

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

範囲を無効化する

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

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

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

github.com

注意点

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

個人的には無効化しなくて良い気がするけど。

あんまり沢山warningが出てたら、そんなに頻繁に目視確認できないと思うし、せいぜいたまに確認するぐらいになってしまうので悩ましい。

全てをコツコツ無効化するぐらいなら、eslintrc.jsの設定を変更した方が良いわけで...。

用法、用量を守って正しくお使いください。