Adding Permissive CORS to Netlify

Adding Permissive CORS to Netlify was first published on Farai's Codelab.

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.

1. This annoyed me with Youtube’s RSS feeds since they block fetches for them, even though it’s supposed to be shared! ↩︎

Thanks for reading! If you liked this post, consider supporting my work by:

• sharing my work,
• refering me for a job (or hire me for freelance work),
• sponsoring me on Patreon,
• buying Me A Coffee,
• buying Me A Ko-Fi,
• sending me a tip on Paypal,
• buy something on Amazon with my affiliate link (I’ll earn a commision on this as an amazon affiliate),
• or buy a domain on Namecheap with my affiliate link.