nuxt3：vue-dompurify-html

曾经终败给现在 2024-03-27 13:54 71阅读 0赞

一、引出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>
    // 行内再写上行内样式可能会有问题，待继续研究

问题如图：![00d8db41544741b59b320a26b46d7ca2.png][]

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

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

![4e2d893e26c0458c890ccaa3ea451db8.png][]

经过测试，成功。

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

参考链接：

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

[vue-dompurify-html - npm]: https://www.npmjs.com/package/vue-dompurify-html
[00d8db41544741b59b320a26b46d7ca2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2ad77538d0d74922aa672347a0ffeb84.png
[4e2d893e26c0458c890ccaa3ea451db8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3a638e1ea114450ea4b972c1b4873273.png
[vue_v-html_XSS_snowball_li_-CSDN_vue-dompurify-html]: https://blog.csdn.net/snowball_li/article/details/122177410