时间戳

首页 > 解决方案 > 由于 Cookie 的“SameSite”和“安全”设置，Google Analytics 在 IFrame 中被阻止

javascript - 由于 Cookie 的“SameSite”和“安全”设置，Google Analytics 在 IFrame 中被阻止

问题描述

我们正在运行一项服务our-site.com。我们的客户可以通过简单地从their-site.comto链接our-site.com/customer-service或通过 iFrame 将我们的服务嵌入到their-site.com. 想象一下直接访问 GMap 与看到它嵌入到 IFrame 中。

使用我们在 Ifarme 的服务访问“外国”页面

从 Chrome 80（我猜）开始，当服务在 iFrame 中运行时，我们的 Google Analytics 停止工作。Chrome 正在给我这个（非常清楚）消息：

与http://our-site.com/上的跨站点资源关联的 cookie设置为没有该SameSite属性。SameSite=None它已被阻止，因为 Chrome 现在仅在使用和设置时才提供带有跨站点请求的 cookie Secure。您可以在应用程序>存储>Cookies 下的开发人员工具中查看 cookie，并在https://www.chromestatus.com/feature/5088147346030592和https://www.chromestatus.com/feature/5633521622188032中查看更多详细信息。

此外，如果我使用嵌入在 iFrame 中的访问their-site.com，our-site.com/customer-service我在 GA 实时概览中看不到任何内容。

如果我手动禁用 2 个功能same-site-by-default-cookies并使用嵌入在 iFrame 中的访问，我确实会在 GA 实时概览中看到页面cookies-without-same-site-must-be-secure访问chrome://flags。their-site.comour-site.com/customer-service

访问我们的服务“独立”

直接访问our-site.com/customer-serviceGA 时仍然可以正常工作：

问题

在外部域的 iFrame 内运行时，我能做些什么来让 GA 再次工作？

示例代码

我刚刚创建了一个非常简单的测试环境，它也显示了上述问题：

our-site.com/customer-service

<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={tracking-id}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag("js", new Date());
      gtag("config", "{tracking-id}");
    </script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>our site service</title>
  </head>
  <body>our-site.com/customer-service</body>
</html>

他们的网站

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>their-site.com</title>
  </head>
  <body>
    <iframe src="https://www.our-site.com/customer-service" style="width: 500px; height: 500px;"></iframe>
  </body>
</html>

即使是这个非常简单的示例也显示了上述行为，our-site.com/customer-service直接打开，在 GA 实时概览中显示数据，而打开their-site.com则不...

标签： javascriptcookiesiframegoogle-analyticssamesite

解决方案

来自Google 标签管理器支持论坛的回答：

_ga在第三方上下文（iframe）中访问第一方 cookie ( ) 时，必须显式添加cookieFlagsvalue samesite=none;secure。

各种场景的详细描述可以在这篇博文中找到。

推荐阅读