Blog

Passing third-party cookies to Chrome from an iFrame

May 6th, 2021 by Max Tokman

Typically, frames are thought of as ancient web tech, relegated to the dustbin of history by responsive web design which, in turn, is also getting long in the tooth.  But there are times when we as web developers are forced to employ whatever technology that suits a specific project need, and few years back we did have to launch a web site with framed content. We were aware of the potential challenges that would come with collecting Google Analytics data from framed content residing on a different domain, but other considerations prevailed.

The web site launched and Google Analytics data came in fine for a couple of years, until we noticed web user data starting to drop dramatically.  It wasn't a single instantaneous drop, but rather a continuous and steep downward trend, not associated with any code updates on the web site.  Upon further analysis, we saw the drop coming exclusively from users of Chrome web browser; the numbers for users across all other browsers remained unchanged.  There was also a direct correlation between version of Chrome browser and number of web site visitors being recorded — the newer the version, the fewer the visitors — though the number were always there and at no point did the number of users with a specific Chrome browser drop completely to zero.  It would've been much easier to identify the issue if a particular Chrome version caused complete and sudden drop in user numbers, but it did not, so we started looking at Chrome browser settings that were introduced with new browser releases at the time the first drop in web user number was observed.

The issue was traced back to a February 2020 update in Chrome web browsers, which introduced two new settings in the default browser settings (default state for these settings being "enabled").  These flags are responsible for the transmission of third-party cookies, and in our case this was of extreme importance since our web site was in an iFrame, and all cookies from Google Analytics were being blocked.

#same-site-by-default-cookies
#cookies-without-same-site-must-be-secure

available from the link in chrome "chrome://flags"

each flag has 3 states: default, enabled, disabled (default = enabled). 

The transmission of third-party cookies is allowed only in the "disabled" state, in other states the transmission is blocked for security reasons.  
 
The key for transmitting analytics data from an iFrame is forcing Google Analytics and Google Analytics cookie to set "cookieFlags - SameSite = None; Secure".  Setting "cookieFlags - SameSite = None; Secure" requires a working HTTPS on the web site with iFrame; without HTTPS, cookies will be blocked.
 
There are multiple ways for passing Google Analytics data with this settings, and in our case we did it using Google Tag Manager (GTM). 

Inside the GTM container, locate the variable containing "Analytics Tracking ID" and change "cookieFlags" in "More Settings -> Fields to Set".

additional information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Categories:

wordpressSEOweb designDrupalADAWeb DevelopmentproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Jun 16th, 2021 by Max Tokman

Off-Site Services is recognized for its commitment to customer service and expertise in our open-source web development with Excellence Award from UpCity. This award is based on verified reviews from real-world customers who had first hand experience with us on projects ranging from Drupal development to WordPres...

Dec 19th, 2019 by Max Tokman

Merry Christmas to all, the naughty and the nice! The ones who cleared their cache and the ones who thought twice 'bout the impact it wreaks on the speed of their site content, if ever in need. The bold and the cautious, the expert and the newb who'd rather shy away at the mere mention of "compute" Cr...