前端vue-dompurify-html替代v-html,避免出现xss攻击

最新推荐文章于 2025-05-13 21:28:31 发布

一路向北qaq

最新推荐文章于 2025-05-13 21:28:31 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 html

本文链接：https://blog.csdn.net/weixin_64310738/article/details/129074757

文章介绍了在Vue中使用v-html的风险，提出了使用vue-dompurify-html插件来防止跨站脚本攻击(XSS)。在Nuxt3项目中，详细阐述了安装和配置该插件的步骤，并提供了安全渲染HTML内容的示例。推荐的方式是通过插件过滤并安全显示包含样式的HTML字符串。

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

一、引出vue-dompurify-html

v-html可能引起跨站脚本攻击（Cross-Site Scripting 简称 XSS）。

所以，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击]。只在可信内容上使用 v-html，永不用在用户提交的内容上。

仅用于展示的内容个人觉得可以使用。为了避免出现特殊情况，本文介绍一个插件“vue-dompurify-html”。

二、npm

vue-dompurify-html - npm

三、nuxt3项目使用

3.1、安装vue-dompurify-html

pnpm add vue-dompurify-html

3.2、plugins/vueInject.js


   
     
      
     
     
      
       /
       / 防止使用v-html发生跨站脚本攻击XSS
      
     

     
      
     
     
      
       import VueDOMPurifyHTML 
       from 
       'vue-dompurify-html'
      
     

     
      
     
     
      
       export 
       default defineNuxtPlugin(nuxtApp 
       =
       > {
      
     

     
      
     
     
      
           nuxtApp.vueApp.
       use(VueDOMPurifyHTML)
      
     

     
      
     
     
      
       })

3.4、业务文件使用


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

     
      
     
     
      
       /
       / 行内再写上行内样式可能会有问题，待继续研究

问题如图：

同样的代码下边方式即可：


   
     
      
     
     
      
       <div v-dompurify-html
       =
       "str1"
       >
       <
       /div
       >
      
     

     
      
     
     
       
      
     

     
      
     
     
      
       let str
       1: 
       string 
       = 
       '<div style="color:red;" class="html"> test1 </div>'
      
     

     
      
     
     
       
      
     

     
      
     
     
      
       /
       / 推荐这样的方式

经过测试，成功。

四、欢迎交流指正，关注我，一起学习。