Google recently announced the rollout of their Federated Learning of Cohorts (FLoC), a new advertising-surveillance initiative that seeks to replace third-party cookies with a new user profiling technique that garners data generated by the browser itself.
However, from browsers to search engines, many services have publicly committed to blocking the technology. The EFF has written an overview of FLoC and it’s threats and has also developed a useful tool to test if a user’s browser is being used for data collection and fingerprinting. Also, GitHub just informed their users of the additional of an HTTP header that would block FloC on the code hosting platform in a recent blog post.
I’m also decided to opt my site out of FloC, by doing so…
NGINX
Add the following in the NGINX configuration file:
# default.conf
server {
location / {
add_header Permissions-Policy interest-cohort=();
...
}
}
Netlify
Add the following to the Netlify configuration file:
# netlify.toml
[[headers]]
for = "/*"
[headers.values]
Permissions-Policy = "interest-cohort=()"
Vercel
Add the following to the Vercel configuration file (vercel.json
):
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Permissions-Policy",
"value": "interest-cohort=()"
}
]
}
]
}
GitHub Pages
GitHub announced on 2021-04-27 that they will add the necessary FLoC protection header to all GitHub Pages sites served from the github.io
domain.
However, there is no way to add custom HTTP response headers (as yet) when using GitHub Pages with a custom domain.
GitLab Pages
If you use the Community Edition of GitLab you can set HTTP headers by adding the following to your gitlab.rb
file:
gitlab_pages['headers'] = [ "Permissions-Policy: interest-cohort=()" ]
Cloudflare Workers
We can create the following to set response headers:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
let response = await fetch(request)
let newHeaders = new Headers(response.headers)
newHeaders.set("Permissions-Policy", "interest-cohort=()")
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders
})
}
Add that Worker script to a domain by setting that domain as the Worker Route.
Notes
Adding <meta http-equiv="Permissions-Policy" content="interest-cohort=()"/>
to the <head>
of each page in an attempt to set the FLoC opt-out header not work.
This is due to both technical and usability reasons as only a small subset of headers can be set using http-equiv
— of which Permissions-Policy
isn’t one of them.
As an aside, HTTP headers should ideally be set by a web or proxy server in order for them to work as expected.
While major browsers block FLoC already, adding these response headers to the site will ensure that users that aren’t using those browsers are still safe from tracking.