一、引出vue-dompurify-html
v-html可能引起跨站脚本攻击(Cross-Site Scripting 简称 XSS)。
所以,在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击]。只在可信内容上使用 v-html,永不用在用户提交的内容上。
仅用于展示的内容个人觉得可以使用。为了避免出现特殊情况,本文介绍一个插件“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>' // 推荐这样的方式
经过测试,成功。
四、欢迎交流指正,关注我,一起学习。