首页 > 其他分享 >DOMPurify 使用方法,如何安全地操作DOM |.sanitize()|.innerHTML|TypeScript TS

DOMPurify 使用方法,如何安全地操作DOM |.sanitize()|.innerHTML|TypeScript TS

时间:2023-09-11 10:01:16浏览次数:45  
标签:XSS TypeScript 浏览器 DOM DOMPurify HTML

DOMPurify是一个仅限DOM的,超快速的,超级宽容的XSS清理器,用于HTML,MathML和SVG。

它也非常简单易用和入门。DOMPurify于2014年2月启动,同时已达到v3.0.5版本。

DOMPurify是用JavaScript编写的,适用于所有现代浏览器(Safari(10+),Opera(15+),Edge,Firefox和Chrome - 以及几乎所有使用Blink,Gecko或WebKit的其他浏览器)。它不会在 MSIE 或其他旧版浏览器上中断。它什么都不做。

 

它有什么作用?

 

DOMPurify清理HTML并防止XSS攻击。你可以用充满脏HTML的字符串来输入DOMPurify,它将返回一个带有干净HTML的字符串(除非另有配置)。DOMPurify将删除所有包含危险HTML的内容,从而防止XSS攻击和其他肮脏的内容。它也该死的血腥快。我们使用浏览器提供的技术,并将它们转换为XSS过滤器。您的浏览器越快,DOMPurify 的速度就越快。

 

如何使用它?

 

这很容易。只需在您的网站上包含 DOMPurify。

 

@types/dompurify

<script type="text/javascript" src="src/purify.js"></script>

生成的 HTML 可以使用 DOM 元素 innerHTML 写入 DOM 元素,也可以使用 document.write() .这完全取决于你。请注意,默认情况下,我们允许 HTML、SVG 和 MathML。如果你只需要HTML,这可能是一个非常常见的用例,你也可以轻松设置它:

const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });

 

TypeScript 类型定义在哪里?

 

只要用这个就行  @types/dompurify

 ​

 更多技术小窍门:开发者技术前沿

标签:XSS,TypeScript,浏览器,DOM,DOMPurify,HTML
From: https://www.cnblogs.com/cybozu/p/17692802.html

相关文章

  • mybatisplus中设置乐观锁,首先需要在表结构中添加一个字段表示乐观锁,之后再domain中对
    2023-09-10version字段表示乐观锁 在表结构中添加一个字段表示乐观锁packagecom.hh.domain;importcom.baomidou.mybatisplus.annotation.TableLogic;importcom.baomidou.mybatisplus.annotation.TableName;importcom.baomidou.mybatisplus.annotation.Version;impo......
  • Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里,单步调试
    从Spartacus发起的basesiteocc请求的response获取当前site的数据:从CMSpage的response结果里得到的properties:使用renderer往DOM元素上添加attribute:在这个DynamicAttributeService里设置断点。Angular是一种流行的前端框架,它提供了一套强大的工具......
  • 如何理解虚拟DOM
    虚拟DOM(VirtualDOM)是一种在一些JavaScript库和框架中使用的概念,最为著名的是React。它是一种在内存中构建的轻量级的、存在于JavaScript层面的表示,用于高效地更新和渲染用户界面。虚拟DOM的工作原理如下:初始渲染:当应用程序的状态发生变化时,虚拟DOM会创建一个完整的虚拟DOM树结构......
  • FAILED: SemanticException Unable to determine if hdfs://localhost.localdomain:90
    问题描述在hive数据库里面,使用select语句对表的数据进行查找,就出现了这个错误:问题解决这怎么说呢?就是说,本来想先放一放,之后再解决,在解决了namenode的问题之后,再次打开hive,执行select语句,发现莫名其妙地好了;本人也很是莫名其妙;......
  • 关于 TypeScript 展开运算符在 Angular 应用开发中的应用一例
    笔者最近一直在SAP中国研究院从事Angular开发,我所在的团队负责使用Angular开发SAPCommerceCloud这款产品的界面,项目代号为Spartacus.这是一个开源项目,我们项目的Github地址如下。最近我处理了一个bug,我的代码改动放在这个PullRequest里。下面是这个PullReque......
  • JavaScript—DOM(文档对象模型)
    目录DOM是什么?DOM有什么作用?一、事件理解事件事件怎么写(要做什么就写什么)?实战演练1、页面加载完毕以后,打印一句话2、如果有一个a标签,并给其添加一个点击事件3、事件默认处理程序二、对节点进行增删改查节点是有类型(文件节点,元素节点,属性节点)为节点添加事件的方法如何获得节点?1、获......
  • 统信UOS1060使用UDOM工具箱打开支持长文件名特性
    原文链接:统信UOS1060使用UDOM工具箱打开支持长文件名特性hello,大家好啊,今天给大家带来一篇文章,在统信UOS发布的最新版桌面操作系统1060中,增加了长文件名模式,最长支持255个中文或英文字符,这样对于在windows上使用长文件的文件,迁移到国产操作系统上而言,避免了文件命名失败、文件丢失......
  • 论文解读(CST)《Cycle Self-Training for Domain Adaptation》
    Note:[wechat:Y466551|可加勿骚扰,付费咨询]论文信息论文标题:CycleSelf-TrainingforDomainAdaptation论文作者:HongLiu,JianminWang,MingshengLong论文来源:2021 论文地址:download 论文代码:download视屏讲解:click......
  • 软件测试|Python random模块,超乎想象的强大
    Python的random模块是一个非常强大的工具,用于生成随机数和随机选择。它提供了许多函数和方法,可以满足各种随机化需求。本文将介绍random模块的基本功能和常见用法,以帮助读者更好地理解和利用这个模块。返回整数random.randange()语法如下:random.randrange(stop)random.ran......
  • BetterScroll插件之observeDOM
    在实现移动端页面的上下滑动过程,发现只有进行页面刷新然后从web端切换到移动端,才能够进行滑动,这要从BScroll的原理说起,因为BScroll进行滑动的条件是内容的模块大小需要大于容器的大小,但是明明已经内容大于容器了,为什么还会无法进行滑动呢,原因是在页面一开始加载时没有获取到数据填......