web-dev-qa-db-ja.com

親ウィンドウでiFrameのCookieにアクセスする

別のドメインのiFrameをロードしています。親サイトとiFrameサイトの両方が私の管理下にあります。 iFrameにメッセージを投稿するためにiFrame.postMessageを使用しています。 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;

}

上記の方法を使用して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>

ブラウザでCookieを表示できますが、Cookieの空の配列を取得しています。

javascriptiframecookies
9
Hasanthi

より簡単なソリューションを次に示します。

これにより、iframeのCookieが取得されます。

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

名前でCookieを取得するには、次の関数を使用します（ stackoverflow ）：

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

親ウィンドウでpostMessageをどのようにキャッチするか、またはキャッチするかどうかはわかりませんが、子iframeからpostMessageをキャッチするために親ウィンドウで必要なコードは次のとおりです。

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

[〜＃〜] update [〜＃〜]：
最後にシナリオを複製しましたが、使用する必要があることがわかりました。

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

の代わりに-

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

完全なコード
親ウィンドウ：- http：// localhost：8541

<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>

iFrameページ：- http：// localhost：50761

<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>

上記のコードでは、クロスドメイン環境でCookieの値にアクセスしています。つまり、親ウィンドウが異なるドメインで実行されており、iframeでのページの読み込みが異なるドメインで実行されています。

テストデータを含むテストCookieを作成し、postMessageを使用して親ウィンドウに渡しました。

4
Manik Arora