Sanitizer：给你的DOM消消毒

╰+攻爆jí腚メ 2022-09-16 03:55 24阅读 0赞

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

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

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

*  `escape`（转义）
 *  `sanitize`（消毒）

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

![63d25e757e024cd6e2779ac6a37d6e35.png][]

> 本文内容来自Safe DOM manipulation with the Sanitizer API\[1\]

## 转义与消毒 ##

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

const str = "<img src='' onerror='alert(0)'>";

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

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

## 什么是escape ##

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

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

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

*  `<`的实体为`<`
 *  `>`的实体为`>`
 *  `''`的实体为`"`

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

## 什么是sanitize ##

对于上面的`HTML`字符串：

const str = "<img src='' onerror='alert(0)'>";

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

> 这种直接移除`HTML`字符串中有害的代码（比如`<script>`）的方式被称为`sanitize`（消毒）

需要用到一个`API`——Sanitizer\[2\]。

首先我们通过`Sanitizer`构造实例：

const sanitizer = new Sanitizer();

调用实例的`sanitizeFor`方法，传入容器元素类型以及要消毒的`HTML`字符串：

sanitizer.sanitizeFor("div", str);

会得到一个`HTMLDivElement`（即我们传入的容器元素类型），其内部包含一个没有`onerror`属性的`img`：

![d450f28983df05f4d1417f6848420b16.png][]

默认情况下`Sanitizer`会移除所有可能导致`JS`执行的代码。

## 丰富的配置 ##

`Sanitizer`不仅开箱即用，还提供丰富的白名单、黑名单配置：

const config = {
      allowElements: [],
      blockElements: [],
      dropElements: [],
      allowAttributes: {},
      dropAttributes: {},
      allowCustomElements: true,
      allowComments: true
    };
    
    new Sanitizer(config)

比如，`allowElements`定义元素白名单，只有名单内的元素会被保留，与之对应的`blockElements`是元素黑名单：

const str = `hello <b><i>world</i></b>`
    
    new Sanitizer().sanitizeFor("div", str)
    // <div>hello <b><i>world</i></b></div>
    
    new Sanitizer({allowElements: [ "b" ]}).sanitizeFor("div", str)
    // <div>hello <b>world</b></div>
    
    new Sanitizer({blockElements: [ "b" ]}).sanitizeFor("div", str)
    // <div>hello <i>world</i></div>
    
    new Sanitizer({allowElements: []}).sanitizeFor("div", str)
    // <div>hello world</div>

`allowAttributes`是属性白名单，与之对应的`dropAttributes`是属性黑名单，对于如下配置：

{
      allowAttributes: {"style": ["span"]},
      dropAttributes: {"id": ["*"]}}
    }

代表消毒后的`HTML`：

*  只允许`span`元素拥有`style`属性
 *  移除所有元素（`*`通配符代表所有元素）的`id`属性

![ebd1192ae1e1d0780e30d2c8b99be09b.png][]

## 兼容性 ##

这么香的`API`兼容性怎么样呢：

![037279260e386d1dc9022a32e3b80945.png][] ![1069cd0c5539c6a74bfdd6b87c5ee32a.png][]

当前只有在`Chrome 93`之后，开启试验标识后可使用：

about://flags/#enable-experimental-web-platform-features

虽然原生`Sanitizer`离稳定还遥遥无期，但你可以使用DOMPurify\[3\]库实现类似功能。

## 后记 ##

日常你更倾向使用`escape`还是`sanitize`呢？

### 参考资料 ###

\[1\]

Safe DOM manipulation with the Sanitizer API: https://web.dev/sanitizer/

\[2\]

Sanitizer: https://wicg.github.io/sanitizer-api/

\[3\]

DOMPurify: https://github.com/cure53/DOMPurify

[63d25e757e024cd6e2779ac6a37d6e35.png]: /images/20220828/0f3198f489b144ddaf71b550d2879d31.png
[d450f28983df05f4d1417f6848420b16.png]: /images/20220828/abe7916462be423eb1ba384ad173f236.png
[ebd1192ae1e1d0780e30d2c8b99be09b.png]: /images/20220828/5301c06432034063b111477a153d6a74.png
[037279260e386d1dc9022a32e3b80945.png]: https://img-blog.csdnimg.cn/img_convert/037279260e386d1dc9022a32e3b80945.png
[1069cd0c5539c6a74bfdd6b87c5ee32a.png]: /images/20220828/13931c3382f847178994c2e9d97b042f.png