💂
【Vue】sanitize-htmlを使ってv-html使用時のサニタイズを行う
はじめに
Vue.jsでは、データをHTMLにレンダリングする際に、v-htmlディレクティブを使用することができます。しかし、v-htmlを使用すると、入力されたHTMLがそのまま出力されるため、XSS（クロスサイトスクリプティング）攻撃につながる可能性があります。この記事では、v-htmlを安全に使用するためのサニタイズの方法を紹介します。
サニタイズとは
サニタイズとは、入力されたデータを、悪意のあるスクリプトが実行できないようにすることを指します。例えば、HTMLタグやJavaScriptのコードが入力された場合、それらを無効化して、安全な状態にすることが必要です。
実装例
いくつかサニタイズを行うライブラリはありますが、今回はsanitize-htmlを使用してv-htmlで出力されるHTMLのサニタイズを行う例を紹介します。
<template>
<div v-html="sanitizeHtml(htmlContent)"></div>
</template>
<script>
import sanitizeHtml from 'sanitize-html'
export default {
data() {
return {
htmlContent: '<h1>Hello, world!</h1><script>alert("XSS!");</script>'
}
},
methods: {
sanitizeHtml(html) {
return sanitizeHtml(html, {
allowedTags: ['p', 'strong', 'a'], // 許可するタグ
allowedAttributes: {
a: ['href', 'rel', 'target']
}, // 許可する属性
allowedIframeHostnames: [] // 許可するiframeのホスト名
})
}
}
}
</script>
sanitizeHtmlの部分は関数として共通化しておくと便利です。
参考資料
Discussion