Sanitizer：给你的DOM消消毒

大家好，我卡颂。

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了维西免费建站欢迎大家使用！

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

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

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

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

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

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

转义与消毒

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

 
 
 
 
  
  
  
  
const str = ""; 
 
 
 

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

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

什么是escape

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

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

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

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

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

什么是sanitize

对于上面的HTML字符串：

 
 
 
 
  
  
  
  
const str = ""; 
 
 
 

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

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