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

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

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

【Vue/Nuxt】sanitize-htmlのインストールと使い方

sanitize-htmlとはsanitize-htmlは、HTMLのサニタイザーです！例えば、掲示板のようなユーザーからの入力を受け付けるウェブアプリケーションでは、入力値をHTMLとして解釈する場合に、そのまま表示するとXSSの危険性が

awesome-linus.com

発生したエラー

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

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

解決方法

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

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

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

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

【Vue/Nuxt】sanitize-htmlのインストールと使い方

sanitize-htmlとはsanitize-htmlは、HTMLのサニタイザーです！例えば、掲示板のようなユーザーからの入力を受け付けるウェブアプリケーションでは、入力値をHTMLとして解釈する場合に、そのまま表示するとXSSの危険性が

awesome-linus.com

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についてはこちらの記事が参考になります！

https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage

vuejs.github.io

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

まとめ

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

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