Search code examples
javascriptcookiesiframegoogle-analyticssamesite

Google Analytics blocked in IFrame due to "SameSite" & "Secure" setting of cookies

We're running a service on our-site.com. Our customers can either use the service "stand alone" by simply linking from their-site.com to our-site.com/customer-service or by embedding our service via iFrame into their-site.com. Imagine visiting GMaps directly vs. seeing it embedded in an IFrame.

Visiting "foreign" page with our service in IFarme

Beginning with Chrome 80 (i guess) our Google Analytics stopped working when the service runs inside the iFrame. Chrome is giving me this (quite clear) message:

A cookie associated with a cross-site resource at http://our-site.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Also I don't see anything in the GA realtime overview if I visit their-site.com with our our-site.com/customer-service embedded in the iFrame.

If I manually disable the 2 features same-site-by-default-cookies & cookies-without-same-site-must-be-secure in chrome://flags and visit their-site.com with our-site.com/customer-service embedded in the iFrame I do see the page visit in the GA realtime overview.

Visiting our service "stand alone"

When directly visiting our-site.com/customer-service GA is still working just fine:

  • No warnings in dev tools
  • Multiple cookies associated to GA are shown in dev tools > applications tab
  • I can see page visits in the GA realtime overview
  • Neither of the cookies has the Secure or SameSite value set (all "blank")...

Question

Is there anything I can do to make GA work again when running inside an iFrame on a foreign domain?

Example code

I just created a very simple test environment which also shows the issues described above:

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>

their-site.com

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

Even this very simple example shows the behavior described above, where opening our-site.com/customer-service directly, shows data in the GA realtime overview and opening their-site.com doesn't...

Solution

  • Answer from the Google tag manager support forum:

    When accessing a first-party cookie (_ga) in a third-party context (the iframe), one has to explicitly add cookieFlags with the value samesite=none;secure.

    Detailed description for various scenarios can be found at this blogpost.