Opt your Netlify, Vercel or Github Pages site out of Google's FLoC Network
Tags: google, react, javascript, webdev
Published: 2021-04-16 13:52:19

---
title: Opt your Netlify, Vercel or Github Pages site out of Google's FLoC Network
published: true
description: Google recently announced FLoC which is a new method to track users. In this post I will show an easy way to opt-out of FLoC.
tags: google, react, javascript, webdev
//cover_image: https://direct_url_to_image.jpg
---

EDIT 3: [Github Announced](https://github.blog/changelog/2021-04-27-github-pages-permissions-policy-interest-cohort-header-added-to-all-pages-sites/) 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](https://github.com/w3c/webappsec-permissions-policy/issues/55#issuecomment-412077633) and [this one](https://github.com/w3c/webappsec-permissions-policy/pull/313#discussion_r286820352). 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)](https://developer.chrome.com/blog/floc/#how-can-websites-opt-out-of-the-floc-computation)


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](https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea) 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](https://plausible.io/blog/google-floc) 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:

```bash

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.


```toml

# netlify.toml

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

```


```bash

# _headers

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

```


## Github Pages

Unfortunately it seems that Github Pages [does not allow you to set your HTTP headers](https://stackoverflow.com/questions/14798589/github-pages-http-headers). Luckily we can implement a workaround by adding this to the `<head>` of your root HTML document.

```html

<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](https://vercel.com/docs/configuration#project/headers)

```json
{
  ...
  "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](https://sunnygolovine.com/blog)