一种用于防范React前端框架的跨站脚本攻击XSS的方法及系统与流程

本发明涉及web技术领域，并且更具体地，涉及一种用于防范react前端框架的跨站脚本攻击xss的方法及系统。

背景技术：

在科学技术日新月异发展的今天，计算机在人们的日常生活中发挥重要的作用，但是计算机在带来便利的同时也伴随着安全威胁。网络是人与世界交互的媒介，通过网络人们可以在网上购物，娱乐，办公，传递信息等，无形之中，人们在网上产生大量的数据，包括很多重要的数据，如个人隐私、具有商业价值的企业资料、国家机密。在这些重要数据的诱惑下，一些不法分子在网上实施各种网络攻击，以达到盗窃数据或权限的目的。其中，xss攻击是网络上最常见的攻击手段之一。

跨站脚本攻击(cross-sitescripting,xss)是一类注入问题，恶意脚本被注入到健康的、可信任的网站。当一个攻击者通过一个网站应用程序，以浏览器端脚本的形式，给另一端的用户发送恶意代码时，xss攻击就发生了。允许这种攻击成功的缺陷广泛存在于各个大小网站，只要这个网站某个页面将用户的输入包含在它生成的动态输出页面中并且未经验证或编码转义，这个缺陷就存在。攻击者使用xss发送恶意脚本给一个不持怀疑态度的用户，用户端的浏览器没法知道脚本可不可信，从而执行该js脚本。因为浏览器认为该脚本来自于一个可信赖的网站，导致恶意脚本可以访问任何cookies信息、会话令牌、或者其他由浏览器保存的敏感信息，甚至可以修改当前网页内容。

因此，需要一种能够防范xss攻击的方法。

技术实现要素：

本发明提出一种用于防范react前端框架的跨站脚本攻击xss的方法及系统，以解决如何防范跨站脚本攻击xss的问题。

为了解决上述问题，根据本发明的一个方面，提供了一种用于防范react前端框架的跨站脚本攻击xss的方法，其特征在于，所述方法包括：

根据设置的过滤规则配置domparser接口文件；

对用户提交的请求进行预处理，并将经过预处理的请求发送至服务器，以接收源码文件；

利用domparser接口对接收的源码文件中包含的预设的关键字进行过滤处理，以过滤掉恶意代码，防范跨站脚本攻击xss。

优选地，其中所述过滤规则包括：

根据预设的关键字利用start()函数获取源码文件中字符串的标签、属性和标签类型；

利用end()函数闭合获取的源码文件中字符串的标签；

利用chars()函数获取源码文件中字符串的标签内的文本，并将所述文件进行拼接后返回到results中；

利用comment()函数获取与预设的关键字对应的注释，并将所述注释进行拼接后返回到results中。

优选地，其中所述对用户提交的请求进行预处理，包括：

对用户提交的请求的信息进行可靠的输入验证，对用户提交的请求的信息中的在预设长度阈值范围内、采用预设格式以及预设字符的信息进行提交；其中，所述请求包括：url、查询关键字、http头和post数据。

优选地，其中所述源码文件的格式包括：html、xml和xhtml。

优选地，其中所述预设的关键字包括：存在安全隐患的标签关键字和属性关键字，

所述标签关键字包括：script标签、style标签、link标签、iframe标签和frame标签；

所述属性关键字包括：onerror属性、onblur属性和onclick属性。

优选地，其中所述方法还包括：

对经过过滤处理的源码文件进行语法解析，建立相应的内部数据结构，构建渲染树，并对所述渲染树中各个元素进行位置计算和样式计算，以能够根据所述渲染树对显示页面进行渲染。

根据本发明的另一个方面，提供了一种用于防范react前端框架的跨站脚本攻击xss的系统，其特征在于，所述系统包括：

接口文件配置单元，用于根据设置的过滤规则配置domparser接口文件；

源码文件获取单元，用于对用户提交的请求进行预处理，并将经过预处理的请求发送至服务器，以接收源码文件；

过滤处理单元，用于利用domparser接口对接收的源码文件中包含的预设的关键字进行过滤处理，以过滤掉恶意代码，防范跨站脚本攻击xss。

优选地，其中所述过滤规则包括：

根据预设的关键字利用start()函数获取源码文件中字符串的标签、属性和标签类型；

利用end()函数闭合获取的源码文件中字符串的标签；

利用chars()函数获取源码文件中字符串的标签内的文本，并将所述文件进行拼接后返回到results中；

利用comment()函数获取与预设的关键字对应的注释，并将所述注释进行拼接后返回到results中。

优选地，其中所述源码文件获取单元，对用户提交的请求进行预处理，包括：

对用户提交的请求的信息进行可靠的输入验证，对用户提交的请求的信息中的在预设长度阈值范围内、采用预设格式以及预设字符的信息进行提交；其中，所述请求包括：url、查询关键字、http头和post数据。

优选地，其中所述源码文件的格式包括：html、xml和xhtml。

优选地，其中所述预设的关键字包括：存在安全隐患的标签关键字和属性关键字，

所述标签关键字包括：script标签、style标签、link标签、iframe标签和frame标签；

所述属性关键字包括：onerror属性、onblur属性和onclick属性。

优选地，其中所述系统还包括：

渲染单元，用于对经过过滤处理的源码文件进行语法解析，建立相应的内部数据结构，构建渲染树，并对所述渲染树中各个元素进行位置计算和样式计算，以能够根据所述渲染树对显示页面进行渲染。

本发明提供了一种用于防范react前端框架的跨站脚本攻击xss的方法及系统，包括：根据设置的过滤规则配置domparser接口文件；对用户提交的请求进行预处理，并将经过预处理的请求发送至服务器，以接收源码文件；利用domparser接口对接收的源码文件中包含的预设的关键字进行过滤处理，以过滤掉恶意代码，防范跨站脚本攻击xss。本发明通过自定义过滤标签和属性确定过滤规则，并根据过滤规则对domparser接口进行配置，利用react的特性，封装成即插即用的工具组件，方便程序内部的调用，在一处配置过滤规则可以在多处使用，只需导入该方法即可直接调用，运用灵活，解析效率高，渲染速度快；使用domparser的htmlparser方法，可以有效地过滤掉恶意代码，防止xss攻击，并且domparser具有较高的过滤性能，使用domparser可以在一定程度上提升页面的加载速度，提高用户的上网体验。

附图说明

通过参考下面的附图，可以更为完整地理解本发明的示例性实施方式：

图1为根据本发明实施方式的用于防范react前端框架的跨站脚本攻击xss的方法100的流程图；

图2为根据本发明实施方式的利用domparser进行过滤和解析的示意图；以及

图3为根据本发明实施方式的用于防范react前端框架的跨站脚本攻击xss的系统300的结构示意图。

具体实施方式

现在参考附图介绍本发明的示例性实施方式，然而，本发明可以用许多不同的形式来实施，并且不局限于此处描述的实施例，提供这些实施例是为了详尽地且完全地公开本发明，并且向所属技术领域的技术人员充分传达本发明的范围。对于表示在附图中的示例性实施方式中的术语并不是对本发明的限定。在附图中，相同的单元/元件使用相同的附图标记。

除非另有说明，此处使用的术语(包括科技术语)对所属技术领域的技术人员具有通常的理解含义。另外，可以理解的是，以通常使用的词典限定的术语，应当被理解为与其相关领域的语境具有一致的含义，而不应该被理解为理想化的或过于正式的意义。

图1为根据本发明实施方式的用于防范react前端框架的跨站脚本攻击xss的方法100的流程图。如图1所示，本发明的实施方式提供的用于防范react前端框架的跨站脚本攻击xss的方法，通过自定义过滤标签和属性确定过滤规则，并根据过滤规则对domparser接口进行配置，利用react的特性，封装成即插即用的工具组件，方便程序内部的调用，在一处配置过滤规则可以在多处使用，只需导入该方法即可直接调用，运用灵活，解析效率高，渲染速度快；使用domparser的htmlparser方法，可以有效地过滤掉恶意代码，防止xss攻击，并且domparser具有较高的过滤性能，使用domparser可以在一定程度上提升页面的加载速度，提高用户的上网体验。本发明的实施方式提供的用于防范react前端框架的跨站脚本攻击xss的方法100从步骤101处开始，在步骤101根据设置的过滤规则配置domparser接口文件。

优选地，其中所述过滤规则包括：

根据预设的关键字利用start()函数获取源码文件中字符串的标签、属性和标签类型；

利用end()函数闭合获取的源码文件中字符串的标签；

利用chars()函数获取源码文件中字符串的标签内的文本，并将所述文件进行拼接后返回到results中；

利用comment()函数获取与预设的关键字对应的注释，并将所述注释进行拼接后返回到results中。

优选地，其中所述预设的关键字包括：存在安全隐患的标签关键字和属性关键字，

所述标签关键字包括：script标签、style标签、link标签、iframe标签和frame标签；

所述属性关键字包括：onerror属性、onblur属性和onclick属性。

本发明的实施方式是在使用react作为前端框架的基础上，利用domparser技术，自定义过滤规则，以实现在html、xml或xhtml页面渲染时过滤存在xss恶意攻击的代码。

react是用于构建用户界面的javascript库，起源于facebook的内部项目，来架设instagram的网站。react使用组件化开发方式，符合现代web开发的趋势,技术成熟，社区完善，配件齐全，适用于大型web项目。

domparser接口提供了将源代码从字符串解析为文档对象模型(documentobjectmodel,dom)的功能，在react中，使用domparser的htmlparser方法，可以有效地过滤掉恶意代码，防止xss攻击。

对于html文档，可以通过设置element.innerhtml和outerhtml属性的值，将部分dom替换为从html构建的新dom树，还可以读取这些属性以获取对应于相应dom子树的html片段。

本发明的实施方式提供的domparser过滤原则，包括：

1.对用户输入的数据进行过滤，包括script标签、style标签、link标签、iframe标签和frame标签；其中，过滤script标签用于防止恶意脚本执行；过滤style和link标签用于防止恶意篡改样式；过滤iframe和frame标签用于防止恶意弹窗；

2.对标签存在的攻击性的属性进行过滤，包括：onerror属性、onblur属性和onclick属性等，用于防止恶意事件执行。

优选地，在步骤102对用户提交的请求进行预处理，并将经过预处理的请求发送至服务器，以接收源码文件。

优选地，其中所述对用户提交的请求进行预处理，包括：

对用户提交的请求的信息进行可靠的输入验证，对用户提交的请求的信息中的在预设长度阈值范围内、采用预设格式以及预设字符的信息进行提交；其中，所述请求包括：url、查询关键字、http头和post数据。

优选地，其中所述源码文件的格式包括：html、xml和xhtml。

在本发明的实施方式中，使用该方式前端过滤不安全的标签以及不安全的属性。对所有用户提交内容进行可靠的输入验证，包括对url、查询关键字、http头、post数据等，仅接受指定长度范围内、采用适当格式、采用所预期的字符的内容提交，对其他的一律过滤。

优选地，在步骤103利用domparser接口对接收的源码文件中包含的预设的关键字进行过滤处理，以过滤掉恶意代码，防范跨站脚本攻击xss。

优选地，其中所述方法还包括：

对经过过滤处理的源码文件进行语法解析，建立相应的内部数据结构，构建渲染树，并对所述渲染树中各个元素进行位置计算和样式计算，以能够根据所述渲染树对显示页面进行渲染。

下面为xss攻击的代码实例，以此实例说明domparser的解析过滤方式。

xss攻击代码：

此时，当recat组件将用户数据渲染显示时，会导致恶意的script脚本执行，受到xss攻击。

图2为根据本发明实施方式的利用domparser进行过滤和解析的示意图。如图2所示，在接收到用户提交的输入数据时，利用配置好的domparser接口中的四个对数据处理的函数，分别是：start()函数、end()函数、chars()函数和comment()函数，进行解析过滤，过滤xss攻击脚本后渲染用户输入数据，包括：

step1：start函数获取到字符串的标签(tag)、属性(attrs)和标签类型(unary)，根据预设的关键字对获取的标签和属性进行过滤：

step2：利用end()函数获取到标签(tag)，并将标签闭合，包括：

end:function(tag){

results+＝"</"+tag+">"；

},

step3：利用chars()函数获取到标签内的文本，并将文本拼接到返回的results中，包括：

chars:function(text){

results+＝text；

},

step4：利用comment()函数获取到注释，并将注释拼接到返回的results中，包括：

comment:function(text){

results+＝"<！--"+text+"-->"；

}

图3为根据本发明实施方式的用于防范react前端框架的跨站脚本攻击xss的系统300的结构示意图。如图3所示，本发明的实施方式提供的用于防范react前端框架的跨站脚本攻击xss的系统300，包括：接口文件配置单元301、源码文件获取单元302和过滤处理单元303。优选地，所述接口文件配置单元301，用于根据设置的过滤规则配置domparser接口文件。

优选地，其中所述过滤规则包括：根据预设的关键字利用start()函数获取源码文件中字符串的标签、属性和标签类型；利用end()函数闭合获取的源码文件中字符串的标签；利用chars()函数获取源码文件中字符串的标签内的文本，并将所述文件进行拼接后返回到results中；利用comment()函数获取与预设的关键字对应的注释，并将所述注释进行拼接后返回到results中。

优选地，所述源码文件获取单元302，用于对用户提交的请求进行预处理，并将经过预处理的请求发送至服务器，以接收源码文件。

优选地，其中所述源码文件获取单元，对用户提交的请求进行预处理，包括：对用户提交的请求的信息进行可靠的输入验证，对用户提交的请求的信息中的在预设长度阈值范围内、采用预设格式以及预设字符的信息进行提交；其中，所述请求包括：url、查询关键字、http头和post数据。

优选地，其中所述源码文件的格式包括：html、xml和xhtml。

优选地，所述过滤处理单元303，用于利用domparser接口对接收的源码文件中包含的预设的关键字进行过滤处理，以过滤掉恶意代码，防范跨站脚本攻击xss。

优选地，其中所述预设的关键字包括：存在安全隐患的标签关键字和属性关键字。所述标签关键字包括：script标签、style标签、link标签、iframe标签和frame标签；所述属性关键字包括：onerror属性、onblur属性和onclick属性。

优选地，其中所述系统还包括：渲染单元，用于对经过过滤处理的源码文件进行语法解析，建立相应的内部数据结构，构建渲染树，并对所述渲染树中各个元素进行位置计算和样式计算，以能够根据所述渲染树对显示页面进行渲染。

本发明的实施例的用于防范react前端框架的跨站脚本攻击xss的系统300与本发明的另一个实施例的用于防范react前端框架的跨站脚本攻击xss的方法100相对应，在此不再赘述。

已经通过参考少量实施方式描述了本发明。然而，本领域技术人员所公知的，正如附带的专利权利要求所限定的，除了本发明以上公开的其他的实施例等同地落在本发明的范围内。

通常地，在权利要求中使用的所有术语都根据他们在技术领域的通常含义被解释，除非在其中被另外明确地定义。所有的参考“一个/所述/该[装置、组件等]”都被开放地解释为所述装置、组件等中的至少一个实例，除非另外明确地说明。这里公开的任何方法的步骤都没必要以公开的准确的顺序运行，除非明确地说明。