使用 Sanitizer API 安全地操控 DOM

Jack J
Jack J
GitHub

应用会一直处理不受信任的字符串，但安全地将该内容呈现为 HTML 文档的一部分可能很棘手。如果不加以注意，您可能会意外地为恶意攻击者创造跨站脚本攻击 (XSS) 的机会。

为了降低这种风险，新的 Sanitizer API 提案旨在构建一个强大的任意字符串处理器，以便安全地将字符串插入到网页中。

// Expanded Safely !!
$div.setHTML(`<em>hello world</em><img src="" onerror=alert(0)>`, new Sanitizer())

转义用户输入

将用户输入、查询字符串、Cookie 内容等插入到 DOM 中时，必须正确转义字符串。应特别注意使用 .innerHTML 进行 DOM 操作，因为未转义的字符串是 XSS 的典型来源。

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.innerHTML = user_input

如果您转义输入字符串中的 HTML 特殊字符或使用 .textContent 展开该字符串，则不会执行 alert(0)。但是，由于用户添加的 <em> 也会按原样展开为字符串，因此无法使用此方法来保留 HTML 中的文本装饰。

此处最好的做法不是转义，而是清理。

清理用户输入

转义是指将特殊 HTML 字符替换为 HTML 实体。

清理是指从 HTML 字符串中移除语义上有害的部分（例如脚本执行）。

示例

在前面的示例中，<img onerror> 会导致执行错误处理程序，但如果移除了 onerror 处理程序，则可以在 DOM 中安全地展开该处理程序，同时保持 <em> 不变。

// XSS 🧨
$div.innerHTML = `<em>hello world</em><img src="" onerror=alert(0)>`
// Sanitized ⛑
$div.innerHTML = `<em>hello world</em><img src="">`

如需正确清理，必须将输入字符串解析为 HTML，省略被认为有害的标记和属性，并保留无害的标记和属性。

拟议的 Sanitizer API 规范 旨在为浏览器提供此类处理作为标准 API。

Sanitizer API

Sanitizer API 的使用方式如下：

const $div = document.querySelector('div')
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.setHTML(user_input, { sanitizer: new Sanitizer() }) // <div><em>hello world</em><img src=""></div>

不过，{ sanitizer: new Sanitizer() } 是默认实参。

$div.setHTML(user_input) // <div><em>hello world</em><img src=""></div>

值得注意的是，setHTML() 是在 Element 上定义的。作为 Element 的方法，解析上下文是不言自明的（在本例中为 <div>），解析在内部完成一次，结果直接展开到 DOM 中。

如需将清理结果作为字符串获取，您可以使用 setHTML() 结果中的 .innerHTML。

const $div = document.createElement('div')
$div.setHTML(user_input)
$div.innerHTML // <em>hello world</em><img src="">

使用配置进行自定义

Sanitizer API 默认配置为移除会触发脚本执行的字符串。不过，您还可以使用配置对象向清理过程添加自己的自定义设置。

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
new Sanitizer(config)

以下选项用于指定清理结果应如何处理指定的元素。

allowElements：清理器应保留的元素的名称。

blockElements：清理器应移除的元素的名称，同时保留其子元素。

dropElements：清理器应移除的元素的名称，以及其子元素。

const str = `hello <b><i>world</i></b>`

$div.setHTML(str)
// <div>hello <b><i>world</i></b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: [ "b" ]}) })
// <div>hello <b>world</b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({blockElements: [ "b" ]}) })
// <div>hello <i>world</i></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: []}) })
// <div>hello world</div>

您还可以使用以下选项控制清理器是否允许或拒绝指定的属性：

  • allowAttributes
  • dropAttributes

allowAttributes 和 dropAttributes 属性需要属性匹配列表 \- 键是属性名称，值是目标元素列表或 * 通配符的对象。

const str = `<span id=foo class=bar style="color: red">hello</span>`

$div.setHTML(str)
// <div><span id="foo" class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["span"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["p"]}}) })
// <div><span>hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["*"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({dropAttributes: {"id": ["span"]}}) })
// <div><span class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {}}) })
// <div>hello</div>

allowCustomElements 是允许或拒绝自定义元素的选项。如果允许自定义元素，则元素和属性的其他配置仍然适用。

const str = `<custom-elem>hello</custom-elem>`

$div.setHTML(str)
// <div></div>

const sanitizer = new Sanitizer({
  allowCustomElements: true,
  allowElements: ["div", "custom-elem"]
})
$div.setHTML(str, { sanitizer })
// <div><custom-elem>hello</custom-elem></div>

API Surface

与 DomPurify 的比较

DOMPurify 是一个提供清理功能的知名库。Sanitizer API 和 DOMPurify 的主要区别在于，DOMPurify 会将清理结果作为字符串返回，您需要使用 .innerHTML 将其写入 DOM 元素。

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
const sanitized = DOMPurify.sanitize(user_input)
$div.innerHTML = sanitized
// `<em>hello world</em><img src="">`

如果浏览器中未实现 Sanitizer API，DOMPurify 可以作为回退。

DOMPurify 实现有一些缺点。如果返回字符串，则输入字符串会被 DOMPurify 和 .innerHTML 解析两次。这种双重解析会浪费处理时间，但也会导致一些有趣的漏洞，因为第二次解析的结果与第一次解析的结果不同。

HTML 也需要上下文 进行解析。例如，<td> 在 <table> 中有意义，但在 <div> 中没有意义。由于 DOMPurify.sanitize() 仅将字符串作为实参，因此必须猜测解析上下文。

Sanitizer API 改进了 DOMPurify 方法，旨在消除双重解析的需求并明确解析上下文。

API 状态和浏览器支持

Sanitizer API 正在标准化过程中讨论，Chrome 正在实现它。

步骤 状态
1. 创建解释器 完成
2. 创建规范草稿 完成
3. 收集反馈并迭代设计 完成
4. Chrome 源试用 完成
5. 发布 计划在 M105 上发布

Mozilla：认为此提案值得原型设计，并正在积极实现它。

WebKit：请参阅 WebKit 邮件列表 中的回复。

如何启用 Sanitizer API

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 148.
  • Safari: not supported.

Chrome 正在实现 Sanitizer API。在 Chrome 93 或更高版本中，您可以启用 about://flags/#enable-experimental-web-platform-features 标志来试用该行为。在早期版本的 Chrome Canary 版和开发渠道中，您可以使用 --enable-blink-features=SanitizerAPI 启用它。请查看有关如何使用标志运行 Chrome 的说明。

Firefox

Firefox 还将 Sanitizer API 实现为实验性功能。如需启用该功能，请在 about:config 中将 dom.security.sanitizer.enabled 标志设置为 true。

功能检测

if (window.Sanitizer) {
  // Sanitizer API is enabled
}

反馈

如果您试用了此 API 并有一些反馈，我们很乐意倾听您的意见。在 Sanitizer API GitHub 问题 中分享您的想法，并与规范作者和对此 API 感兴趣的人士进行讨论。

如果您在 Chrome 的实现中发现任何 bug 或意外行为，请提交 bug 进行报告。选择 Blink>SecurityFeature>SanitizerAPI 组件并分享详细信息，以帮助实现者跟踪问题。

演示

如需查看 Sanitizer API 的实际应用，请查看 Sanitizer API Playground（作者：Mike West）：

参考