大家好，我卡颂。
业务中常常遇到须要解决有危险的DOM的场景，比方：
- 各种工具的文本粘贴性能
- 须要渲染服务端返回
HTML的场景
为了阻止潜在的XSS攻打，有两个抉择：
escape（本义）sanitize（消毒）
本文会介绍这两者的区别以及为DOM消毒的API —— Sanitizer。
本文内容来自Safe DOM manipulation with the Sanitizer API
本义与消毒
假如，咱们想将这样一段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。
首先咱们通过Sanitizer结构实例：
const sanitizer = new Sanitizer();调用实例的sanitizeFor办法，传入容器元素类型以及要消毒的HTML字符串：
sanitizer.sanitizeFor("div", str);会失去一个HTMLDivElement（即咱们传入的容器元素类型），其外部蕴含一个没有onerror属性的img：
默认状况下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属性
兼容性
这么香的API兼容性怎么样呢：
以后只有在Chrome 93之后，开启试验标识后可应用：
about://flags/#enable-experimental-web-platform-features尽管原生Sanitizer离稳固还遥遥无期，但你能够应用DOMPurify库实现相似性能。
后记
日常你更偏向应用escape还是sanitize呢？
欢送退出人类高质量前端框架钻研群，带飞