こちらの記事では、Vue.jsのv-htmlを使ってデータをHTMLとして表示させる方法についてサンプルコードを用いて解説しています。
v-htmlを使う上での注意点についても記載しているので、理解した上で正しく使いましょう。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
v-htmlとは
まず初めに、Vue.js公式ドキュメントに記載されているv-htmlについて見てみましょう。
要素のinnerHTMLを更新します。コンテンツはプレーンなHTMLとして挿入されることに注意してください。Vueテンプレートとしてコンパイルされません。もしv-htmlを使ってテンプレートを構成しようとしているなら、代わりにコンポーネントを使って解決するように考え直してみてください。
引用元：Vue.js公式ドキュメント
公式ドキュメントに記載されている「要素のinnerHTMLを更新します。コンテンツはプレーンなHTMLとして挿入される」、これを実現させるときにv-htmlを使用します。
要素のinnerHTMLを更新？とVue.jsから入った人は、少し理解しづらいと思います。例えば、dataの中にspanタグで囲われている要素をHTMLとして表示させたい場合、通常通りの{{data名}}として記述してもタグがHTMLをとして解釈されず文字列のまま表示がされてしまいます。
このように文字列ではなく、HTMLとして表示させたい場合にv-htmlを使います。
便利なv-htmlですが、使い方を間違えると非常に危険なため次に説明するもの(XSS攻撃)に該当しないコンテンツにのみ使うようにしましょう。
v-htmlの注意点
XSS攻撃の危険がある
まず、XSS攻撃とは何かについて簡単に説明します。
XSSとは、クロスサイトスクリプティングの略で、Webサイトの脆弱性を突き、攻撃者がそこに悪質なデータを埋め込みスクリプトを実行させる攻撃手法です。
v-htmlを使うことによってこのXSS攻撃の被害に遭ってしまう可能性があります。例えば、ユーザーが自由に書き込めるスペースがあったとして、ユーザーの書き込んだ内容をv-htmlによってwebページに反映させてしまったらどうでしょうか？
悪意のあるユーザーがスクリプトを埋め込みwebページが攻撃されてしまいます。そのため信頼できるコンテンツ以外の場所では使用しない、ユーザーが書き込める場所では使用しないようにしましょう。
スタイルが効かない
scopedは、v-htmlによって動的に生成されたコンテンツにスタイルを適用させません。
その理由は、v-htmlによって生成されたコンテンツは、Vueのテンプレートのコンパイラ処理を通さないからです。
v-htmlにスタイルを当てる場合は、CSSモジュールやグローバルなスタイルに記述します。
v-htmlの書き方
実際にv-htmlを使った書き方と、実行結果について見ていきましょう。
<p v-html="dataを設定"></p>HTMLとして表示させたいタグにv-htmlを設定し、値にHTMLとして表示させたいデータを設定します。
v-htmlを使ったサンプルコード
<div id="app">
<p>{{message1}}</p>
<p v-html="message2"></p>
</div>
new Vue({
el:"#app",
data:function(){
return {
message1:"<span style='color:red'>message</span>",
message2:'<span style="color:red">message</span>'
}
},
})上記のサンプルコードでは、message1ではv-htmlを使わずにデータを表示させたもので、message2ではv-htmlを使ってデータを表示させるものになります。
message1では、spanタグがHTMLとしてではなく文字列として表示がされるため想定している表示と異なりますが、message2ではspanタグがHTMLとして認識されているため、スタイルが適用され赤文字のmessageが表示されます。
まとめ
今回はVue.jsのv-htmlについてご紹介しました。最後にv-htmlのポイントについて軽く復習しましょう。
- データを文字列ではなく、HTMLとして表示させたいときに使う
- XSS攻撃の危険があるため、使う場所を選ぶ必要がある
- scopedで指定しているスタイルが適用されない
