Sanitizer:给你的DOM消消毒

大家好,我卡颂。

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

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

为了阻止潜在的XSS攻击,有两个选择:

  • escape(转义)
  • sanitize(消毒)

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

Sanitizer:给你的DOM消消毒_第1张图片

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

转义与消毒

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

const str = "";

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

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

什么是escape

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

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

为了将这些保留字符显示为文本(不被解析为HTML代码),可以将其替换为对应的entityHTML实体):

  • <的实体为<
  • >的实体为>
  • ''的实体为"
这种将 HTML字符替换为 entity的方式被称为 escape(转义)

什么是sanitize

对于上面的HTML字符串:

const str = "";

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

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