是什么导致会话弹出式浏览器Chrome丢失会话？

问题描述

我正在启动一个弹出对话框的应用程序上，此对话框需要会话，但是会丢失。到目前为止，这仅在Chrome上发生。我已经在Opera和Edge中进行了测试，都可以正常工作。我只是在Chrome中丢失了会话。我也在SuperUsers网站中提交了此问题。抱歉，没有必要附加代码。

下面是一个生成对话框的jsfiddle。

https://jsfiddle.net/0kv4bqjy/2/

HTML

<div id="apollo-actions-wrapper" data-uri="www.sap.com">
    <div id="apollo-inner-wrapper">
        <a href="javascript:" id="launch-apollo"><img src="https://www.apolloproject.xyz/a/images/apollo-launcher.png"/></a>
        <span id="apollo-likes"><span id="likes-span"></span> likes</span>
        <span id="apollo-shares"><span id="shares-span"></span> shares</span>
        <span id="apollo">Apollo</span>
    </div>
</div>

JavaScript

    var ResourceRequest = function(){

    var http = function(uri,method){

        var request = new XMLHttpRequest();
        request.onprogress = updateRequestProgress;

        return new Promise(function(resolve,reject){
            request.onreadystatechange = function () {

                if (request.readyState !== 4) return;
                if (request.status >= 200 && request.status < 300) {
                    resolve(request);
                } else {
                    reject({
                        status: request.status,statusText: request.statusText
                    });
                }
            };
            request.open(method ? method : 'get',uri,true);
            request.send();
        });
    }

    var updateRequestProgress = function(arg){
    }

    return {
        http: http
    }
}


var popup = {}


var actionsWrapper = document.getElementById("apollo-actions-wrapper")
var innerActionsWrapper = document.getElementById("apollo-inner-wrapper");
var launchApollo = document.getElementById("launch-apollo")
var likesWrapper = document.getElementById("apollo-likes")
var sharesWrapper = document.getElementById("apollo-shares")
var likesspan = document.getElementById("likes-span")
var sharesspan = document.getElementById("shares-span")
var apolloSpan = document.getElementById("apollo")

addActionStyles()

var req = new ResourceRequest()
var uri = actionsWrapper.getAttribute("data-uri")

var likesUri = "https://www.apolloproject.xyz/a/resource/likes?uri=" + encodeURIComponent(uri);
var sharesUri = "https://www.apolloproject.xyz/a/resource/shares?uri=" + encodeURIComponent(uri);

var likesUriDev = "/a/resource/likes?uri=" + encodeURIComponent(uri);
var sharesUriDev = "/a/resource/shares?uri=" + encodeURIComponent(uri);

req.http(likesUri).then(updateLikes).catch(error)
req.http(sharesUri).then(updateShares).catch(error)

var launcher = document.getElementById("launch-apollo")

launcher.addEventListener("click",function(){

    var uri = actionsWrapper.getAttribute("data-uri")

    var src = "https://www.apolloproject.xyz/a/resource?uri=" + encodeURIComponent(uri)
    var srcDev = "http://localhost:8080/a/resource?uri=" + encodeURIComponent(uri)

    var height = 575;
    var width = 437
    var top = (screen.height - height) / 4;
    var left = (screen.width - width) / 2;

    popup = window.open("","ApolloResourceAction",'top=100 left=' + left + ' width=437 height=575')
    popup.document.write('<iframe width="' + width + '" height="' + height + '"  allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;" src="'+ src +'" type="text/javascript"></iframe>');
})

function updateLikes(request){
    var data = JSON.parse(request.responseText)
    console.log(data)
    likesspan.innerHTML = data.likes
}

function updateShares(request){
    var data = JSON.parse(request.responseText)
    sharesspan.innerHTML = data.shares
}

function addActionStyles(){
    innerActionsWrapper.style.csstext = "position:relative;width:140px; height:57px;"
    launchApollo.style.csstext = "color:#2cafed;font-size:39px;font-weight:bold;text-decoration:none;"
    likesWrapper.style.csstext = "position:absolute; left:49px; top:0px; font-size:12px;"
    sharesWrapper.style.csstext = "position:absolute; left:49px; bottom:27px; font-size:12px;"
    likesspan.style.csstext = "font-size:12px;"
    sharesspan.style.csstext = "font-size:12px;"
    apolloSpan.style.csstext = "font-size:11px;display:block;clear:both;"

    var css = '#launch-apollo:hover{ color: #617078 !important }' +
                '#apollo-actions-wrapper{ text-align:left; display:inline-block; width:140px; height:57px; }';

    var style = document.createElement('style');

    if (style.styleSheet) {
        style.styleSheet.csstext = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    document.getElementsByTagName('head')[0].appendChild(style);
}

var timer = setInterval(function () {
    if (popup.closed) {
        clearInterval(timer);
        window.location.reload(); // Refresh the parent page
    }
},1000);

function error(){
    console.log(error)
}

谢谢。

解决方法

事实证明，Chrome不久前已更新其Cookie要求，以便外部网站内的弹出窗口。就我而言，我必须将 SameSite 设置为无，将安全设置为 true 。