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.rhkb.cn/news/370476.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio Run窗口中文乱码解决办法

Android Studio Run窗口中文乱码解决办法 问题描述: AndroidStudio 编译项目时Run窗口中文乱码,如图: 解决方法: 依次打开菜单:Help--Edit Custom VM Options,打开studio64.exe.vmoptions编辑框&#xf…

c/c++ 程序运行的过程分析

c/c编译基础知识 GNU GNU(GNU’s Not Unix!)是一个由理查德斯托曼(Richard Stallman)在1983年发起的自由软件项目,旨在创建一个完全自由的操作系统,包括操作系统的内核、编译器、工具、库、文本编辑器、邮…

ROS——坐标系管理、监听与广播、常用可视化工具

坐标系管理 TF功能包 小海龟追踪实验 ros版本(20.04)的tf安装命令: sudo apt-get install ros-noetic-turtle-tf 解决因python版本出现的无法生成跟随海龟: sudo ln -s /usr/bin/python3 /usr/bin/python ( -s 软链接,符号链接) ln命令(英文全拼&#…

7 动态规划

下面的例子不错: 对于动态规划,能学到不少东西; 你要清楚每一步都在做什么,划分细致就能够拆解清楚! xk. - 力扣(LeetCode) labuladong的算法笔记-动态规划-CSDN博客 动态规划是一种强大的算法…

JDK都出到20多了,你还不会使用JDK8的Stream流写代码吗?

目录 前言 Stream流 是什么? 为什么要用Steam流 常见stream流使用案例 映射 map() & 集合 collect() 单字段映射 多字段映射 映射为其他的对象 映射为 Map 去重 distinct() 过滤 filter() Stream流的其他方法 使用Stream流的弊端 前言 当你某天看…

【图解大数据技术】Hive、HBase

【图解大数据技术】Hive、HBase Hive数据仓库Hive的执行流程Hive架构数据导入Hive HBaseHBase简介HBase架构HBase的列式存储HBase建表流程HBase数据写入流程HBase数据读取流程 Hive Hive是基于Hadoop的一个数据仓库工具,Hive的数据存储在HDFS上,底层基于…

价格预言机的使用总结(一):Chainlink篇

文章首发于公众号:Keegan小钢 前言 价格预言机已经成为了 DeFi 中不可获取的基础设施,很多 DeFi 应用都需要从价格预言机来获取稳定可信的价格数据,包括借贷协议 Compound、AAVE、Liquity ,也包括衍生品交易所 dYdX、PERP 等等。…

Linux 防火墙配置指南:firewalld 端口管理应用案例(二十个实列)

🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧🐧Linux高级管理专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️…

adb不插usb线通过wifi调试

说起做手机开发也有好多年了,说来惭愧,我最近才知道安卓手机是可以不插数据线进行开发调试的。起因是公司近期采购了一批安卓一卡通设备,需要对其进行定制开发APP,但是由于我插USB调试发现没有反应。通过询问厂家才知道可以通过WIFI进行调试。…

去除gif动图背景的工具网站

选择视频或GIF - 取消屏幕 (unscreen.com)https://www.unscreen.com/upload

Upload-Labs靶场闯关

文章目录 Pass-01Pass-02Pass-03Pass-04Pass-05Pass-06Pass-07Pass-08Pass-09Pass-10Pass-11Pass-12Pass-13Pass-14Pass-15Pass-16Pass-17Pass-18Pass-19Pass-20 以下是文件上传绕过的各种思路,不过是鄙人做题记下来的一些思路笔记罢了。 GitHub靶场环境下载&#x…

进程控制-fork函数

一个进程,包括代码、数据和分配给进程的资源。 fork ()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同…

通过卷防水上限,解锁手机的新玩法?IP68之间亦有不同

当手机的日常防水已经成了基本功,防水能力的上限便成了新的赛道。 毕竟再谨慎的人,也可能会有手滑的时候。这个时候,一台有着IP68级防水的手机,就能给你提供一份安心。 【IP68是标准上限,不是手机防水上限】 IP68是…

使用LoFTR模型进行图像配准、重叠区提取

LoFTR模型源自2021年CVPR提出的一篇论文LoFTR: Detector-Free Local Feature Matching with Transformers,其基于pytorch实现图像配准,与基于superpointsuperglue的方法不同, 是一个端到端的图像配准方法。与LoFTR官方库相关的有loftr2onnx库…

【MYSQL】InnoDB引擎为什么选可重复读作为默认隔离级别

InnoDB引擎为什么选可重复读作为默认隔离级别 一般的DBMS系统,默认都会使用读提交(Read-Comitted,RC)作为默认隔离级别,如Oracle、SQL Server等,而MySQL却使用可重复读(Read-Repeatable&#x…

基于GWO灰狼优化的多目标优化算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1灰狼优化算法原理 4.2 多目标优化问题(MOP)的帕累托最优解 4.3 基于GWO的多目标优化算法 5.完整程序 1.程序功能描述 基于GWO灰狼优化的多目标优化算法matlab仿真,目标函数…

浏览器打不开网页、但是电脑有网络,解决办法(win11)

2023.07.06测试有效 华为电脑拿去免费拆机保养后,发现浏览器连接不上网了,但是!微信又能登录得上,也就是说电脑还是有网的。 原文链接 一、问题截图 二、解决方法 1.右键打开“网络和Internet设置” 2.打开“代理” 3.将该选项设…

[数据结构] 基于交换的排序 冒泡排序快速排序

标题:[数据结构] 基于交换的排序 冒泡排序&&快速排序 水墨不写bug (图片来源于网络) 目录 (一)冒泡排序 优化后实现: (二)快速排序 I、实现方法: &#…

24-7-6-读书笔记(八)-《蒙田随笔集》[法]蒙田 [译]潘丽珍

文章目录 《蒙田随笔集》阅读笔记记录总结 《蒙田随笔集》 《蒙田随笔集》蒙田(1533-1592),是个大神人,这本书就是250页的样子,但是却看了好长好长时间,体会还是挺深的,但看的也是不大仔细&…

C++笔试强训2

文章目录 一、选择题二、编程题 一、选择题 和笔试强训1的知识点考的一样,因为输出的是double类型所以后缀为f,m.n对其30个字符所以m是30,精度是4所以n是4,不加符号默认是右对齐,左对齐的话前面加-号,所以答案是-30.4f…