一个和v-html功能一样且能防止xss攻击的插件

爱分享的Hayes小朋友2024-10-27 14:36

一个和v-html功能一样且能防止xss攻击的插件

- - [vue-dompurify-html 牛皮plus](#vue-dompurify-html 牛皮plus)

在页面上显示富文本内容

在vue中可以用v-html来实现

但是v-html有一个弊端：无法防止xss攻击

现在和大家分享一个插件：

既能实现v-html的功能，又能防止xss攻击（也就是既要还要，嘻嘻嘻）

vue-dompurify-html 牛皮plus

js 复制代码

 npm i vue-dompurify-html

js 复制代码

// main.js
import VueDOMPurifyHTML from "vue-dompurify-html";
app.use(VueDOMPurifyHTML);

js 复制代码

// *.vue
<template>
	<p v-dompurify-html='abc'></p>
</template>

<script setup>
import {  ref} from 'vue'

const abc = ref('<h1>你是你好的</h1><strong>发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题发送的问题</strong>')
</script>

结果就是这样

好了，随手记，一起学习吧