【Vue/Nuxt】v-htmlでXSS attackの警告が出たときの対処方法

Nuxt

v-htmlを使用してXSS attackの警告が表示される

以下の記事のように、Vue/Nuxtでsanitize-htmlをインストールして使用した際に、コンソールへXSS attackの警告が表示されたので、その際の備忘録となります!

発生したエラー

発生したエラーがこちらになります。

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

解決方法

解決策としては、XSSの危険性に問題がない場合は、LintをdisableすればOKです!

ユーザーからの投稿内容などが入り得る場合などはXSSの危険があるためサニタイズしてから、Lintをdisableするように注意しましょう!

  • サニタイズって何?
  • Vue/Nuxtで、サニタイズのやり方を知りたい!

という方は、以下の記事で、sanitize-htmlのインストールと使い方を紹介しているので参考にしてください!

lintの設定方法

  • XSSの危険性に問題がない
  • サニタイズが完了している

上記のような状態になったら、警告は無視しても問題ありませんので、Lintをdisableしちゃいましょう!

こちらの<!– eslint-disableの一行を記述すると、次の行のLintを無視することができます!

<!-- eslint-disable-next-line vue/no-v-html -->
<p v-html="$sanitize(something)"></p>

また蛇足ですがVueのtemplate内をpugで書くとなぜか警告が出なくなりました・・!

Lintのdisableについてはこちらの記事が参考になります!

これでLintのWarningを防ぐことができました!

まとめ

今回は、Vue/Nuxtでv-htmlでXSS attackの警告が出たときの対処方法について書きました!

今回紹介した警告が発生した際は、紹介した方法で解決するか、試してみてください!

オススメの関連商品

Note一覧

コメント