nuxt3vue-dompurify-html

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

1.  
   // 防止使用v-html发生跨站脚本攻击XSS
2.  
   import VueDOMPurifyHTML from 'vue-dompurify-html'
3.  
   export default defineNuxtPlugin(nuxtApp => {
4.  
   nuxtApp.vueApp.use(VueDOMPurifyHTML)
5.  
   })

3.4、业务文件使用

1.  
   <div v-dompurify-html="'<div>test</div>'"></div>
2.  
   // 行内再写上行内样式可能会有问题，待继续研究

 问题如图：

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

1.  
   <div v-dompurify-html="str1"></div>
2.  
    
3.  
   let str1: string = '<div style="color:red;" class="html"> test1 </div>'
4.  
    
5.  
   // 推荐这样的方式

经过测试，成功。

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

参考链接：

这篇好文章是转载于：学新通技术网