×
028-86922220

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Sanitizer：给你的DOM消消毒

大家好，我卡颂。

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

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

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

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

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

转义与消毒

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

 
 
 
 
      
  
  
  
  1. const str = ""; 
    2.

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

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

什么是escape

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

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

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

什么是sanitize

对于上面的HTML字符串：

 
 
 
 
      
  
  
  
  1. const str = ""; 
    2.

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

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

2.3629s