如何使用 vue-dompurify-html 嵌入 YouTube 视频或任何 iframe答案

【问题标题】：How to embed a YouTube video or any iframe with vue-dompurify-html如何使用 vue-dompurify-html 嵌入 YouTube 视频或任何 iframe
【发布时间】：2021-08-16 18:34:42
【问题描述】：

我在 Nuxt 中创建了一个博客项目，并在我的数据库中将 quill text editor 用于 description 字段。

从数据库中渲染博客的description 时，我使用了v-html，但我得到了

34:23 警告 'v-html' 指令可能导致 XSS 攻击 vue/no-v-html

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

为了消除这个警告，我使用了vue-dompurify-html。

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

现在，当我通过 quill 编辑器添加嵌入式视频链接时，dompurify 会在渲染时删除视频。关于如何将其列入白名单的任何想法？

【问题讨论】：

视频是什么样的，在你的 DOM 中代替视频链接的最终结果是什么？
任何 youtube 视频
"description" : " iframe> 描述"，在数据库中描述是这样存储的

标签： vue.js nuxt.js

【解决方案1】：

这将允许您使用 vue-dompurify-html 实现嵌入的 YouTube 视频

<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>

如果你想离开

'<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>'

变成像这样更干净（对于 Vue）的东西

"<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>"

你可以用这个方法

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

从这个提交中找到了答案：https://github.com/eternagame/eternagame.org/commit/dfcfb6bf8fc77495bb17ea9231091ca5d4f2cbad#diff-841254fe75488c1bd4cd7f68f00b4be0e48dcfbc4a16b45847b68295e0e3b27bL13-R25

【讨论】：