CN113419785B - 一种解决WebView加载本地页面时跨域安全性问题的方法及终端 - Google Patents

Abstract

本发明涉及一种解决WebView加载本地页面时跨域安全性问题的方法及终端，通过将JS层的第一资源加载请求封装成第二资源请求经由消息通道转到App层，App层根据第二资源请求读取本地资源并转换为预设格式的特定数据返回给JS层，JS层实例化该特定数据得到需要加载的资源，无需开启WebView跨域权限，避免产生系统WebView存在的安全漏洞，从而解决WebView加载本地页面时产生的跨域问题。

Description

一种解决WebView加载本地页面时跨域安全性问题的方法及 终端

技术领域

本发明涉及计算机软件领域，尤其涉及一种解决WebView加载本地页面时跨域安全性问题的方法及终端。

背景技术

在移动端应用产品开发过程中，我们经常会用到系统提供的浏览器组件加载在线或本地的网页。

在Android系统中，这个系统组件叫WebView，同时，有时为了保证不同设备的兼容性，也会用到第三方实现的WebView，如腾讯的X5内核。

在iOS系统中，一般会使用系统提供的UIWebView(低版本系统才支持)以及WKWebView。

以下文字中，会将上述浏览器组件统称为WebView组件。

无论是哪一种WebView组件，都可以看成是一个小型的浏览器。如果要加载本地保存的网页，都有可能需要面临跨域问题。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

同源策略：是指协议、域名、端口都要相同，其中有一个不同都会产生跨域。

例如http://a.com/a.js访问http://a.com/x/b.js文件，不会产生跨域问题，但若是想访问http://c.com/c.js，如果没有在被访问资源的服务器上做特殊配置，是不允许的。

针对跨域功能，无论是Android还是iOS系统，都提供了类似的接口，允许降低对加载的页面的安全限制，允许一定程度上的跨域资源访问。参见以下表格：

上述表格展示的是两个系统的相关接口，通常，我们的本地包是不需要访问在线资源的，因此，第二个接口可以关闭，但是，第一个接口还是需要的，因为我们的课程包中，除了html页面与js文件外，还包含有图片、音频、文本文件、二进制文件等资源。

当两个接口都关闭时，通过脚本加载的音频、文本文件、二进制文件都会被WebView误判为跨域请求，即使它们是放在同一个目录里也一样。另外，通过网页中image标签动态加载的图片，在现有WebView实现的WebGL组件中，也会被误判为跨域资源，而不允许进行渲染。

但要是开启上述的接口，又会有可能引入安全漏洞(如CNVD-2017-36682、CNNVD-201801-515等)，导致App在审核时被拒绝。

现有的解决方案，一般有以下几种：

对于Android，可以将本地包存储在源码的asset目录里，这样，不需要开启setAllowFileAccessFromFileURLs接口，也可以在本地页面中访问。但是缺点也很明显，网页包只能与App打包在一起，无法按需下载。

对于iOS，可以使用NSURLProtocol，拦截WKWebView的请求，自定义加载逻辑。但正常情况下，只有首页的加载会经由NSURLProtocol处理，后续资源由于WKWebView是运行在独立进程，要想让NSURLProtocol生效，只能用类似反射的机制去注册。优点很明显，思路清晰，无需修改网页加载逻辑，但是通过反射去调用隐藏接口，一旦iOS框架调整，该方案就失效了。

另一种方案是在App打开本地网页时，启动一个本地小型服务器，将本地页面转成一个本地地址的在线页面进行加载。由于我们要引用的资源都是在同一个目录下，而且html页面在其根目录，因此所有的资源都能被正常加载。但这种方案也有一个问题，如果本地要同时支持多个包运行，如页面A加载网页包1，页面B加载网页包2，从页面A能跳转到页面B，从页面B退回页面A时状态要保持跳转前的状态。那么就需要同时启动多个服务器，CPU、内存的占用也会随之上升，同时服务器的开启、销毁逻辑也需要精准控制。

发明内容

(一)要解决的技术问题

为了解决现有技术的上述问题，本发明提供一种解决WebView加载本地页面时跨域安全性问题的方法及终端，能够优化WebView加载本地页面时跨域资源的加载。

(二)技术方案

为了达到上述目的，本发明采用的一种技术方案为：一种解决WebView加载本地页面时跨域安全性问题的方法，包括：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

本发明采用的另一种技术方案为：一种解决WebView加载本地页面时跨域安全性问题的终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

(三)有益效果

本发明的有益效果是：通过将JS层的第一资源加载请求封装成第二资源请求经由消息通道转到App层，App层根据第二资源请求读取本地资源并转换为预设格式的特定数据返回给JS层，JS层实例化该特定数据得到需要加载的资源，无需开启WebView跨域权限，避免产生系统WebView存在的安全漏洞，从而解决WebView加载本地页面时产生的跨域问题。

附图说明

图1为本发明的解决WebView加载本地页面时跨域安全性问题的方法的流程图；

图2为本发明的解决WebView加载本地页面时跨域安全性问题的终端的结构示意图；

【附图标记说明】

1、一种解决WebView加载本地页面时跨域安全性问题的终端终端；2、存储器；3、处理器。

具体实施方式

为了更好的解释本发明，以便于理解，下面结合附图，通过具体实施方式，对本发明作详细描述。

请参照图1所示，一种解决WebView加载本地页面时跨域安全性问题的方法，包括：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

从上述描述可知，本发明的有益效果在于：通过将JS层的第一资源加载请求封装成第二资源请求经由消息通道转到App层，App层根据第二资源请求读取本地资源并转换为预设格式的特定数据返回给JS层，JS层实例化该特定数据得到需要加载的资源，无需开启WebView跨域权限，避免产生系统WebView存在的安全漏洞，从而解决WebView加载本地页面时产生的跨域问题。

进一步地，所述S2中所述App层接收所述第二资源加载请求之后还包括：

对所述第二资源加载请求进行安全性校验成功后执行后续步骤。

从上述描述可知，App层接收第二资源加载请求之后会进行安全性校验，防止不安全的加载请求读取本地资源产生安全隐患。

进一步地，S1之后还包括：

App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量。

从上述描述可知，App层通过获取CPU和内存的负载信息动态控制同一时刻内第二资源加载请求并发处理的数量，优化了运行性能。

进一步地，所述App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量包括：

所述App层获取CPU和内存的负载信息，当所述同一时刻内第二资源加载请求的数量超过并发处理的预设阈值时，按请求时间排列将超过预设阈值部分的第二资源加载请求放入等待队列中。

从上述描述可知，通过队列的方式将同一时刻内第二资源加载请求的数量控制在并发处理的预设阈值范围内，优化运行性能的同时使得第二资源请求的处理能够得到有序进行。

请参照图2所示，一种解决WebView加载本地页面时跨域安全性问题的终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

从上述描述可知，本发明的有益效果在于：通过将JS层的第一资源加载请求封装成第二资源请求经由消息通道转到App层，App层根据第二资源请求读取本地资源并转换为预设格式的特定数据返回给JS层，JS层实例化该特定数据得到需要加载的资源，无需开启WebView跨域权限，避免产生系统WebView存在的安全漏洞，从而解决WebView加载本地页面时产生的跨域问题。

进一步地，所述S2中所述App层接收所述第二资源加载请求之后还包括：

对所述第二资源加载请求进行安全性校验成功后执行后续步骤。

从上述描述可知，App层接收第二资源加载请求之后会进行安全性校验，防止不安全的加载请求读取本地资源产生安全隐患。

进一步地，S1之后还包括：

App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量。

从上述描述可知，App层通过获取CPU和内存的负载信息动态控制同一时刻内第二资源加载请求并发处理的数量，优化了运行性能。

进一步地，所述App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量包括：

所述App层获取CPU和内存的负载信息，当所述同一时刻内第二资源加载请求的数量超过并发处理的预设阈值时，按请求时间排列将超过预设阈值部分的第二资源加载请求放入等待队列中。

从上述描述可知，通过队列的方式将同一时刻内第二资源加载请求的数量控制在并发处理的预设阈值范围内，优化运行性能的同时使得第二资源请求的处理能够得到有序进行。

实施例一

请参照图1所示，一种解决WebView加载本地页面时跨域安全性问题的方法，包括：

S1、在资源加载逻辑中注入加载重定向模块，当JS层(即JavaScript层)接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层(即原生层)；

具体地，所述加载重定向模块拦截所述第一资源加载请求后：

若所述第一资源加载请求所请求加载的资源类型为文本文件，如json、txt、plist等，则所述第一资源加载请求的加载方式可以以文本加载的方式进行加载，同时可指定该文本文件的编码方式，如utf-8、ascii等；

若所述第一资源加载请求所请求加载的资源类型为图片文件，则所述第一资源加载请求的加载方式可以以Base64或二进制的加载方式进行加载；

若所述第一资源加载请求所请求加载的资源类型为音频(mp3、wav等)、模型(bin、skel等)、压缩贴图(pvr、pkm等)这些原本以arraybuffer方式加载的文件，可以以二进制加载的方式进行加载。

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求异步读取本地资源，并将所述本地资源转换为预设格式的特定数据，例如：

若所述第二资源加载请求封装的加载方式为文本加载的方式，则异步读取本地资源后，将所述本地资源转换为指定编码方式的字符串；

若所述第二资源加载请求封装的加载方式为Base64的加载方式，则异步读取本地资源后，将所述本地资源转换为Base64格式的字符串；

若所述第二资源加载请求封装的加载方式为二进制的加载方式，则异步读取本地资源时需要将本地资源按字节转换，每个字节对应一个ascii字符，也可一次性读取多个字节，但最终结果需与一次读取一个字节的方式一致，相当于以ascii或ISO_8859_1编码方式读取文本文件，之后，将所述本地资源转换为二进制字符串；

之后，App层通过消息通道将所述特定数据返回给JS层；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源，具体有以下三种方法：

第一种：若所述特定数据的资源类型是文本文件，则将返回的字符串回调给加载模块；

第二种：若所述特定数据的资源类型是图片文件，根据与其适配的加载方式进行解析：

①如果是Base64的加载方式，创建HtmlImageElement对象，将返回的字符串前面拼接上mime类型及base64标识(例如png图片对应的标识就是data:image/png；base64,)后，设置到HtmlImageElement对象的src属性上，在该HtmlImageElement对象的load回调里，就可以将其回调给加载模块了。

②如果是二进制的加载方式，我们先将二进制字符串按照当前资源的mime类型，转换为Blob对象；然后，将这个Blob对象，实例化为WebGL可用的图片对象，有两种实例化方案：

1)在Android手机上，由于Chrome浏览器内核支持createImageBitmap方法解析Blob类型数据，我们可以直接调用createImageBitmap方法，将Blob对象转换为ImageBitmap对象，就可以将该对象回调给加载模块了。

2)在iOS手机上，由于现有的WKWebView不支持createImageBitmap方法，我们需要将Blob对象转换为HtmlImageElement对象。先创建一个HtmlImageElement对象，使用URL.createObjectURL方法，将Blob对象转换为可直接加载的临时地址格式，并赋值给HtmlImageElement的src属性。在该HtmlImageElement对象的load回调里，就可以将其回调给加载模块了。同时，在Android手机上，也支持该方式转换。

第三种：若所述特定数据的资源类型是音频、模型、压缩贴图等文件，我们可以直接将二进制字符串转为ArrayBuffer对象，然后回调给加载模块即可。

其中，所述S2中所述App层接收所述第二资源加载请求之后还包括：

对所述第二资源加载请求进行安全性校验成功后执行后续步骤，所述安全性校验包括：校验第一资源加载请求中的资源地址是否安全，即不允许加载本页面权限以外的资源(本页面所在目录内的资源，是允许的)。如果是无权限的地址，直接返回权限错误信息。

其中，S1之后还包括：

App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量。

优选地，所述App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量包括：

所述App层获取CPU和内存的负载信息，当所述同一时刻内第二资源加载请求的数量超过并发处理的预设阈值时，按请求时间排列将超过预设阈值部分的第二资源加载请求放入等待队列中。

实施例二

请参照图2，一种解决WebView加载本地页面时跨域安全性问题的终端1，包括存储器2、处理器3及存储在存储器2上并可在处理器3上运行的计算机程序，所述处理器3执行所述计算机程序时实现实施例一中的步骤。

综上所述，本发明提供的一种解决WebView加载本地页面时跨域安全性问题的方法及终端，通过将JS层的第一资源加载请求封装成第二资源请求经由消息通道转到App层，App层根据第二资源请求读取本地资源并转换为预设格式的特定数据返回给JS层，JS层实例化该特定数据得到需要加载的资源，无需开启WebView跨域权限，避免产生系统WebView存在的安全漏洞，从而解决WebView加载本地页面时产生的跨域问题。其中，App层接收第二资源加载请求之后会进行安全性校验，防止不安全的加载请求读取本地资源产生安全隐患。另外，App层通过获取CPU和内存的负载信息动态控制同一时刻内第二资源加载请求并发处理的数量，优化了运行性能。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种解决WebView加载本地页面时跨域安全性问题的方法，其特征在于，包括：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

所述加载重定向模块拦截所述第一资源加载请求后：若所述第一资源加载请求所请求加载的资源类型为文本文件，则所述第一资源加载请求的加载方式以文本加载的方式进行加载；若所述第一资源加载请求所请求加载的资源类型为图片文件，则所述第一资源加载请求的加载方式以Base64或二进制的加载方式进行加载；若所述第一资源加载请求所请求加载的资源类型为音频、模型、压缩贴图，则所述第一资源加载请求的加载方式以二进制加载的方式进行加载；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

若所述第二资源加载请求封装的加载方式为文本加载的方式，则异步读取本地资源后，将所述本地资源转换为指定编码方式的字符串；若所述第二资源加载请求封装的加载方式为Base64的加载方式，则异步读取本地资源后，将所述本地资源转换为Base64格式的字符串；若所述第二资源加载请求封装的加载方式为二进制的加载方式，则异步读取本地资源时需要将本地资源按字节转换，每个字节对应一个ascii字符，之后，将所述本地资源转换为二进制字符串；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

2.根据权利要求1所述的解决WebView加载本地页面时跨域安全性问题的方法，其特征在于，所述S2中所述App层接收所述第二资源加载请求之后还包括：

对所述第二资源加载请求进行安全性校验成功后执行后续步骤。

3.根据权利要求1所述的解决WebView加载本地页面时跨域安全性问题的方法，其特征在于，S1之后还包括：

App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量。

4.根据权利要求3所述的解决WebView加载本地页面时跨域安全性问题的方法，其特征在于，所述App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量包括：

所述App层获取CPU和内存的负载信息，当所述同一时刻内第二资源加载请求的数量超过并发处理的预设阈值时，按请求时间排列将超过预设阈值部分的第二资源加载请求放入等待队列中。

5.一种解决WebView加载本地页面时跨域安全性问题的终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

S1、在资源加载逻辑中注入加载重定向模块，当JS层接收第一资源加载请求时，所述加载重定向模块拦截所述第一资源加载请求，并根据所述第一资源加载请求所请求加载的资源类型，将所述第一资源加载请求中的资源地址以及与所述资源类型适配的加载方式封装为第二资源加载请求，将所述第二资源加载请求通过消息通道发往App层；

所述加载重定向模块拦截所述第一资源加载请求后：若所述第一资源加载请求所请求加载的资源类型为文本文件，则所述第一资源加载请求的加载方式以文本加载的方式进行加载；若所述第一资源加载请求所请求加载的资源类型为图片文件，则所述第一资源加载请求的加载方式以Base64或二进制的加载方式进行加载；若所述第一资源加载请求所请求加载的资源类型为音频、模型、压缩贴图，则所述第一资源加载请求的加载方式以二进制加载的方式进行加载；

S2、所述App层接收所述第二资源加载请求，并根据所述第二资源加载请求读取本地资源，并将所述本地资源转换为预设格式的特定数据，App层通过消息通道将所述特定数据返回给JS层；

若所述第二资源加载请求封装的加载方式为文本加载的方式，则异步读取本地资源后，将所述本地资源转换为指定编码方式的字符串；若所述第二资源加载请求封装的加载方式为Base64的加载方式，则异步读取本地资源后，将所述本地资源转换为Base64格式的字符串；若所述第二资源加载请求封装的加载方式为二进制的加载方式，则异步读取本地资源时需要将本地资源按字节转换，每个字节对应一个ascii字符，之后，将所述本地资源转换为二进制字符串；

S3、JS层接收到所述特定数据后，根据所述特定数据的资源类型执行与所述资源类型适配的实例化方法得到需要加载的资源。

6.根据权利要求5所述的解决WebView加载本地页面时跨域安全性问题的终端，其特征在于，所述S2中所述App层接收所述第二资源加载请求之后还包括：

对所述第二资源加载请求进行安全性校验成功后执行后续步骤。

7.根据权利要求5所述的解决WebView加载本地页面时跨域安全性问题的终端，其特征在于，S1之后还包括：

App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量。

8.根据权利要求7所述的解决WebView加载本地页面时跨域安全性问题的终端，其特征在于，所述App层获取CPU和内存的负载信息，动态控制同一时刻内第二资源加载请求并发处理的数量包括：

所述App层获取CPU和内存的负载信息，当所述同一时刻内第二资源加载请求的数量超过并发处理的预设阈值时，按请求时间排列将超过预设阈值部分的第二资源加载请求放入等待队列中。