关于在vue中使用v-html存在的问题

雨中人呀

于 2024-04-01 15:11:19 发布

阅读量442

点赞数 1

分类专栏：自己分析记住的东西文章标签： vue.js html 前端

本文链接：https://blog.youkuaiyun.com/weixin_72915006/article/details/137234204

版权

自己分析记住的东西专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在使用Vue编辑器时，如何通过v-html处理富文本，防止XSS攻击，同时提到安装vue-dompurify-html库以保留样式并过滤恶意代码。还解释了XSS攻击类型及其在网页安全中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.一般在编辑器有问题的时候再只读页面常用v-html，关于v-html有一些稍微要注意的点：xss攻击

在使用v-html时为了防止XSS攻击，可以安装 npm install xss 插件，但是我们在渲染富文本编辑的文章时，使用XSS会把除了标签和内容之外的所有东西都给过滤掉，如calss，style过滤掉，那么样式就展现不出来了，导致美观度不够。
3.使用vue-dompurify-html既可以保留样式和防止xss攻击

// 安装：
         npm install vue-dompurify-html

 // 引入：
         import VueDOMPurifyHTML from 'vue-dompurify-html'
         Vue.use(VueDOMPurifyHTML)
 // 使用：
         <div v-dompurify-html="rawHtml"></div>

2.XSS（跨站脚本攻击）是一种常见的网络安全漏洞，攻击者通过在网页中注入恶意脚本来获取用户的敏感信息或控制用户的浏览器。XSS攻击可以分为存储型XSS、反射型XSS和DOM型XSS。