react 项目中预防xss攻击的插件 dompurify

一、安装

$ yarn add dompurify 
$ yarn add --dev @types/dompurify 

二、使用

import DOMPurify from 'dompurify';

// 1、处理:
DOMPurify.sanitize(htmlContent)

// 2、之后放进 dangerouslySetInnerHTML 
dangerouslySetInnerHTML={{ __html: cleanHTML }} 

如:

在这里插入图片描述

三、异常处理

使用后,发现 svg 字符串好多 正常属性无法展示打印出使用前后的字符串内容,放在在线对比工具里对比下找出是哪些标签或属性被过滤需要手动添加到允许的参数中,如:

// 将字符串经过 DOMPurify 转为可信任的内容
const safeStr = DOMPurify.sanitize(newData, {
  // 增加信任的标签
  ADD_TAGS: ['use', 'animate'],
  // 增加信任的属性
  ADD_ATTR: ['from', 'to'],
  // 增加允许设置 DATA_URI 的标签
  ADD_DATA_URI_TAGS: ['feImage'],
});

更多 DOMPurify 设置,请参考:https://www.5axxw.com/wiki/content/mi94lt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/775135.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Django自动生成Swagger接口文档 —— Python

1. 前言 当接口开发完成,紧接着需要编写接口文档。传统的接口文档通常都是使用Word或者一些接口文档管理平台进行编写,但此类接口文档维护更新比较麻烦,每次接口有变更,需要手动修改接口文档。在实际的工作中,经常会遇…

Docker:三、安装nginx与tomcat

🍁安装常见服务 🌲安装nginx 🧊1、搜索镜像 Ⅰ.hub docker上查询:https://hub.docker.com/_/nginx Ⅱ. 命令查询:docker search nginx 🧊2、下载镜像 命令:docker pull nginx &#x1f9c…

mmfewshot 框架概述、环境搭建与测试(一)

一、mmfewshot 框架概述 少样本学习的基本流程: 我们将为所有小样本学习任务引入一个简单的基线,以进一步说明小样本学习的工作原理。最明显的流程是微调。它通常包括两个步骤:在大规模数据集上训练模型,然后在小样本数据上进行微…

Matlab进阶绘图第62期—滑珠气泡图

在之前的文章中分享了滑珠散点图的绘制方法: 在此基础上,添加尺寸参数,通过散点的大小表示一个额外的特征,便是滑珠气泡图。 由于Matlab中没有现成的函数绘制滑珠气泡图,因此需要大家自行解决。 本文利用自己制作的B…

【C++】 解决 C++ 语言报错:Invalid Use of Incomplete Type

文章目录 引言 在 C 编程中,“Invalid Use of Incomplete Type” 是一种常见错误。此错误通常在程序试图使用未完全定义的类或结构时发生。这种错误不仅会导致编译失败,还可能导致程序行为不可预测。本文将详细探讨无效使用不完整类型的成因、检测方法及…

信号量(semaphore)

一、信号量简介 前面介绍的消息队列主要用于传输数据:任务与任务之间、任务与中断之间 在有些情况下,不需要传输数据,只需要传递状态即可 • 车开出停车位,你的车可以停进来了 • 课已经录制完成,你可以进行观看了 1.…

学习测4-缺陷管理略

缺陷 缺陷管理工具 jira 禅道 qc cq Bugfree缺陷的类型: 遗漏 missing 该做的没做 错误 error 该做的做错了 额外的实现 extra 不该做的做了软件缺陷的表现形式: 一.软件未实现需求规格说明书要求的功能 二.软件出现了需求规…

windows电脑如何运行python的定时任务

这里需要使用:windows系统设置-控制面板里的计划任务 1.打开计划任务之后,选择:创建基本任务 2.填写名称,这里根据自己具体的项目需求填写,然后点击下一步。 3.选择每日,再点击下一步 4.设置时间&…

【腾讯内推】腾讯2025校招/青云计划/社招——长期有效

及时跟进进度,保证不让简历石沉大海! 涵盖NLP/CV/CG/ML/多模态/数据科学/多媒体等各方向! 定向匹配优质团队/竞争力薪酬/覆盖全球工作地点! 招聘对象: 本硕博:2024年1月-2025年12月毕业的同学 目前最热岗位: 技术研究-自然语言处理 技术研究-计算机视觉 …

【CV炼丹师勇闯力扣训练营 Day24:§7 回溯3】

CV炼丹师勇闯力扣训练营 代码随想录算法训练营第24天 93 复原IP地址 有效 IP 地址 正好由四个整数(每个整数位于 0 到 255 之间组成,且不能含有前导 0),整数之间用 ‘.’ 分隔。 例如:“0.1.2.201” 和 “192.168.…

VBA提取word表格内容到excel

这是一段提取word表格中部分内容的vb代码。 Sub 提取word表格() mypath ThisWorkbook.Path & "\"myname Dir(mypath & "*.doc*")n 4 index of rowsRange("A1:F1") Array("课程代码", "课程名称", "专业&…

【Spring Boot】统一数据返回

目录 统一数据返回一. 概念二.实现统一数据返回2.1 重写responseAdvice方法2.2 重写beforeBodyWriter方法 三. 特殊类型-String的处理四. 全部代码 统一数据返回 一. 概念 其实统一数据返回是运用了AOP(对某一类事情的集中处理)的思维,简单…

【qt】如何获取网卡的信息?

网卡不只一种,有有线的,有无线的等等 我们用QNetworkInterface类的静态函数allInterfaces() 来获取所有的网卡 返回的是一个网卡的容器. 然后我们对每个网卡来获取其设备名称和硬件地址 可以通过静态函数humanReadableName() 来获取设备名称 可以通过静态函数**hardwareAddre…

10元 DIY 一个柔性灯丝氛围灯

之前TikTok上特别火的线性氛围灯Augelight刚出来的时候一度卖到80多美金,国内1688也能到400多人民币。 随着各路国内厂商和DIY创客的跟进,功能变多的同时价格一路下滑,虽然有的质感的确感人,但是便宜啊。 甚至关注的up有把成本搞到…

C语言 -- 操作符详解​

C语言 -- 操作符详解​ 1. 操作符的分类2. 二进制和进制转换​2.1 2进制转10进制​2.1.1 10进制转2进制数字​ 2.2 2进制转8进制和16进制​2.2.1 2进制转8进制​2.2.2 2进制转16进制​ 3. 原码、反码、补码​4. 移位操作符​4.1 左移操作符​ 4.2 右移操作符​5. 位操作符&…

野指针的概念 如果规避野指针

目录 野指针的概念 有关野指针的代码 如何规避野指针 野指针的概念 野指针就是指针指向的位置是不可知的&#xff08;随机的&#xff0c;不正确的&#xff0c;没有明确限制的&#xff09; 有关野指针的代码 指针未初始化&#xff1a; #include<stdio.h> int main…

通过RpmBuild构建redis-5.0.9版本的RPM类型包

系列文章目录 rpmbuild基础知识 文章目录 系列文章目录前言一、rpmbuild相关操作1、安装rpmbuild命令2、安装spec文件检查工具3、查看rpmbuild版本4、编译工具安装5、修改rpm制作包的默认路径 二、资源准备1、创建rpmbuild工作目录2、目录作用解释3、下载redis源码包4、上传re…

nginx.conf配置文件

1、全局模块 worker_processes 1; 工作进程数&#xff0c;一般设置成服务器内核数的2倍&#xff08;一般不超过8个&#xff0c;超过8个反而会降低性能&#xff0c;一般是4个&#xff0c;1-2个也可以&#xff09; 处理进程的过程必然涉及配置文件和展示页面&#xff0c;也就是…

AI Agent技术的最新进展与改变世界的典型项目巡礼

AI Agent 探索 1. AI Agent 技术发展以及典型项目 1.0 前 AI Agent 时代 在学术探索的浩瀚星空中&#xff0c;机器人技术领域的璀璨明珠莫过于Agent技术的深入研究&#xff0c;这一领域历来是创新与突破的温床。回溯至大模型浪潮兴起之前&#xff0c;Agent技术的辉煌篇章便已…