DEV Community

loading...

Adding Permissive CORS to Netlify

Farai Gandiya
¯\_(ツ)_/¯
Originally published at codelab.farai.xyz on ・2 min read

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 reader1. 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"
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (0)