愿所有的美好和期待都能如约而至

如何使用vue-domPurify-html嵌入YouTube视频或任何iframe

发布时间:  来源:互联网  作者:匿名  标签:error How to embed a YouTube video or any iframe with vue-dompurify-html excepti  热度:37.5℃

本文介绍了如何使用vue-domPurify-html嵌入YouTube视频或任何iframe的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已在Nuxt中创建了一个博客项目,并且正在为我的数据库中的description字段使用quill text editor。

从数据库呈现博客的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会在呈现时删除视频。对如何将其列入白名单有什么建议吗?

推荐答案

这将允许您使用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

这篇关于如何使用vue-domPurify-html嵌入YouTube视频或任何iframe的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP