webview跨域问题解决方案

hi,all

     本邮件分六部分：目的、意义、步骤、具体实现及测试办法，调研结论（3点），额外思考

一、调研目的

        浏览器的同源策略阻止了跨域访问，本次调研目的就是为了解决这个问题，让客户端可跨域访问其他网站

二、 意义：   

       1、跨域问题的解决，扩展了客户端解决缓存问题的思路，可达到完全控制缓存、较好的利用缓存的目的，从而可利用缓存达到提高H5页面的加载速度的目的  。

       2、为客户端自行调试提供了方便。

三、调研步骤：

        1、 把html+js+css+资源文件放到本地。

        2、webview加载html+js+css+资源文件。

        3、html此时都是本地域，要访问其他网站，需要解决跨域问题，此步骤就是要通过客户端来解决跨域问题。

        4、通过js代码请求其他域名的网站（如米学网），请求成功，返回测试结果。

四、具体实现及测试办法：以android为例，IOS可参考实现。所有的测试文件都已写好，请见附件。

        1、 把html+js+css+资源文件放到本地。（参考文件如附件）

       

  2、  webview加载html+js+css+资源文件。

            

                 

     3、解决跨域的问题，访问其他网站接口。

     android端可通过设置 setAllowUniversalAccessFromFileURLs来解决跨域访问的目的。

     这个方法的描述如下：

     

        可见，要想跨域访问，此值默认为true,经测试，设置为false后，就不可以跨域访问了。

        但这个方法目前需要在api level 16以上使用，即对应android系统为4.1版本。也就是说4.1版本以上才可以。

        不过，这个问题不大，一方面是4.1以下的机器比较少了，另一方面，客户端可做版本区分 。4.1以下的还是加载网页或用webview自定义缓存。4.1以上才做我们自己定义的缓存。

        android端还涉及一个方法   setAllowFileAccessFromFileURLs，官网描述如下：

      

       

             从描述上可看出两者的区别是：

           setAllowFileAccessFromFileURLs主要用于 设置是否允许通过 file url 加载的 Javascript 读取其他的本地文件

            setAllowUniversalAccessFromFileURLs 可以设置是否允许通过 file url 加载的 Javascript 可以访问其他任何的源，也就是说，它包括其他的文件和 http,https 等其他的源

            如果设置了   setAllowUniversalAccessFromFileURLs为true，则 setAllowFileAccessFromFileURLs就不用设置了。

     

      4、通过js代码请求其他域名的网站（如米学网），请求成功，返回测试结果。

     点击按钮，进行xmlhttpRequest请求，请求的URL是咱们米学网的userinfo接口： http://www.mexue.com/mobile/api/userInfo?m=getUserInfo&userId=5574de0f0cf277e7040db77a&token=97d3059fc6d06e321f011fd7190db41b  

     此时，如果请求成功，页面会弹出如下提示。

           

  五、调研结论：

          1、android本地可加载图片资源到html

         2、android端可实现跨域访问。

         3、android端可通过本地路径 "file:///android_asset/main.css" 加载到js和css文件

  六、额外的思考：

         有一种安全性的思考：就是假如其他的应用知道我们的包名和类名，那么 可以 让我们的 应用加载一个恶意 的 url, 从而可以获取 我们 应用的内部私有文件。