【Vue.js】v-htmlディレクティブを用いてHtmlを出力する。

はじめに

フロントエンドにVue.jsを用いている際にHtmlを動的に出力する処理について備忘録として残します。

v-htmlディレクティブを用いる

結論から言うとv-htmlディレクティブを用いることで対応が可能です。
利用例としては以下のような感じとなります。

<template>
    <div v-html="testHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      testHtml: ""
    };
  },
  created(){
    // testHtmlへHtmlを入れる処理
    // 値の例は<p>テスト</p>等のHtml
   this.testHtml = ・・・
  }
}
</script>

そのままだとXSS脆弱性あり

非常に便利ではあるのですが、公式ドキュメントでも記載されているように、XSS攻撃を受ける可能性があります。

v3.ja.vuejs.org

そのため、利用箇所を限定したり、攻撃に繋がりそうな文字列は別途サニタイズするような処理を実装(※)する必要があります。

※個人的には以下のsanitize-htmlというサニタイザーが便利なのでこちらを利用しています。

github.com

おわりに

以上、v-htmlディレクティブを用いてHtmlを出力する内容に関する解説でした。