v-htmlの使い方と注意点

概要

Vue.jsにて<p>テキスト</p>のような文字列をhtmlタグとして認識させたい場合があると思います。
そのような場合に用いるのがv-htmlです。

v-htmlを用いない場合

マスタッシュでの記述

<template>
  <div>{{ sampleText }}</div>
</template>

<script>
export default {
  data() {
    return {
      sampleText: "<h1>Text1</h1> <br /> <h2>Text2</h2>",
    };
  },
};
</script>

出力結果

htmlタグとして認識されず、文字列として表示されます。

v-htmlを用いた場合

v-htmlを用いた記述

<template>
  <span v-html="sampleText"></span>
</template>

出力結果

htmlタグとして認識され、文字サイズ、改行が適用されるようになりました。

注意点

v-htmlを使用する上で注意することが二点あります。

スタイルが効かない

v-htmlによって生成されたコンテンツは、Vueのテンプレートのコンパイラ処理を通さず、scopedは、v-htmlによって動的に生成されたコンテンツにスタイルを適用させません。

v-htmlにスタイルを当てる場合は、CSSモジュールやグローバルなスタイルに記述します。

XSS攻撃の危険性があるということ

XSSとはクロスサイトスクリプティングの略です。
頭文字をとるならCSSでは？　と思うと思いますが、スタイルシートのCSSと誤認されてしまうためXSSになったようです。

xss攻撃とは、脆弱性のあるWebサイトに対して、悪意のある不正なスクリプトを挿入して、サイトに訪れたユーザーに実行させ、サイトではなくユーザーに対して被害がある攻撃です。

v-htmlを使うことによってこのXSS攻撃の被害に遭ってしまう可能性があります。

ユーザーが書き込みを行えるエリアにv-htmlを設定してしまうと、v-htmlは悪意のあるユーザーが書き込んだスクリプトをを埋め込み、webページを攻撃することができてしまいます。

そのため信頼できるコンテンツ以外の場所では使用しない、ユーザーが書き込める場所では使用しないようにするのが良いと思います。

まとめ

v-htmlは文字列をhtmlタグとして認識させられる機能
ただし取り扱いには注意が必要

参考
https://jp.vuejs.org/v2/api/index.html#v-html
https://qiita.com/yuka_pon/items/f9b7fb5053167f465514