10月18日，W3CWeb平台孵化器社区组（WebPlatformIncubatorCommunityGroup）公布了HTMLSanitizerAPI规范草案。该草案解决了浏览器如何应对XSS攻击。XSS跨站脚本攻击是网络安全开发者比较头疼的问题之一。此类攻击通常是指利用网页开发过程中留下的漏洞，向网页中注入恶意指令代码，使用户加载并执行攻击者恶意创建的网页程序。这些恶意代码没有经过过滤，混杂在网站的正常代码中。浏览器无法分辨哪些内容是可信的，恶意脚本就会被执行。XSS攻击的核心有两个步骤：1.处理攻击者提交的恶意代码；2.浏览器执行恶意代码。为了解决两步恶意攻击中的这个问题，通常有以下几种方法。添加过滤条件只进行纯前端行渲染，数据和代码内容分离，完全转义HTML。这些步骤很麻烦，需要引起注意。很多。为了方便开发者解决XSS攻击问题，现在浏览器都提供了原生的XSS攻击杀毒能力。HTMLSanitizerAPI-该API由Google、Mozilla和Cure53联合发起，即将完成。通过这个浏览器原生API，我们可以更轻松地保护Web应用程序免受XSS攻击。接下来，我们就来看看这个安全API。SanitizerAPI简介SanitizerAPI允许浏览器直接从网站上动态更新的标记中删除恶意代码。当恶意的HTML字符串、文档或文档片段对象想要插入到现有的DOM中时，我们可以使用HTMLSanitizerAPI直接对这些内容进行消毒。有点像电脑安全卫士应用，可以去除有风险的内容。使用SanitizerAPI有以下三个优点：减少Web应用程序中的跨站点脚本攻击次数确保HTML输出内容在当前用户代理中是安全的使用SanitizerAPI具有很高的可用性SanitizerAPI的特点SanitizerAPI开放HTML字符串安全的新门WorldGate对所有功能进行了粗略的分类，可分为以下三个主要功能：1.净化用户输入SanitizerAPI的主要功能是接受字符串并将其转换为更安全的字符串。这些转换后的字符串不会执行额外的JavaScript，并确保应用程序免受XSS攻击。2.内置浏览器这个库是在安装浏览器的时候预装的，当发现bug或者出现新的攻击时会更新。相当于我们的浏览器内置了杀毒措施，不需要导入任何外部库。3、使用简洁安全使用SanitizerAPI后，浏览器现在拥有了一个强大而安全的解析器。作为一个成熟的浏览器，它知道如何处理DOM中每个元素的活动。相比之下，用JavaScript开发的外部解析器不仅成本高，而且容易跟不上前端环境的更新速度。说完这些使用中的亮点，我们再来看看这个API的具体用法。使用SanitizerAPISanitizerAPI使用Sanitizer()方法构造函数来配置Sanitizer类。官方提供了三种基本的清理方法：1.清理隐藏的上下文字符串Element.setHTML()用于解析和清理字符串，并立即插入到DOM中。该方法适用于目标DOM元素已知且HTML内容为字符串的情况。const$div=文档。querySelector('div')constuser_input=`HelloThere`//用户字符串。constsanitizer=newSanitizer()//我们的Sanitizer//我们想将user_string中的HTML插入到一个带有id//target的目标元素中。也就是说，我们想要target.innerHTML=value的等价物，除了//没有XSS风险。$div.setHTML(user_input,sanitizer)//2.Sanitizer.sanitizeFor()用于解析、清理和准备字符串，以便稍后添加到DOM中。适用于HTML内容为字符串且目标DOM元素类型已知（如div、span）的情况。constuser_input=`HelloThere`constsanitizer=newSanitizer()//Later://第一个参数描述了这个结果的节点类型intendedfor.sanitizer.sanitizeFor("div",user_input)//HTMLDivElement需要注意的是，HTMLElement中.innerHTML的净化输出结果是字符串格式。sanitizer.sanitizeFor("div",user_input).innerHTML//
你好3.清理处理节点对于已经被用户控制的DocumentFragment，Sanitizer.sanitize()可以直接清理DOM树节点。//案例：输入数据作为DOM节点树可用。constsanitizer=newSanitizer()const$userDiv=...;$div.replaceChildren(s.sanitize($userDiv));除了上面提到的三种方法之外，SanitizerAPI还通过去除和过滤属性和标记来修改HTML字符串。举个“栗子”。删除某些标签（_script、marquee、head、frame、menu、object等_）并保留内容标签。删除大部分属性，只保留标签和colspanson， | 标签上的HREF。过滤掉可能导致危险脚本执行的内容。默认情况下，这个安全API只是用来防止XSS的发生。但在某些情况下我们也需要自定义自定义设置，下面介绍一些常用的配置。自定义消毒剂会创建一个配置对象，并在初始化消毒剂API时将其传递给构造函数。constconfig={allowElements:[],blockElements:[],dropElements:[],allowAttributes:{},dropAttributes:{},allowCustomElements:true,allowComments:true};//清理结果由配置自定义newSanitizer(config)下面是一些常用的方法：allowElements保留指定的输入blockElementsblockElements删除需要保留的部分内容dropElementsdropElements删除指定的内容，包括输入的conststr=`hellothere`newSanitizer().sanitizeFor("div",str)// 你好那里 newSanitizer({allowElements:["b"]}).sanitizeFor("div",str)//你好那里 newSanitizer({blockElements:["b"]}).sanitizeFor("div",str)//hellothere newSanitizer({allowElements:[]}).sanitizeFor("div",str)//hello还有 allowAttributes和dropAttributes两个参数可以自定义需要保留或者删除的部分。conststr=`你好`newSanitizer()。sanitizeFor("div",str)//你好 newSanitizer({allowAttributes:{"style":["span"]}}).sanitizeFor("div",str)//你好 newSanitizer({dropAttributes:{"id":["span"]}}).sanitizeFor("div",str)//你好 AllowCustomElements开启是否使用自定义元素conststr=`hellothere`newSanitizer().sanitizeFor("div",str);//newSanitizer({allowCustomElements:true,allowElements:["div","elem"]}).sanitizeFor("div",str);//你好 如果有不配置，直接使用默认配置内容。这个API貌似可以为我们解决很多问题，但是浏览器对它的支持还是有限的，更多的功能还在完善中。我们也期待看到更完善的SanitizerAPI。感兴趣的朋友可以在Chrome93+中通过about://flags/#enable-experimental-web-platform-features启用，目前在Firefox中处于实验阶段。您可以通过在about:config中将dom.security.sanitizer.enabled设置为true来启用它。要了解更多信息，您可以查看：https://developer.mozilla.org/en-US/docs/Web/API/HTML\_Sanitizer\_API根据Verizon的2020年数据泄露调查报告（VerizonBusiness，2020）对数据安全的担忧2010)表明，大约90%的数据泄露是由于跨站点脚本((XSS))和安全漏洞造成的。对于前端开发者来说，面对越来越频繁的网络攻击，除了使用SanitizerAPI等安全机制外，还可以考虑使用SpreadJS等“数据与代码分离”的前端表格控件。
|
