浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(1)

主流浏览器

事件的起因

某一客户的Web APP项目由于某些原因限制,无法采用一般的前端或后端的技术方案进行跨站点以及第三方系统的数据通信,通过调研采用了postMessage的前端跨域解决方案。https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

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

同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

但是测试人员在测试的时候,发现所开发的功能在主流的浏览器(Chrome,Firefox, IE, Safari, Opera)均通过了测试,而在国内的一些双核浏览器,例如360浏览器,搜狗浏览器上,功能都不好用。

事件的调查

调查项点1: 什么是双核浏览器?

双核浏览器,就是有两个内核的浏览器。由于10年前IE浏览器在国内的普及率非常高,所以造成了当时很多网上银行和支付系统只支持IE的Trident内核,其他浏览器访问根本无法进行正常支付和转账等业务。而WebKit内核的非IE浏览器以更高的性能和更好的用户体验拥有了越来越多的用户(目前已经占据浏览器市场的主导地位)。于是双核浏览器应运而生,在不用网上交易的一般网站,使用速度快的webkit内核访问,这就是所谓的“高速模式”;在访问支付宝或者网上银行的时候,使用Trident内核的“兼容模式”来进行业务。一般的双核浏览器拥有IE兼容内核和非IE极速内核两个内核,这样就满足同一用户的不同需求。

双核浏览器的代表:360浏览器,搜狗浏览器。

主要用户群:中国国内用户。

调查发现360浏览器在浏览网页使用急速模式下,使用的是自己自带的chrome内核,并非电脑安装的谷歌浏览器内核。

目前360浏览器最新版本的chrome内核版本为Chrome 63

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(2)

360浏览器

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(3)

浏览器内核版本

从360浏览器最新版本使用的chrome内核版本可见,其内核版落后于最新的Chrome版本2年。

调查项点2: postMessage的浏览器兼容性

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(4)

浏览器兼容性

由以上图片可见,主流浏览器对postMessage的支持是不错的,但是IE需要10以上的版本才支持。所以开发人员很快想到了是否因为360浏览器使用的IE内核版本过低的原因造成的,但是通过检查IE版本,发现测试人员测试使用的IE版本是11,所以造成问题的原因不是由于IE版本过低造成的。

调查项点3:双核浏览器的内核切换

调查发现双核浏览器切换内核后,不同内核的LocalStorage,SessionStorage 中的数据无法共享,PostMessage无法发送数据给不同内核的tab页面。

针对双核浏览器切换内核造成的问题,360浏览器官方给出了完整的解释和方案,想要了解更详细的内容,请点击以下链接查看,在此我不再叙述。

360浏览器自定义设置内核模式说明 https://bbs.360.cn/thread-14958904-1-1.html

1、强制锁定极速模式不对外开放(无法手动切换,手动切换指的是客户端用户操作浏览器来实现),比如淘宝、360导航

2、手动切换优先级最高,手动切了兼容模式,以后打开一直是兼容,切了极速模式就一直是极速模式,只能手动切回去(兼容列表、meta指定都无效)

3、meta指定模式,开发者可以自己决定用什么模式,用正式地址或域名测试(还是可以通过手动来切换模式)

如您是网站的开发者,可以通过在页面<head>标签中添加代码,来指定网站的模式

若页面需默认用极速模式,增加标签:<meta name='renderer' content='webkit' />

若页面需默认用IE兼容模式,增加标签:<meta name='renderer' content='ie-comp' />

若页面需默认用IE标准模式,增加标签:<meta name='renderer' content='ie-stand' />

4、新安装的浏览器,meta指定极速模式,但是再打开网址还是兼容模式,可能在浏览器兼容列表(此列表为360官方维护)中,请提供详细网址,工作人员核对后会修改模式

调查人员很快发现客户的不同站点在双核浏览器中打开使用的内核不同。

主站页面代码如下,所以使用360浏览器打开的时候,会采用急速模式,也就是webkit内核(Chrome内核)。

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(5)

浏览器兼容性

分站的代码中没有指定默认使用的模式,所以360浏览器打开后,通过自己的算法分析,使用了IE内核来显示页面。这就导致了主站与分站虽然在同一个浏览器打开,但是页面的渲染内核却不同,导致无法通过postMessage来获取数据。

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(6)

浏览器兼容性

解决方案:

技术角度:通过分站与主站保持统一设置,页面默认用极速模式,经过测试,由于客户的各系统保持了相同设置,在使用360双核浏览器打开的时候,均使用急速模式,完美的解决了这个问题。

产品角度:产品人员请评估针对这类小众浏览器是否值得投入过多精力来解决不兼容性问题,因为在实际开发中肯定还会遇到类似的不兼容性问题,是否重新定位产品的浏览器支持版本。

针对不支持的浏览器和一些低版本的浏览器,业内的一种解决方案是通过明显的提示信息提示用户当前使用的浏览器不支持,请使用谷歌、火狐。。。等支持的浏览器。

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(7)

浏览器兼容性

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(8)

中国浏览器市场份额

浏览器的跨域请求(由postMessage跨域解决方案引发的双核浏览器兼容性问题的调查)(9)

世界浏览器市场份额

,