个人中心
gpt4 book ai didi

javascript - 尝试使用通用 iframe 在域之间共享 cookie，但得到两个 cookie

转载 作者：行者123 更新时间：2023-12-03 03:19:58 27 4
gpt4 key购买 nike

我的情况是，我有两个不同的网站，siteA.com 和 siteB.com，当访问者从 siteA 导航到 siteB 时，这两个网站需要共享一条公共(public)信息。我无权访问 siteA 的服务器端代码或导航链接，只能访问有限的自定义和 JavaScript。为了共享信息，我在 siteC.com 上构建了一个完全由我控制的新页面，然后将此页面作为 iframe 添加到 siteA 和 siteB。我正在使用 postMessage 方法从 iframe 中获取和设置 cookie，该 cookie 在每个站点上都工作正常，但实际上我最终得到了两个不同的 cookie，每个站点 A 和站点 B 各一个，即使cookie属于siteC，因为它是由iframe中的页面设置的，通过F12调试器确认。我本来希望有一个 cookie，并且两个站点都可以通过 iframe 共享相同的 cookie，我是否在这里遗漏了一些东西，这是否可能，或者是否有其他方法可以做到这一点？

这是我在 siteC 上的页面的代码，该代码被加载到 iframe 中

<!DOCTYPE html>
<html>
<head>
   <title>iframe source</title>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript">
      $(function () {
         var ck = document.cookie;
         var expDate = new Date();
         expDate.setFullYear(expDate.getFullYear() + 20)
         $("#auditlog").append("iframe loaded<br/>");
         if (ck) {
            $("#auditlog").append("cookie exists<br/>");
         } else {
            $("#auditlog").append("cookie not set<br/>");
         }

         // Assign handler to message event
         if (window.addEventListener) {
            window.addEventListener('message', messageHandler, false);
         } else if (window.attachEvent) { // ie8
            window.attachEvent('onmessage', messageHandler);
         }
      })

      function messageHandler(e) {
         var msg = {};
         var response;
         // Check origin
         if (e.origin === 'http://siteA' || e.origin === 'http://siteB') {
            // Retrieve data sent in postMessage
            msg = JSON.parse(e.data);
            if (msg.action == "getCookie") {
               response = getCookie();
            } else if (msg.action == "setCookie") {
               setCookie(msg.payload);
               response = "cookie set";
            } else {
               response = "action not supported";
            }
            // Send reply to source of message
            e.source.postMessage(response, e.origin);
         }
      }

      function setCookie(cookieVal) {
         var expDate = new Date();
         expDate.setFullYear(expDate.getFullYear() + 20)
         document.cookie = cookieVal + "; expires=" + expDate.toUTCString();
      }

      function getCookie() {
         return document.cookie;
      }
   </script>
</head>
<body>
   <div id="auditlog"></div>
   <div id="cookieinfo"></div>
</body>
</html>

这是我在 siteA 和 siteB 的页面的代码，两者都使用相同的代码，这是我为了测试 iframe 中的设置和获取 cookie 功能而设置的示例

<!DOCTYPE html>
<html>
<head>
   <title>Main content page</title>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript">
      $(function () {
         // Assign handler to message event
         if (window.addEventListener) {
            window.addEventListener('message', messageHandler, false);
         } else if (window.attachEvent) { // ie8
            window.attachEvent('onmessage', messageHandler);
         }

         $("#btnGetIframeCookie").click(function () {
            var postMsg = {
               action:"getCookie"
            }
            // get reference to window inside the iframe
            var wn = document.getElementById('cookieiframe').contentWindow;
            // postMessage arguments: data to send, target origin
            wn.postMessage(JSON.stringify(postMsg), 'http://siteC');
         })
         $("#btnSetIframeCookie").click(function () {
            var cookieVal = $("#txtCookieValue").val();
            var postMsg = {
               action: "setCookie",
               payload: cookieVal
            }
            var wn = document.getElementById('cookieiframe').contentWindow;
            // postMessage arguments: data to send, target origin
            wn.postMessage(JSON.stringify(postMsg), 'http://siteC');
         })
      })

      function messageHandler(e) {
         if (e.origin === 'http://siteC') {
            $("#divMessages").append("response from iframe: <br/>" + e.data + "<br/>");
         }
      }
   </script>
</head>
<body>
   <div>
      This is the iframe container
   </div>
   <div>
      <input type="button" id="btnGetIframeCookie" value="Get iframe cookie" />
   </div>
   <div>
      <input type="text" size="60" id="txtCookieValue" />
      <input type="button" id="btnSetIframeCookie" value="Set iframe cookie" />
   </div>
   <iframe id="cookieiframe" src="http://siteC/iframe/index.html" style="width: 300px; height: 300px; border:1px solid black;"></iframe>
   <div id="divMessages"></div>
</body>
</html>

使用此设置，如果我通过 iframe 从 siteA 设置一个值为 "keyabc=value123" 的 cookie，那么我可以读回相同的 cookie，但是当我转到siteB 在那里的 iframe 中有相同的页面，我没有 cookie，直到我在那里设置了一个 cookie，例如 "keyabc=value456"。现在，如果我查看位于 C:\Users\aakoehle\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\AC\#!001\MicrosoftEdge\Cookies 的实际 cookie 文件，我会看到两个文件，其中一个带有我设置的每个值都有 siteC 的路径。我还为每个浏览器选项卡启动了 F12 工具，每个选项卡都显示了属于 siteC 的自己的 cookie。

--更新--

通过此处发布的当前版本的代码，我现在只在 Edge 浏览器中看到 cookie 问题。 Chrome 和 IE 按预期在 siteA 和 siteB 之间共享单个 cookie。

最佳答案

以下是使用 localStorage 和 postMessage 在跨源站点之间共享数据的示例。

站点1:本地主机:9091

<html>
<body>
    <h1>site 1</h1>
    <button id='postBtn'>Post message</button>
    <br/>
    <iframe id='commonSite' src='http://localhost:9093/commonSite.html' style='height:150px'></iframe>

    <script>
        (function () {
            var commonSite = document.querySelector('#commonSite').contentWindow;
            var postCounter = localStorage.getItem('postCounter');
            postCounter = postCounter != null ? +postCounter : 1;

            var commonOrigin = 'http://localhost:9093';

            document.querySelector('#postBtn').onclick = function () {
                commonSite.postMessage(postCounter++, commonOrigin);
                localStorage.setItem('postCounter', postCounter);

                console.log('site 1 posted');
            }
        })();
    </script>
</body>
</html>

站点2:本地主机:9092

<html>
<body>
    <h1>site 2</h1>
    <button id='postBtn'>Post message</button>
    <br/>
    <iframe id='commonSite' src='http://localhost:9093/commonSite.html' style='height:150px'></iframe>

    <script>
        (function () {
            var commonSite = document.querySelector('#commonSite').contentWindow;
            var postCounter = localStorage.getItem('postCounter');
            postCounter = postCounter != null ? +postCounter : 1;

            var commonOrigin = 'http://localhost:9093';

            document.querySelector('#postBtn').onclick = function () {
                commonSite.postMessage(postCounter++, commonOrigin);
                localStorage.setItem('postCounter', postCounter);

                console.log('site 2 posted');
            }
        })();
    </script>
</body>
</html>

commonSite: localhost:9093

<html>
<body>
    <h3>Common site</h1>
    <h4> Site 1 count: <span id='count1'></span></h3>
    <h4> Site 2 count: <span id='count2'></span></h3>

    <script>
        (function () {
            console.log('Adding message listener');
            var origin1 = 'http://localhost:9091';
            var origin2 = 'http://localhost:9092';

            var count1 = document.querySelector('#count1');
            var count2 = document.querySelector('#count2');

            if(localStorage.getItem('count1')) {
                count1.textContent = localStorage.getItem('count1');
            }

            if(localStorage.getItem('count2')) {
                count2.textContent = localStorage.getItem('count2');
            }

            window.addEventListener('message', function (event) {
                var origin = event.origin;
                var data = event.data;

                if(origin === origin1) {
                    localStorage.setItem('count1', data);
                    count1.textContent = localStorage.getItem('count1');
                } else if(origin === origin2) {
                    localStorage.setItem('count2', data);
                    count2.textContent = localStorage.getItem('count2');
                }

                console.log('received (' + data + ') from ' + origin);
            }, false);
        })();
    </script>
</body>
</html>

关于javascript - 尝试使用通用 iframe 在域之间共享 cookie，但得到两个 cookie，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46613105/

27 4 0
文章推荐： javascript - 选择局部 View 的特定元素
文章推荐： javascript - JsonConvert.SerializeObject 不会将我的对象序列化为 JSON 字符串
文章推荐： javascript - 使用 javascript 从 Firebase 添加地点到热图
文章推荐： javascript - href javascript 不适用于我的图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com