How to embed a YouTube video or any iframe with vue-dompurify-html

Question

I have created a blog project in Nuxt and I am using quill text editor for the description field in my database.

When rendering blog's description from database, I used v-html but I got

34:23 warning 'v-html' directive can lead to XSS attack vue/no-v-html

<span v-html="blog.description"></span>

To remove this warning I used vue-dompurify-html.

<span v-dompurify-html="blog.description"></span>

Now, when I add an embedded video link through my quill editor, dompurify removes the video while rendering. Any ideas on how to whitelist this?

Answer 1

This will allow you to achieve an embedded YouTube video with vue-dompurify-html

<template>
  <div>
    <div v-dompurify-html="test"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

Vue.use(VueDOMPurifyHTML, {
  default: {
    ADD_TAGS: ['iframe'], // this one whitelists Youtube
  },
})

/* eslint-disable no-useless-escape */
/* eslint-disable prettier/prettier */

export default {
  data() {
    return {
      test: '<iframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"\https://www.youtube.com/embed/9_MzJ9QkiHU\"></iframe><p><br></p><p><br></p><p>Description</p>'
    }
  }
}
</script>

---

In case you want to go from

'<iframe class=\"ql-video\" frameborder=\"0\" allowfullscreen=\"true\" src=\"\https://www.youtube.com/embed/9_MzJ9QkiHU\"></iframe><p><br></p><p><br></p><p>Description</p>'

into something more clean (for Vue) like this

"<iframe class='ql-video' frameborder='0' allowfullscreen='true' src='https://www.youtube.com/embed/9_MzJ9QkiHU'></iframe><p><br></p><p><br></p><p>Description</p>"

you can use this method

string.replaceAll('"', "'")

---

The answer to this was found from this commit: https://github.com/eternagame/eternagame.org/commit/dfcfb6bf8fc77495bb17ea9231091ca5d4f2cbad#diff-841254fe75488c1bd4cd7f68f00b4be0e48dcfbc4a16b45847b68295e0e3b27bL13-R25