主系统是需要使用chrome浏览器,并且在70及以上的版本,集成的第三方系统登录,需要在IE7、IE8上运行。在chrome上点击第三方系统图标时,需要使用一个插件唤起IE浏览器,主系统开发了一个form表单,模拟提交登录第三方系统。但是第三方系统有校验,访问第三方系统时,需要在页面上携带一个cookie,并且这个cookie是通过访问第三方系统登录页面产生。
一、使用iframe加载
在主系统的页面,使用iframe集成第三系统的登录地址,在页面加载时产生cookie。然后一秒后,模拟提交form表单,登录第三方系统。但是第三方系统登录页面有校验
if (top.location!=self.location) {top.location=self.location;}
自动判断当前的location是否是顶层的,即是否被嵌套到iframe里面了,如果是,则强制跳转,此场景无法使用模拟登录。通过研究发现在iframe中增加sandbox=""属性,可禁止iframe的跳转。
<iframesrc=""class="iframe"scrolling="no"sandbox="">
二、sandbox在IE8上不生效
增加属性后在IE11上,模拟登录的页面,不会被第三方系统覆盖,模拟登录成功。但是在IE8上,仍然会被覆盖,增加属性不生效。
三、使用ajax模拟访问
在页面上使用ajax访问第三方系统登录页,产生cookie后,再模拟登录。设置ajax同步访问模式,先访问第三方系统登陆页面,然后模拟提交。使用ajax后,发现跨域问题,无法正常使用ajax访问第三方系统登陆页面,问题依然无法解决。
四、ajax设置jsonp
ajax设置使用jsonp模式,解决跨域访问问题。使用jsonp模式后,可正常获取cookie,延时一秒,模拟提交form表单,可正常登录跳转第三方系统。
$.ajax({ url:srcUrl, type:'get', dataType: "jsonp", success: function(data){ } });
五、<script>标签
应该有更简单的方法,使用<script>标签的src属性
六、总结
1、在本次解决问题过程中,了解到 <iframe>的sandbox=""属性,sandbox 属性将会启用一系列对行内框架中内容的额外限制。IE 9 以及更早的版本不支持 sandbox 属性。
2、在页面上增加以下代码,可控制第三方页面通过iframe内嵌
if (top.location != self.location) {top.location=self.location;}
3、使用ajax ,配置dataType="jsonp",解决主流浏览器的跨域数据访问的问题,只能使用get请求。