nuxt3:vue-dompurify-html

简介: 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>'
// 推荐这样的方式

经过测试,成功。

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

目录
打赏
0
0
0
0
8
分享
相关文章
Vue.js
【5月更文挑战第27天】Vue.js
61 7
Vue.js有什么特点
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它由尤雨溪(Evan You)在 2014 年创建,并迅速获得了广泛的关注和采用。
73 0
Vue.js是什么
【8月更文挑战第28天】Vue.js是什么
87 0
vue.js
vue.js “【5月更文挑战第29天】”
79 1
VUE.JS
Vue.js - 渐进式的 JavaScript 框架
73 0
VUE3(三十一)html单页面使用VUE3
之前一直在VUE3的框架中使用VUE3。 但是我们在做一个小页面的时候,没有必要独立创建一个VUE项目的时候,我们该如何使用VUE3呢? 下边我这边直接放出一个示例,复制粘贴就能用
487 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等