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

一个和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>

结果就是这样

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

相关推荐
猩猩程序员7 分钟前
Go 1.24 全面拥抱 Swiss Table:让内置 map 提速 60% 的秘密
前端
1024小神8 分钟前
vue3 + vite项目,如果在build的时候对代码加密混淆
前端·javascript
轻语呢喃28 分钟前
useRef :掌握 DOM 访问与持久化状态的利器
前端·javascript·react.js
wwy_frontend1 小时前
useState 的 9个常见坑与最佳实践
前端·react.js
w_y_fan1 小时前
flutter_riverpod: ^2.6.1 应用笔记 (一)
前端·flutter
Jerry1 小时前
Compose 界面工具包
前端
Focusbe1 小时前
从0到1开发一个AI助手
前端·人工智能·面试
egghead263161 小时前
React组件通信
前端·react.js
RIKA1 小时前
【前端工具】使用 Node.js 脚本实现项目打包后自动压缩
前端
橙某人1 小时前
🖼️照片展示新境界!等高不等宽自适应布局完整教程⚡⚡⚡
前端·javascript·css