4

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

 3 years ago
source link: https://dev.to/sgolovine/opt-your-netlify-vercel-or-github-pages-site-out-of-google-s-floc-network-3nhl
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

Apr 16

・2 min read

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 modeExit 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 modeExit fullscreen mode

# _headers

/*
  Permissions-Policy: interest-cohort=()
Enter fullscreen modeExit 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 modeExit 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 modeExit 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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK