【Vue.js】v-htmlの解説と使用時の注意点！

こんにちは。

野中やすおです。

Vue３を使用する現場にお仕事が決まりましたので、今回の記事ではリハビリがてらv-htmlの解説と使用時の注意点について書いていきます。

この記事の目次

v-htmlとはなにか？

v-htmlとは、Vue.jsのディレクティブの1つで、HTMLコードを動的に生成するために使われます。

const app = Vue.createApp({
  data() {
    return {
      html: "<h1>h1です<h1>",
    };
  },
});

app.mount("#user-goal");

const app = Vue.createApp({

data() {

return {

html: "<h1>h1です<h1>",

};

});

app.mount("#user-goal");

    <section id="user-goal">
      <div v-html="html"></div>
      <p >{{ html }}</p>
    </section>

</section>

上記の例では、htmlというVueインスタンスのデータプロパティがHTMLとして解釈され、その結果が<div>要素に挿入されています。もちろんv-htmlをつかわずに二重括弧でhtmlを表示するとstringの値が表示されます。

公式サイトでも注意書きがされていますが、v-htmlディレクティブは、ユーザーからの入力や外部ソースからのデータを直接受け取る場合において、悪意のあるスクリプトの実行やクロスサイトスクリプティング（XSS）攻撃につながる可能性があるため、慎重に使用する必要があります。

信頼できないコンテンツにはv-htmlディレクティブにバインドしないようにしましょう！

Vue.js - The Progressive JavaScript Framework…

Vue.jsの最新記事8件