Chrome奇葩故障:iframe的跨域session丢失问题

现象

点击A站点一段文字,通过layui的layer弹出层的iframe方式,跨域到另一个域名,实现登录。

实测在Chrome v80+中,session无法传递,登录失败。同域名下的iframe或其它浏览器正常。

解决

做特别处理,一旦浏览器为Chrome 80+,则使用弹出新窗口方式登录。

核心代码:

function get_browser() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR|Edge\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }
var browser=get_browser();

jQuery('.download-item a').click(function () {

  if((browser.name === 'Chrome' && browser.version >= 80) || browser.name === 'Safari')
  {
    var win = window.open('https://www.test.com', '_blank');
    if (win) {
        //Browser has allowed it to be opened
        win.focus();
    } else {
        //Browser has blocked it
        alert('Please allow popups for this website');
    }
    return;
  }

  layer.open({
    type: 2,
    shadeClose: true,
    shade: 0.8,
    area: [
      screen.width < 1024 ? '98%' : '65%',
      screen.width < 1024 ? '96%' : '600px',
    ],
    content: 'https://www.test.com',
  });
});

尝试过的方案

通过php或.htaccess设置跨域

Header Set Access-Control-Allow-Origin "*"

通过php设置set-cookie: xxx; domain=.test.com

通过php或.htaccess设置SameSite

<If "%{HTTP_USER_AGENT} !~ /(iPhone; CPU iPhone OS 1[0-2]|iPad; CPU 
OS 1[0-2]|iPod touch; CPU iPhone OS 1[0-2]|Macintosh; Intel Mac OS 
X.*Version\x2F1[0-2].*Safari|Macintosh;.*Mac OS X 10_14.* 
AppleWebKit.*Version\x2F1[0-3].*Safari)/i">
    Header edit Set-Cookie ^(.*)$ $1;SameSite=None;Secure
</If>

后记

解决这个问题花费了我六个小时,巨累。但是它又没有多大意义。最终教给我一句话,就是iframe还是尽量别用了,累。

另外,我只测试了谷歌,Safari的高版本还没有测。

2020-10-19更新:Safari已测试,跟chrome一样不好使,代码已更新。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注