webview跨域问题解决方案

网页webview相关 专栏收录该内容
5 篇文章 0 订阅
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, 从而可以获取 我们 应用的内部私有文件。
   
  • 2
    点赞
  • 4
    评论
  • 7
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

四夕水浩

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值