Javascript 在父窗口中访问iFrame的Cookie

我正在加载另一个域的iFrame。父站点和iFrame站点都在我的控制之下。我正在使用iFrame.postMessage将消息发布到iFrame。我正在通过iFrame加载的站点有一个cookie（而不是仅http的cookie）。我需要在父站点中读取此cookie

   var opIFrame=document.getElementById('opIFrame').contentWindow;

    /**
 * periodically invoking the Endpoint at OP for every six seconds
 */
setInterval(function(){
    console.log('Sending polling Request From RP Client ... ' + clientId);
    document.all.opIFrame.src = endPoint;
    opIFrame.postMessage(clientId,"https://localhost:9443/oauth2/loginstatus");
    var session=getCookieValue("session_state");
    console.log('**session**'+session);
},6000);


function getCookieValue(cookieName) {
var name = cookieName + "=";
var cookies =document.cookie.split(';');
if (!cookies) {
    return null;
}
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf(name) == 0) {
        return cookie.substring(name.length, cookie.length);
    }
}
return null;

var opIFrame=document.getElementById（'opIFrame'）.contentWindow；
/**
*每隔6秒在OP处定期调用端点
*/
setInterval（函数（）{
log（'从RP客户端发送轮询请求…'+clientId）；
document.all.opIFrame.src=端点；
opIFrame.postMessage（客户端ID，“https://localhost:9443/oauth2/loginstatus");
var session=getCookieValue（“session_state”）；
console.log（“**会话**”+会话）；
},6000);
函数getCookieValue（cookieName）{
变量名称=cookieName+“=”；
var cookies=document.cookie.split（“；”）；
如果（！cookies）{
返回null；
}
对于（变量i=0；i

}

我使用上述方法读取cookie。但它并没有成功。请给我一些建议

更新代码：

<iframe id="opIFrame" style='visibility: hidden;' src=endpoint onload="getCookieValue('session_state')" >
</iframe> 
   <script>function getCookieValue(cookieName) {
        console.log("=====getCookieValue=======");
        var cookies = document.cookie;
        console.log("=====ALL cookies======="+cookies);
    }</script>

函数getCookieValue（cookieName）{
console.log（“=======getCookieValue=======”）；
var cookies=document.cookie；
console.log（“=======所有cookie==========”+cookies）；
}

---

虽然我可以在浏览器中看到cookie，但我得到了cookie的空数组。

我不确定您是如何在父窗口上捕获postMessage的，甚至是如何捕获或不捕获postMessage的，但下面是在父窗口上捕获子iframe中的postMessage的代码-

<script>
    window.addEventListener( "clientId",
      function (e) {
            if(e.origin !== 'https://localhost:9443'){ return; } 
            alert(e.data);
      },
      false);
</script>

而不是-

opIFrame.cookie.split(';');
opIFrame.postMessage(clientId,"https://localhost:9443/oauth2/loginstatus");

完整代码
父窗口：-

父窗口
window.addEventListener（“消息”，
职能（e）{
如果（例如来源！=='http://localhost:50761“）{return；}
警报（如数据）；
}，假）；

iFrame页面：-

iFrame窗口
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i

在上面的代码中，您可以看到我正在跨域环境中访问cookie值，即父窗口在不同的域上运行，而iframe中的页面加载在不同的域上运行

---

我创建了一个包含测试数据的测试cookie，并使用postMessage传递到父窗口。

这将为您提供iframe的cookie：

var cookie = document.getElementById("iframeId").contentDocument.cookie;

要按名称获取cookie，请使用此函数（）：

---

您是如何收听父窗口上的消息事件的？是的，谢谢。我已经添加了一个eventListner，以听取响应。但问题在于访问cookie。我通过侦听器从iFrame on message事件获得响应。虽然我有一个名为“session\u state”的cookie，但在执行getCookieValue（cookieName）时，我得到了null。请查看我的更新答案，并解释一下在clientId中发送的内容？我还看到，您在读取cookie之前将消息发布到父窗口，这是故意的吗？您做错了，您试图在父窗口中读取无法访问的iframe的cookie，这是浏览器安全措施。只有创建cookie的域才能读取其cookie。因此，您必须从iframe中读取cookie，然后将其传递给父窗口。如果您无法访问或控制iframe中的页面，则无法获取cookie值。对于这种情况，我只有一个解决方案——“这是不可能的”。我已经完成了这一部分。访问cookie时会出现问题。我只需要传递一个字符串作为客户端id。通过代码，我提供了post消息，以将消息发布到iframe，而不是父级。我错误地将opIFrame.postMessage放在了文档中。我改了。但我仍然无法使用父级访问iframe中的cookie。您只能在同一iframe中读取iframe的cookie，读取后，您可以使用postMessage将cookie值传递给父级窗口。如果你想看的话，我可以发布代码。我通过调用iFrame load上的getCookieValue函数来尝试。但我无法访问cookie。如果可以，请输入密码。我已经用我的新代码更新了问题。请查看更新后的答案。我现在添加了完整代码。这在不同的域（这是问题的一部分）中不起作用，您得到：

SecurityError:访问属性“contentDocument”的权限被拒绝在跨源对象上

.hmm使用contentWindow而不是cof contentDocument:document.getElementById（“iframeId”）.contentWindow.cookie；

<div>
     <h1>Parent Window</h1>
     <iframe src="http://localhost:50761/parent/test" width="100" height="100"></iframe>
     <script>
         window.addEventListener("message",
         function (e) {
            if (e.origin !== 'http://localhost:50761') { return; }
               alert(e.data);
            },false);
     </script>
</div>

<div>
    <h1>iFrame Window</h1>
    <script type="text/javascript">
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        createCookie('testCookie', "test content", 1);
        parent.postMessage(readCookie('testCookie'), "http://localhost:8541/");
    </script>
</div>

var cookie = document.getElementById("iframeId").contentDocument.cookie;

function getCookie(cookie, name) {
    function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
    var match = cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}