迹忆客 专注技术分享

在本文中，将详细讨论清理。 还详细说明了用于清理 HTML 中的数据或防止 XSS 攻击的包。

使用 sanitize() 方法在 JavaScript 中清理字符串

Web 应用程序经常需要 HTML 输入。 但是，将它们安全地显示在网页上很困难，因为它们容易受到跨站点脚本 (XSS) 攻击。

Sanitizer 接口的 sanitize() 方法清理 DOM 节点树，删除不需要的元素或属性。 它应该在数据已经作为 DOM 节点可用时使用，例如在清理框架中的 Document 实例时。

默认的 sanitizer() 配置会自动去除与 XSS 相关的输入，包括脚本标签、自定义元素和注释。 可以使用 sanitizer() 构造函数选项自定义此配置。

语法：

sanitize(input)

参数:

• input ：它可以是要清理的 DocumentFragment 或 Document。

返回值：

返回值是经过清理的 DocumentFragment。

我们现在将使用 id username 清理来自 iframe 的数据。

示例:

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById("username")
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

使用 DomPurify 的 sanitize() 方法在 JavaScript 中清理字符串

DOMPurify 是一种用于 HTML、MathML 和 SVG 的仅限 DOM 的 XSS 清理器，速度超快且容忍度过高。 使用和上手也毫不费力。

DOMPurify 是用 JavaScript 构建的，兼容所有现代浏览器（Safari (10+)、Opera (15+)、Internet Explorer (10+)、Edge、Firefox、Chrome 等，它们使用 Blink 或 WebKit）。 它不受 MSIE6 或其他旧版浏览器的影响，并且它要么使用回退，要么什么都不做。

自动化测试现在涵盖 19 种不同的浏览器，后续还会有更多。 另外，Node.js v14.15.1、v15.4.0、v16.13.0、v17.0.0 及更早的版本在JSDOM 上执行DOMPurify 时也会被覆盖。

安全专家凭借在在线攻击和 XSS 方面的丰富经验创建了 DOMPurify。

DOMPurify 做什么

DOMPurify 清理 HTML 并防止 XSS 攻击。 您可以向 DOMPurify 提供一个包含肮脏 HTML 的字符串，它会返回一个包含干净 HTML 的字符串（除非另有设置）。

DOMPurify 将删除任何包含有害 HTML 的内容。 它也相对较快。

它采用浏览器的技术并将它们转换为 XSS 过滤器，因此如果您的浏览器更快，DOMPurify 就会更快。 只需在您的网站上包含 DOMPurify 即可开始使用它。

使用未缩小的开发版本

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

使用经过缩小和测试的生产版本

<script type="text/javascript" src="dist/pure.min.js"></script>

之后，您可以通过运行以下代码来清理字符串：

let clean = DOMPurify.sanitize(dirty);

生成的 HTML 可以使用 innerHTML 写入 DOM 元素或使用 document.write() 直接写入 DOM。 这完全取决于你。

值得注意的是，它默认允许 HTML、SVG 和 MathML。 如果你只需要 HTML，这是一个常见的用例，你也可以轻松地把它放好：

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

请记住，如果您先清理 HTML 然后再编辑它，清理的好处可能会丢失。 如果您在清理后将经过清理的标记发送到另一个库，请确保该库不会自行干扰 HTML。

清理标记后，您可以查看属性 DOMPurify.removed 以查看删除了哪些元素和属性。

如果你使用像 Require.js 这样的 AMD 模块加载器，你可以异步加载这个脚本：

import DOMPurify from 'dompurify';

var clean = DOMPurify.sanitize(dirty);

DOMPurify 可以在服务器端与 Node.js 一起使用，也可以在客户端与 Browserify 或等效翻译器一起使用。 需要 Node.js 4.x 或更高版本。

DOMPurify 旨在支持任何已标记为活动的版本。 同时，它逐步取消对标记为维护的任何版本的支持。

DOMPurify 可能不会立即中断所有维护中的版本，但它会停止针对特定早期版本运行测试。

npm install dompurify

对于 JSDOM v10 或更新版本：

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

对于早于 v10 的 JSDOM 版本：

const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

DOMPurify 支持什么

DOMPurify 默认支持 CSS 和 HTML 自定义数据属性。 它还支持 Shadow DOM 并递归清理 DOM 模板。

它还会清理 HTML 以便与 JQuery $() 和 elm.html() API 一起使用，而不会导致任何问题。