Vue.js

【Vue.js】v-htmlを使ってデータをHTMLとして表示させる方法

こちらの記事では、Vue.jsのv-htmlを使ってデータをHTMLとして表示させる方法についてサンプルコードを用いて解説しています。

v-htmlを使う上での注意点についても記載しているので、理解した上で正しく使いましょう。

Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで

本書情報
著者川口 和也
発売日2018/9/22
ページ数893ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門!
導入からアプリケーション開発まで体系的に学ぶ

動画情報
作成者中村 裕太
学習時間5時間
受講者数12,910人
レビュー (2,509件)
動画の詳細はこちら

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で指定しているスタイルが適用されない

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村