Adding Permissive CORS to Netlify

CORS can be pretty annoying, but it’s important for security. Thing is, most sites don’t need strict CORS. Not saying that you should ignore CORS, just that you need to examine whether you need it and you typically don’t.

For me, I’m mostly okay with a permissive CORS so that people can run client-side scripts without a proxy, like a browser based RSS reader¹. The only exception is fonts because I don’t want anyone hotlinking them and using my site as a CDN. I do plan on adding videos at some point.

Anyways, here’s part of my headers.toml file.

[[headers]]
    for = "/*"
    [headers.values]
        Access-Control-Allow-Origin = "*"
[[headers]]
    for = "/*.woff2"
    [headers.values]
        Access-Control-Allow-Origin = "codelab.farai.xyz"

Previously, if you wanted to fetch something like the RSS feed, it would fail with an error like this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://faraiscodelab.netlify.app/index.xml. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).` [Learn More]

With the aforementioned CORS headers set, fetching everything but the fonts works fine. They could always pass the fetch through a proxy, but it’d probably easier to host the fonts themselves.