loading...

✋🏼🔥 CS Visualized: CORS

Lydia Hallie on July 27, 2020

It’s every developer’s frustration once in a while to see that big red Access to fetched has been blocked by CORS policy error in your console! 😬 A... [Read Full]
markdown guide
 

This CS Visualized series is unique and a bomb because of those wonderful diagrammatical GIFs/explanation. I want to thank you for all the hard work you put in your articles.

 
 

I love when anything is explained visually. This is so well made! Thank you!

 
 

This is amazing - great down to earth explanation of how CORS works, but just as important, WHY CORS works. You rock!

If I may add, I think it's missing one of the most important parts of CORS, namely that it is NOT a reliable security measure. As it is an opt-in feature by the browsers, it can easily be bypassed by requesting with curl or Postman, or just by installing a browser extension that disables the policy client-side.
I've seen many software engineers mistakenly saying "oh, we've secured our endpoints with CORS, no unauthorized request can happen" - which is not true. It may prevent the user from being tricked into insecure flows (as you explained), but it will not stop hackers from explicitly trying to make malicious requests.

 

Great article, thanks! This article explains it so beautifully that I can send to colleagues back-enders who have a glassy look full of incomprehension when i mention I need CORS in the frontend. (and that happens more often than you think ;-) )

 

I guess I fell in love with the CS Visualised series right now, can't wait to read many more! 🎉

When I read about the "Origin" which is set on the request I thought "why not spoof it", obviously immediately after that I thought "if that would work I'd be Hans Klok" (I don't know whether that translation of the Dutch phrase works in English) 😅

 

Those animations really make it easy to digest the topic.

I might have missed it above but important to note that Access-Control-Allow-Origin allows for a single origin value. Otherwise the server will need some middleware to return the header with the right origin value when more than one origin is allowed.

developer.mozilla.org/en-US/docs/W...

 

Ohhh yes! I made the mistake once by padding an array instead haha. I'll update the post accordingly asap :)

 

Sorry if I'm missing something... But in your very first example:

Let’s say we’re trying to fetch some user information on our mywebsite.com website from a server that’s located at api.website.com

And it goes through fine... How come this is not a cross origin request? It's a different domain and subdomain isn't it?

 

You are correct. It's just an intro showing a request that works followed by one that fails. They seem similar, but are being affected by the same-origin policy.

api.website.com has to be returning Access-Control-Allow-Origin: https://www.mywebsite.com since the second example denies the request coming from anotherdomain.com.

 

I believe that's a typo. Should both be mywebsite.com, otherwise it's a cross-origin request

 

Let’s say we’re trying to fetch some user information on our mywebsite.com website from a server that’s located at api.website.com!
...
Let's try the exact same request but from another domain. Instead of making the request from mywebsite.com, we’re now making the request from a website located at anotherdomain.com.

Either i dont understand the next couple sentences explaining how to tell if request is cross origin, or there is an error here, because it looks to me that both requests have been cross origin ;)

 

Very well done.
One thing I would suggest pointing out to people is the HTTP Method OPTIONS for the Preflight request, and what that means on the server.
The OPTIONS method gives us a great hook to run server-side code that is specific to these preflight requests.

 

Does CORS affect cURL or wget? Or, does enforcing CORS help?

 

Good question! By default, CORS is only enabled in user agents (e.g. a browser). So if I were to send the exact same request using cURL in say the terminal, this request wouldn't automatically contain the Origin header and CORS wouldn't be enabled.

If you want to test whether your server has CORS enabled, you can manually add the Origin header to the request. If the response contains the Access-Control-Allow-Origin header, you know it's working 😃

 

I wanted to say first that I'm a big fan of your Visualized series! The amount of details and the quality of the animations is extraordinary.

Not-CORS-related question: what did you used for rendering the "SHORCUTS" table? is it plain HTML? It seems like anchor for the "Credentials" section is not working.

 

Your visual explanation is perfect for me to understand. Thank you @lydia.

 

They say there are two types of web developers: those that don't understand CORS and dirty, rotten liars. Thanks for proving there's a third option 😎

 

How did you make those beautiful gifs ?It is awesome.Great Job!

 

How do you create such apt animations?

Article was so neat and clean. Clever way of writing 👌

 

Thank you! These gifs give my brain life!
Fantastic explanations👏

 

Use eBookmarker to save important topics of this blog and directly navigate to them the next time you visit.

 

I am always looking forward to reading your blogs.

 

Thank you for it. It is amazing, I have problems with CORS all the time, but now I have perfect tutorial)

 

Really good explanation, you are a visual learner, aren't you? :D

 

Great article, you made what can be a tricky concept so clear!

 

Another great and clear explanation! Thanks for taking the time to put this together :)

 

Really nice one. I'm curious to know what tool you used to create the visualisation

 

Very nice work, I really enjoyed the visualisations !

 

Great and clear post Lydia. 👍✌️

Check out httptoolkit.tech/will-it-cors/

A nice and quick way to check CORS issues.

 

Can I translate this blog to Thai language?

 

Hi, can I translate your article into Chinese? I'll mark the top of the article with a link to your original article.😊

 

Good article easy to follow those animations make it a joy to read thanks.

 

I always had trouble understanding why do preflight requests even exist. 😅
Thanks for taking the time time to create those wonderful GIFs. Please keep up the good work.

 

I stand by my words. "YOU'RE THE GWOAT". Thank you for this.

 

Thank you for the article. I have been in web dev for few years but didn't know about simple and preflighted requests.
Can we fake an "origin" header by manually adding it and access resources..?

 

Origin is actually a "forbidden header", you can't manually set it! 😊 We can't fake the Origin header that way.

However, making the exact same request outside a browser (eg. cURL) would give you access to the resources!

 

Hi, thanks for this wonderful explanation. I do have a basic question that when you say same domain does it mean always on the same computer?

 
 

One of my favorite follows on the web. Thank you for all the hard work you put into the animated gifs! The visual aspect is HUGE for us visual learners

 

What do you use to make your animations? After Effects?

 

I want to thank you for this great article.
what did you use to make this gif images?
thanks

code of conduct - report abuse