Sanitizer：给你的DOM消消毒

大家好，我卡颂。

业务中经常遇到需要处理有风险的DOM的场景，比如：

• 各种工具的文本粘贴功能
• 需要渲染服务端返回HTML的场景

为了阻止潜在的XSS攻击，有两个选择：

• escape（转义）
• sanitize（消毒）

本文会介绍这两者的区别以及为DOM消毒的API —— Sanitizer。

本文内容来自 Safe DOM manipulation with the Sanitizer API

转义与消毒

假设，我们想将这样一段HTML字符串插入DOM：

const str = "";

如果直接将其作为某个元素的innerHTML，img的onerror回调执行JS代码的能力会带来XSS风险。

一种常见解决方案是：转义字符串。

什么是escape

浏览器会将一些保留字符解析为HTML代码，比如：

• <被解析为标签的开头
• >被解析为标签的结尾
• ''被解析为属性值的开头和结尾

为了将这些保留字符显示为文本（不被解析为HTML代码），可以将其替换为对应的entity（HTML实体）：

• <的实体为<
• >的实体为>
• ''的实体为"

这种将 HTML字符替换为 entity的方式被称为 escape（转义）

什么是sanitize

对于上面的HTML字符串：

const str = "";

除了转义''来规避XSS风险，还有一种更直观的思路：直接过滤掉onerror属性。

这种直接移除 HTML字符串中有害的代码（比如