我在 Nuxt 中创建了一个博客项目,并且正在使用鹅毛笔文本编辑器 https://github.com/quilljs/quill/为了description
我的数据库中的字段。
渲染博客时description
从数据库中,我使用了v-html
但我得到了
34:23 警告“v-html”指令可能导致 XSS 攻击 vue/no-v-html
<span v-html="blog.description"></span>
为了消除这个警告,我使用了vue-dompurify-html https://www.npmjs.com/package/vue-dompurify-html.
<span v-dompurify-html="blog.description"></span>
现在,当我通过我的鹅毛笔编辑器添加嵌入视频链接时,dompurify 会在渲染时删除视频。关于如何将其列入白名单有什么想法吗?
这将允许您实现嵌入的 YouTube 视频vue-dompurify-html https://www.npmjs.com/package/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>
如果您想从
'<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 https://github.com/eternagame/eternagame.org/commit/dfcfb6bf8fc77495bb17ea9231091ca5d4f2cbad#diff-841254fe75488c1bd4cd7f68f00b4be0e48dcfbc4a16b45847b68295e0e3b27bL13-R25
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)