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の警告が出たときの対処方法について書きました!
今回紹介した警告が発生した際は、紹介した方法で解決するか、試してみてください!
コメント