为强力解决XSS跨站点脚本攻击，原生WEB安全API终于出现了 _脚本攻击

10月18号， W3C中网络平台孵化器小组（Web Platform Incubator Community Group）公布了html Sanitizer API的规范草案。这份草案用来解决浏览器如何解决XSS攻击问题。

文章插图

网络安全中比较让开发者们头疼的一类是XSS跨站点脚本攻击。这种攻击通常指的是通过利用网页开发时留下的漏洞，即将恶意指令代码注入到网页，使用户加载并执行攻击者恶意制造的网页程序。
这些恶意代码没有经过过滤，与网站的正常代码混在一起，浏览器无法分辨哪些内容是可信的，恶意脚本就会被执行。而XSS攻击的核心有两个步骤：1、处理攻击者提交恶意代码；2、浏览器执行恶意代码。
为了解决在这两步恶意攻击中解决这个问题，通常有以下手段，

增加过滤条件
只进行纯前端行渲染，将数据和代码内容分开
对HTML充分转义

以上手段这些步骤繁琐，需要注意的内容也很多。为了让开发者更加便捷地解决XSS攻击的问题，浏览器现提供了原生的XSS攻击消毒能力。
HTML Sanitizer API——这份由谷歌、Mozilla和Cure53联手发起提供的API即将最终完成，通过这个浏览器原生API我们可以更加轻松地保护Web应用程序免受XSS的攻击。
接下来我们一起来了解一下这个安全API吧。
Sanitizer API简介Sanitizer API可以让浏览器直接从网站动态更新的标记中删除恶意代码。当有恶意HTML字符串、和文档或文档片段对象想插入现有DOM之中，我们可以使用HTML Sanitizer API直接将这些内容清理。有点像电脑的安全卫士应用，可以清除风险内容。
使用Sanitizer API有以下三个优点：

减少Web应用程序中跨站点脚本的攻击次数
保证HTML输出内容在当前用户代理中安全使用
Sanitizer API 的可用性很强

文章插图

Sanitizer API的特性Sanitizer API为HTML字符串安全打开新世界大门，将所有的功能大致分类，可以分为以下三个主要特性：
1.对用户输入进行杀毒
Sanitizer API的主要功能是接受字符串并将其转换为更安全的字符串。这些转换后的字符串不会执行额外的JAVAScript，并确保应用程序受到XSS攻击的保护。
2.浏览器内置
该库在浏览器安装的时候一同预装，并在发现bug或出现新的攻击时进行更新。相当于我们的浏览器有了内置的杀毒措施，无需导入任何外部库。
3.使用简洁安全
在使用了Sanitizer API之后，浏览器此时就有了一个强大又安全的解析器，作为一个成熟的浏览器，它知道如何处理DOM中每个元素的活动。相比之下，用JavaScript开发的外部解析器不仅成本高昂，同时很容易跟不上前端大环境的更新速度。
说完了这些使用上的亮点特性，让我们一起来看看这个API的具体用法。

文章插图

Sanitizer API的使用Sanitizer API使用Sanitizer（）方法构造函数，Sanitizer类进行配置。
官方提供了三种基础清理方式：
1、清理隐藏上下文的字符串
Element.setHTML() 用于解析和清理字符串，并立即将其插入DOM，这个方法适用于目标DOM元素已知且HTML内容为字符串的情况。

const $div = document.querySelector('div')const user_input = `<em>Hello There</em><img src=https://www.isolves.com/it/aq/wl/2021-12-07/"" onerror=alert(0)>` // The user string.const sanitizer = new Sanitizer() // Our Sanitizer// We want to insert the HTML in user_string into a target element with id// target. That is, we want the equivalent of target.innerHTML = value, except// without the XSS risks.$div.setHTML(user_input, sanitizer) // Hello There

2、清理给定上下的文字符串
Sanitizer.sanitizeFor() 用于解析、清理和准备稍后准备添加到DOM中的字符串。
适用于HTML内容是字符串，并且目标DOM元素类型已知（例如div、span）的情况。

const user_input = `<em>Hello There</em><img src=https://www.isolves.com/it/aq/wl/2021-12-07/"" onerror=alert(0)>`const sanitizer = new Sanitizer()// Later:// The first parameter describes the node type this result is intended for.sanitizer.sanitizeFor("div", user_input) // HTMLDivElement

需要注意的是， HTMLElement中 .innerHTML 的清理输出结果是字符串格式。