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

发布时间 2023-09-11 09:57:51作者: cybozu开发者

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

 

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