HTMLがレンダリングされず、タグがテキストとして表示されてしまう

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Nuxt.js + HeadlessCMS(microCMS) + FirebaseでCMSのWebサイトを作っています。
HeadlessCMSからAPIを取得する際に、以下のようなHTMLをが発生しました。

APIから取得したHTMLがレンダリングされず、タグがテキストとして表示されてしまっているので解決したく、ご相談させていただきたいです。

発生している問題・エラーメッセージ

HTMLがレンダリングされず、タグがテキストとして表示されてしまっている

該当のソースコード

indexvue
1<div class="py-4">
2 <div class="flex">
3  <h2 class="text-20 main-color font-bold">イベント概要</h2>
4  {{ this.$store.state.content.overview }}
5 </div>
6</div>

json
1{
2            "id": "",
3            "createdAt": "2021-03-02T10:35:36.904Z",
4            "updatedAt": "2021-03-03T13:47:17.542Z",
5            "publishedAt": "2021-03-02T10:35:36.904Z",
6            "revisedAt": "2021-03-03T13:47:17.542Z",
7            "date": "2021/3/4(木)19:00-20:00",
8            "image": {
9                "url": "",
10                "height": 900,
11                "width": 1600
12            },
13            "title": "業界研究セミナーIT",
14            "overview": "<p><strong>登壇者：</strong></p>",
15            "isBoolean": false
16},

試したこと

ここに問題に対して試したことを記載してください。

hoshi-takanori

2021/03/04 06:30 編集

XSS を防ぐために、文字列中のタグらしきものもそのまま表示することになってるんだと思います。とりあえず v-html を使えば良いのでは。(CMS の内容が信頼できるなら、ですが…。) https://jp.vuejs.org/v2/guide/syntax.html#%E7%94%9F%E3%81%AE-HTML

SyuheiFujita

2021/03/04 06:42

hoshiさん！ありがとうございます！上記、Vue.jsのv-htmlを使用しHTMLとして出力することができました。信頼できるコンテンツ出なければ推奨されていないのですね。 >XSS 脆弱性を容易に引き起こすので、ウェブサイトで動的に任意のHTMLを描画することは、非常に危険です。信頼できるコンテンツにだけ HTML 展開を利用してください。ユーザーから提供されたコンテンツに対しては決して使用してはいけません。

hoshi-takanori

2021/03/04 06:50 編集

例えば overview に無限にアラートを表示させる script　タグを埋め込まれたら逮捕者が出るかもですね。 https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%83%AB%E3%83%BC%E3%83%97%E4%BA%8B%E4%BB%B6 (script タグは禁止されてるかも知れませんが、他にもいろいろ悪さをする方法はありますので…。)

SyuheiFujita

2021/03/04 06:59

こんな事件があったとは、知らなかったです。なるほど、こういう問題も実例としてあるんですね...!