一、引出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>'
      
     

     

      

     
     

      
 
      
     

     

      

     
     

      

       /
       / 推荐这样的方式
      
     
   

经过测试，成功。

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