nuxt3：vue-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

// 防止使用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 str1: string = '<div style="color:red;" class="html"> test1 </div>'
 
// 推荐这样的方式

经过测试，成功。

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

参考链接：

vue项目：解决v-html可能带来的XSS是跨站脚本攻击_snowball@li的博客-CSDN博客_vue-dompurify-html