当前位置: 首页 > news >正文

安全地使用v-html

vue2

1、 使用插件DOMPurify

DOMPurify是一个开源的基于DOM的快速XSS净化工具。输入HTML元素,然后通过DOM解析递归元素节点,进行净化,输出安全的HTML

 <div v-html="sanitizedContent"></div>import DOMPurify from 'dompurify'; data () {return {htmlContent: '<p>Hello, <a href="https://example.com">World</a>!</p>'}},computed: {sanitizedContent () {return DOMPurify.sanitize(this.htmlContent);}},

2、手动写过滤函数

<template><div><div v-html="sanitizedContent"></div></div>
</template><script>
export default {data() {return {htmlContent: '<p>Hello, <a href="https://example.com" target="_blank">World</a>!</p>'};},computed: {sanitizedContent() {return this.sanitizeHTML(this.htmlContent);}},methods: {sanitizeHTML(html) {//允许的标签const allowedTags = ['p', 'a'];//允许的标签属性const allowedAttributes = ['href'];const tempDiv = document.createElement('div');tempDiv.innerHTML = html;tempDiv.querySelectorAll('*').forEach(element => {if (!allowedTags.includes(element.tagName.toLowerCase())) {element.remove();} else {Array.from(element.attributes).forEach(attribute => {if (!allowedAttributes.includes(attribute.name)) {element.removeAttribute(attribute.name);}});}});return tempDiv.innerHTML;}}
};
</script>

属性对象的类型: NamedNodeMap ,表示属性节点 Attr 对象的集合

vue3

  • vue3多了一个方法
    http://www.mobiletrain.org/about/BBS/256788.html
    利用createVNode方法,用递归的方式,创建虚拟DOM,在构建虚拟DOM树之前,可以对输入的HTML内容进行过滤和处理。

相关文章:

安全地使用v-html

vue2 1、 使用插件DOMPurify DOMPurify是一个开源的基于DOM的快速XSS净化工具。输入HTML元素,然后通过DOM解析递归元素节点,进行净化,输出安全的HTML <div v-html"sanitizedContent"></div>import DOMPurify from dompurify; data () {return {htmlCont…...

MongoDB从0到1:高效数据使用方法

MongoDB&#xff0c;作为一种流行的NoSQL数据库。从基础的文档存储到复杂的聚合查询&#xff0c;从索引优化到数据安全都有其独特之处。文末附MongoDB常用命令大全。 目录 1. 引言 MongoDB简介 MongoDB的优势和应用场景 2. 基础篇 安装和配置MongoDB MongoDB基本概念 使…...

Go——运算符,变量和常量,基本类型

一.运算符 Go语言内置的运算符有&#xff1a; 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 1.1 算术运算符 注意&#xff1a;(自增)和--(自减)在go语言中是单独的语句&#xff0c;并不是运算符。 1.2 关系运算符 1.3 逻辑运算符 1.4 位运算符 位运算符对整数在内存…...

js使用canvas实现图片鼠标滚轮放大缩小拖拽预览,显示像素坐标,显示像素值

html代码 todo 实现画矩形框&#xff0c;圆形roi <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title&…...

ArrayList 源码解析和设计思路

ArrayList 一、继承体系二、接口继承三、标记接口四、设计目的五、框架总体结构六、工作原理七、创建List对象初始化&#xff1f;还是add()添加元素初始化?七、add(E e)添加元素八、remove&#xff08;int index&#xff09;删除元素八、线程安全问题 一、继承体系 ArrayLis…...

Win10系统使用IIS服务搭建WebDAV网站结合内网穿透公网访问本地文件

文章目录 推荐1. 安装IIS必要WebDav组件2. 客户端测试3. cpolar内网穿透3.1 打开Web-UI管理界面3.2 创建隧道3.3 查看在线隧道列表3.4 浏览器访问测试 4. 安装Raidrive客户端4.1 连接WebDav服务器4.2 连接成功4.2 连接成功总结&#xff1a; 推荐 前些天发现了一个巨牛的人工智能…...

AWTK 开源串口屏的配置文件

配置文件 每个 HMI 应用程序都需要一个配置文件&#xff0c;用于配置 HMI 的基本信息、服务、持久化、告警信息、历史数据等。 文件位置 design/default/data/settings.json基本配置 name - 名称&#xff08;必须配置&#xff0c;只能用字母、数字、下划线&#xff09; se…...

Spring、SpringMVC、Spring Boot常见注解有哪些?不要混淆了哦

Spring、SpringMVC、Spring Boot常见注解 一、Spring 注解说明Component、Controller、Service、Repository使用在类上用于实例化BeanAutowired使用在字段上用于根据类型依赖注入Qualifier结合Autowired一起使用用于根据名称进行依赖注入Scope标注Bean的作用范围Configuratio…...

在notion里面实现四象限清单

四象限清单是一种时间管理工具&#xff0c;旨在帮助人们根据任务的重要性和紧急性来优先排序他们的工作。这个概念最早由德怀特艾森豪威尔提出&#xff0c;后来又被史蒂芬柯维在他的著作《高效能人士的七个习惯》中进一步普及。四象限清单将任务分为四个类别&#xff1a; 第一…...

【linux】搜索所有目录和子目录下的包含.git的文件并删除

一、linux命令搜索所有目录和子目录下的包含.git的文件 在Linux系统中&#xff0c;要搜索所有目录和子目录下的包含.git的文件&#xff0c;可以使用find命令。find命令允许指定路径、表达式和操作来查找文件。 以下是使用find命令搜索包含.git的文件的方法&#xff1a; 1. 基…...

三、传输层拥塞控制、差错控制

3.1 概述和传输层服务 传输服务和协议&#xff1a; 为运行在不同主机上的应用进程提供逻辑通信&#xff1b; 传输协议运行在端系统-发送方:将应用层的报文分成报文段&#xff0c;然后传递给网络层&#xff1b;接收方&#xff1a;将报文段重组成报文&#xff0c;然后传递给应用…...

主流电商平台数据大规模数据采集接口的实现:电商API接口接入方案和电商数据采集现状

现实问题 1、您是否需要经常统计关注的品牌、产品、平台、卖家的电商数据&#xff0c;包括销量、评价量、收藏量、预售量、运费、赠品和促销信息&#xff0c;手头上没有稳定的数据源&#xff1f; 2、您是否经常需要统计授权卖家和非授权卖家的销售、动销占比&#xff0c;分析…...

Python电梯楼层数字识别

程序示例精选 Python电梯楼层数字识别 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Python电梯楼层数字识别》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应…...

Linux学习:基础开发工具的使用(1)

目录 1. Linux软件包管理器&#xff1a;yum工具1.1 yum是什么&#xff08;软件商城&#xff09;1.2 yum的使用1.3 yum的背景生态 2. 项目开发与集成开发环境3. vim编辑器3.1 vim编辑器的常见模式与模式切换3.3 vim编辑器的使用3.3.1 命令模式下的常见命令&#xff1a;3.3.2 vim…...

在idea中配置tomcat服务器,然后部署一个项日

1.下载tomcat Tomcat下载 点击右边的tomcat8 找到zip点击下载 下载完&#xff0c;解压到你想放置的路径下 2.配置环境变量 打开设置找到高级系统设置点击环境变量 点击新建&#xff0c;变量名输入&#xff1a;CATALINA_HOME&#xff0c;变量值就是Tomcat的安装路径&#x…...

C语言例:设 int a=11; 则表达式 a+=a-=a*a 的值

注&#xff1a;软件为VC6.0 代码如下&#xff1a; #include<stdio.h> int main(void) {int a11, b;b (aa-a*a); //a*a121 -->a-121结果为a-110 -->a-110结果为a-220printf("表达式aa-a*a 的值为&#xff1a; %d\n",b);return 0; } //优先级&#x…...

C++ 中的虚函数和多态性

C 是一种高级编程语言&#xff0c;它具有面向对象编程的特性。在 C 中&#xff0c;虚函数和多态性是非常重要的概念&#xff0c;它们使得继承关系更加灵活和强大。 虚函数是在基类中声明为虚函数的成员函数&#xff0c;其作用是在运行时动态绑定函数的调用。当在派生类中重写基…...

叶顺舟:手机SoC音频趋势洞察与端侧AI技术探讨 | 演讲嘉宾公布

后续将陆续揭秘更多演讲嘉宾&#xff01; 请持续关注&#xff01; 2024中国国际音频产业大会(GAS)将于2024年3.27 - 28日在上海张江科学会堂举办。大会将以“音无界&#xff0c;未来&#xff08;Audio&#xff0c; Future&#xff09;”为主题。大会由中国电子音响行业协会、上…...

SpringBoot之yml与properties配置文件格式的区别

概念: SpringBoot支持两种格式的配置文件,一种是yml,而另一种就是properties,默认的文件名为application.yml或者.properties 为什么有了properties之后还要有yml呢? 因为properties配置文件存在数据冗余性,在properties配置文件中一切配置都需要从头写到为, 并且Key不能重复,…...

【递归搜索回溯专栏】专题二:二叉树中的深搜----二叉树剪枝

本专栏内容为&#xff1a;递归&#xff0c;搜索与回溯算法专栏。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;递归搜索回溯专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代…...

秋招简历模板下载怎么选?6款主流简历模板工具深度测评

秋招季来临&#xff0c;对应届生来说&#xff0c;简历是踏入职场的第一块敲门砖&#xff0c;而一份贴合岗位需求、契合HR筛选思路的简历模板&#xff0c;既能降低简历制作难度&#xff0c;也是提高简历初筛通过率的关键。如今市面上的简历模板工具五花八门&#xff0c;功能定位…...

如何用QtScrcpy实现低延迟Android投屏?5个技巧带你解锁高效多设备控制体验

如何用QtScrcpy实现低延迟Android投屏&#xff1f;5个技巧带你解锁高效多设备控制体验 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/…...

三轴桁架机械手上下料控制系统详细说明书

三轴桁架机械手上下料用西门子smart200 S 020三轴桁架机械手上下料用西门子smart200 ST40 脉冲控制3轴伺服可上西门子触摸屏详细注释&#xff0c;控制系统详细说明书&#xff0c;文档详细讲解组态和指令&#xff0c;I0表&#xff0c;电气原理图G一、概述本说明书旨在详细介绍三…...

为什么90%的词库转换都会失败?输入法词库迁移的终极解决方案:全方位指南

为什么90%的词库转换都会失败&#xff1f;输入法词库迁移的终极解决方案&#xff1a;全方位指南 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 在数字化时代&#x…...

PingFangSC字体工程化:从跨平台渲染挑战到企业级解决方案

PingFangSC字体工程化&#xff1a;从跨平台渲染挑战到企业级解决方案 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 一、问题诊断&#xff1a;揭开字体渲…...

从Flatten到Hierarchy:数字IC后端工程师必须掌握的时序收敛技巧

从Flatten到Hierarchy&#xff1a;数字IC后端工程师必须掌握的时序收敛技巧 在22nm以下工艺节点&#xff0c;单芯片晶体管数量已突破10亿大关。面对如此庞大的设计规模&#xff0c;传统扁平化&#xff08;Flatten&#xff09;流程如同试图用绣花针建造摩天大楼——理论上可行&a…...

Stable Yogi Leather-Dress-Collection效果展示:2.5D视角下皮衣动态褶皱与身体贴合度真实感

Stable Yogi Leather-Dress-Collection效果展示&#xff1a;2.5D视角下皮衣动态褶皱与身体贴合度真实感 想象一下&#xff0c;你是一位动漫角色设计师&#xff0c;需要为角色设计一套充满质感的皮衣。传统的流程需要你手绘线稿、上色、刻画光影和褶皱&#xff0c;整个过程耗时…...

AirPods Pro 3 与 Bose QC Ultra Earbuds 2:无线耳机市场的激烈较量

AirPods Pro 3 与 Bose QC Ultra Earbuds 2&#xff1a;新功能大比拼最新款的 AirPods Pro 3 引入了一系列新功能&#xff0c;提升了音频效果&#xff0c;增强了降噪能力&#xff0c;还具备助听模式、实时翻译、自动切换、空间音频、心率监测等附加功能。而 Bose QuietComfort …...

厦门GEO软件哪家强?实测主流平台,为你揭秘推荐榜单

在数字化转型浪潮中&#xff0c;GEO&#xff08;地理定位优化&#xff09;软件成为企业提升本地化营销效率的关键工具。面对厦门市场上琳琅满目的GEO平台&#xff0c;如何选择一款适配自身业务需求、技术稳定且安全合规的解决方案&#xff0c;成为众多企业面临的难题。作为第三…...

保姆级教程:用Python复现MIT Cheetah的刚体模型与正运动学(附代码)

从零实现MIT Cheetah四足机器人刚体建模与运动学仿真 四足机器人一直是机器人领域的热门研究方向&#xff0c;而MIT Cheetah作为开源四足机器人中的佼佼者&#xff0c;其设计理念和算法实现值得每一位机器人爱好者深入研究。本文将带你从零开始&#xff0c;用Python完整实现MI…...