DEV Community

loading...

Opt your Netlify, Vercel or Github Pages site out of Google's FLoC Network

sgolovine profile image Sunny Golovine Updated on ・3 min read

EDIT 3: Github Announced yesterday that FLoC will be disabled on all Github Pages. If your site is hosted on Github Pages feel free to skip this article, Github has you covered.

EDIT 2: Some readers have mentioned that the Github Pages solution does not work. Namely from this Github thread and this one. My suggestion here is to move off of Github Pages if this is something you really care about. Both Netlify and Vercel are fantastic hosts and offer the ability to disable FLoC via headers.

EDIT: One of the commenters pointed out that during the FLoC origin trial, FLoC is only loaded and computed when the site contains ads-related resources

During the FLoC origin trial, pages on websites that don't opt out will be included in the FLoC calculation if Chrome detects that they load ads-related resources or if they use document.interestCohort(). Pages served from private IP addresses, such as intranet pages, won't be part of the FLoC computation.

What this means is that if you are not running Google Ads on your site, you will not be opted into FLoC during the origin trial. I would personally still recommend opting out as FLoC will likely be loaded on all sites after the trial period is over.

More Information (google.com)

Federated Learning of Cohorts (or simply FLoC) has made quite a stir in tech circles in the past few days. While I'm by no means expert enough to explain to you how it works, long story short it's a new way for Google to track users now that cookies have become persona non grata in the tech world.

No one in the privacy space is happy about this. The EFF wrote a scathing article on it and companies like DuckDuckGo and Brave have already taken steps to block it on their search engines and browsers.

Plausible Analytics wrote up a report on what FLoC means for developers and, like all things from Google, it's "opt-out" rather than "opt-in", meaning if you do not take action on your site, Google will opt your site into FLoC. We should probably tell Google not to do that.

At it's core all you need to do is add this header to your websites response headers:


Permissions-Policy: interest-cohort=()

Enter fullscreen mode Exit fullscreen mode

Like many of you here I run a number of sites through Netlify, Vercel and Github Pages. Here is a quick breakdown of how to opt-out of FLoC on all 3 platforms.

Netlify

Headers in Netlify can be added either via netlify.toml or your _headers file.


# netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    Permissions-Policy = "interest-cohort=()"

Enter fullscreen mode Exit fullscreen mode

# _headers

/*
  Permissions-Policy: interest-cohort=()

Enter fullscreen mode Exit fullscreen mode

Github Pages

Unfortunately it seems that Github Pages does not allow you to set your HTTP headers. Luckily we can implement a workaround by adding this to the <head> of your root HTML document.


<meta http-equiv="Permissions-Policy" content="interest-cohort=()"/>

Enter fullscreen mode Exit fullscreen mode

Vercel

Like Netlify, Vercel lets you set response headers through a vercel.json file. To do so add this to the headers block in your vercel.json file. You can read more about Vercel's configuration options here

{
  ...
  "headers": [
  ...
    {
     "source": "/(.*)",
     "headers" : [
        {
          "key": "Permissions-Policy",
          "value": "interest-cohort=()",
        }
     ]
    }
  ]
}

Enter fullscreen mode Exit fullscreen mode

Conclusion

Part of being a professional and responsible web developer is making sure you are good steward of your users' data, even if you don't directly ask them for it. While major browsers block FLoC already, adding these response headers to your site will ensure that users that aren't using those browsers are still safe from tracking.

If you enjoyed this post check out some of my other writing

Discussion (7)

pic
Editor guide
Collapse
rowan_m profile image
Rowan Merewood

There's been some confusion around this around sites being included in FLoC during the Origin Trial. The only sites that are opted-in are sites that are detected as loading ads resources or sites using FLoC.

To put it simply: if you don't have ads on your site and you're not using the FLoC API then your site is not opted-in to FLoC calculation.

That's explained here: developer.chrome.com/blog/floc/#ho... and I'm happy to answer questions too.

Collapse
sgolovine profile image
Sunny Golovine Author

Thanks for clarifying Rowan! Really appreciate it, I will update my article with to make it more accurate.

Collapse
boldewyn profile image
Manuel Strehl

Unfortunately, the Github Pages solution with meta tags does not work, as Paramdeo Singh details here: paramdeo.com/blog/opting-your-webs...
A pity!

Collapse
sgolovine profile image
Sunny Golovine Author

Aw snap. Thanks for pointing this out. Kind of sucks you can't do that with Github Pages but then again I think Github made Pages explicitly super simple and if you need anything more then go to Netlify or Vercel.

Collapse
sosdanix profile image
Sosdani

what did you do with problem?

Collapse
benjaminwolkchen profile image
Benjamin Wölkchen

Here is an article, why this whole opt-out thing is BS: seirdy.one/2021/04/16/permissions-...

Collapse
hexandcube profile image
Hexandcube

GitHub now blocks FLoC on their entire platform (inluding GitLab pages).