【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

Vue.jsの学習におすすめ書籍
Vue.js入門 基礎から実践アプリケーション開発まで
総合評価
( 5 )
メリット
  • Vue.jsを初歩から実践まで徹底的に解説
  • Javascript初心者でも分かりやすい
楽天ブックス
¥3,718 (2024/05/22 16:47時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次