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

#google #react #javascript #webdev

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=()

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=()"


# _headers

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

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=()"/>

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=()",
        }
     ]
    }
  ]
}

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

Top comments (7)

Rowan Merewood • Apr 18 '21

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.

Sunny Golovine • Apr 18 '21

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

Manuel Strehl • Apr 23 '21

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

Sunny Golovine • Apr 23 '21

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.