|
|
|
|
公众号矩阵

Sanitizer:给你的DOM消消毒

业务中经常遇到需要处理「有风险的DOM」的场景,本文会介绍这两者的区别以及为DOM消毒的API —— Sanitizer。

作者:卡颂来源:魔术师卡颂|2021-10-14 07:49

大家好,我卡颂。

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

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

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

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

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

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

转义与消毒

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

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

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

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

什么是escape

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

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

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

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

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

什么是sanitize

对于上面的HTML字符串:

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

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

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

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

首先我们通过Sanitizer构造实例:

  1. const sanitizer = new Sanitizer(); 

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

  1. sanitizer.sanitizeFor("div", str); 

会得到一个HTMLDivElement(即我们传入的容器元素类型),其内部包含一个没有onerror属性的img:

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

丰富的配置

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

  1. const config = { 
  2.   allowElements: [], 
  3.   blockElements: [], 
  4.   dropElements: [], 
  5.   allowAttributes: {}, 
  6.   dropAttributes: {}, 
  7.   allowCustomElements: true
  8.   allowComments: true 
  9. }; 
  10.  
  11. new Sanitizer(config) 

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

  1. const str = `hello <b><i>world</i></b>` 
  2.  
  3. new Sanitizer().sanitizeFor("div", str) 
  4. // <div>hello <b><i>world</i></b></div> 
  5.  
  6. new Sanitizer({allowElements: [ "b" ]}).sanitizeFor("div", str) 
  7. // <div>hello <b>world</b></div> 
  8.  
  9. new Sanitizer({blockElements: [ "b" ]}).sanitizeFor("div", str) 
  10. // <div>hello <i>world</i></div> 
  11.  
  12. new Sanitizer({allowElements: []}).sanitizeFor("div", str) 
  13. // <div>hello world</div> 

allowAttributes是属性白名单,与之对应的dropAttributes是属性黑名单,对于如下配置:

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

代表消毒后的HTML:

  • 只允许span元素拥有style属性
  • 移除所有元素(*通配符代表所有元素)的id属性

兼容性

这么香的API兼容性怎么样呢:

当前只有在Chrome 93之后,开启试验标识后可使用:

  1. 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

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 如何从Windows 10免费升级到Windows 11?
  3. Windows 11正式推送!安装方法、ISO镜像下载都在这里
  4. 突发!苹果正式关闭iOS 14.8验证系统
  5. 你升级了吗?Windows 11正式版发布 体积缩小40%
  6. 更新Windows 11了吗 为啥我到现在还没收到推送
【责任编辑:姜华 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微