This site is being remade and I won't be updating this for a while. Expect a lot of broken links, design and functionality. If all goes well, things should be stable by the end of 2022. Thank you for understanding.

HomePosts

Adding Permissive CORS to Netlify

Published

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"

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! ↩︎