DEV Community

Cover image for ✋🏼🔥 CS Visualized: CORS

✋🏼🔥 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...
Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

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.

Collapse
 
lydiahallie profile image
Lydia Hallie

Thank you! 😃

Collapse
 
ajiteshsingh profile image
Ajitesh Singh

welcome

Collapse
 
jreinhold profile image
Jeppe Reinhold

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.

Collapse
 
kewbish profile image
Emilie Ma

Really clear article - gj!

Collapse
 
yashsway profile image
Yash Kadaru

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

Collapse
 
tommulkins profile image
Tom Mulkins • Edited

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...

Collapse
 
lydiahallie profile image
Lydia Hallie

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

Collapse
 
owfm profile image
owfm

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?

Collapse
 
epic_qi profile image
Epic Lee • Edited

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

Collapse
 
caioiglesias profile image
Caio Cesar Iglesias

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.

Collapse
 
pavelloz profile image
Paweł Kowalski • Edited

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 ;)

Collapse
 
jeromefitzpatrick profile image
jeromefitzpatrick

@pawel Kowalski

You are correct - either this is an error or maybe api.website.com allows the mywebsite.com origin!

Collapse
 
hanskerkhof profile image
Hans Kerkhof

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 ;-) )

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

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

Collapse
 
lydiahallie profile image
Lydia Hallie • Edited

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 😃

Collapse
 
thatiitgirl profile image
thatIITgirl

WOW! I'm amazed with the clear explanation. Also Lydia, Could you tell me what software you are using for animations. I so want to work on that. :) . Please !!

Collapse
 
prof3ssorst3v3 profile image
Steve Griffith

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.

Collapse
 
serializator profile image
Julian

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) 😅

Collapse
 
mariofix profile image
Mario Hernandez

Very very easy to understand, thanks!!

Collapse
 
charanweb profile image
CHARAN

Im a beginner but I understand so much only because of Animated/Gifs. Thanks is not enough for efforts and Hardwork. But Im jobless. I will definitely show my Gratitude when i get job. Thank you so much Mam❤️

Collapse
 
bennycode profile image
Benny Code

@lydiahallie thank your for this very comprehensive article! Your illustrations and animations make dealing with CORS fun! Small note: The link to "a small blog post" actually shows a page called "essayhawk"?!

Collapse
 
dannybarrientos profile image
Danny Andres Barrientos

Great article, thanks! , thank you so much for your post on CORS! It is a very clear and concise explanation of a topic that can be quite complex. I loved the way you used images and diagrams to illustrate the concepts. This made it very easy to understand, even for someone who doesn't have a strong understanding of web security. I also appreciated the fact that you provided code examples for each scenario. This helped me see how the concepts applied in practice.

Overall, I think this is a great resource for anyone who wants to learn about CORS.

Thanks again for your excellent work!

P.S. I also really enjoy your blog. Keep publishing such useful content!

Collapse
 
a0viedo profile image
Alejandro Oviedo

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.

Collapse
 
charan1692_10 profile image
Charan1692

Best articles with best GIF's . More power to you Lyndia.
Request : Can you write Blogs on Frontend Architecture.

Collapse
 
avcwisesa profile image
avcwisesa

Hi! This is an amazing post! I have to ask, how do you create these cool visualizations? Interested to try it out 😆

Collapse
 
kpulkit29 profile image
Pulkit Kashyap

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

Collapse
 
rbaswmbrandel profile image
Marcus Brandel • Edited

Is it possible/common that some server side error could occur which would prevent the full response from being generated so the Access-Control-Allow-Origin header is never returned on the response. Resulting in the dreaded CORS error. Even if the origin IS allowed?

Collapse
 
iamnihal profile image
Nihal

This is so nicely written. Thanks for this awesome article.

Collapse
 
artoodeeto profile image
aRtoo

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

Collapse
 
devlazar profile image
devlazar

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

Collapse
 
djdmorrison profile image
djdmorrison

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

Collapse
 
kpulkit29 profile image
Pulkit Kashyap

I am always looking forward to reading your blogs.

Collapse
 
markgoho profile image
Mark Goho

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 😎

Collapse
 
tcelestino profile image
Tiago Celestino

Great article.

Collapse
 
chidioguejiofor profile image
Chidiebere Ogujeiofor

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

Collapse
 
beginwithjs profile image
beginWithJS

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

Collapse
 
yuripetyhov profile image
YuriPetyhov

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

Collapse
 
yonidavidson profile image
Yoni Davidson

Very nice work, I really enjoyed the visualisations !

Collapse
 
ezrahnyanat profile image
Ezrah Nyanat

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

Collapse
 
mitchobrian profile image
Michael Palmer

👍

Collapse
 
shravan20 profile image
Shravan Kumar B

How do you create such apt animations?

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

Collapse
 
gitsanto profile image
RaiS4N2s

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

Collapse
 
reythedev profile image
Rey van den Berg

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

Collapse
 
aaronjoemoreno profile image
aaron moreno

Amazing post. I didn’t realize you wrote this Lydia until I saw your pic at the end. Just saw your honeypot vid the other day. So awesome

Collapse
 
skychx profile image
skychx

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

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks for the awesome visualization, but what I don't get how is it possible that value of CORS is set on the server, shouldn't it be set on the client, don't that be more secure?

Collapse
 
ibrahim_elazb profile image
Ibrahim-Mohamed

It is very very helpful, Thanks

Collapse
 
prakashravichandran profile image
Prakash Ravichandran

Thank you lydia for your wonderful hardwork.

Collapse
 
chaitu05 profile image
kumar m • Edited

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..?

Collapse
 
lydiahallie profile image
Lydia Hallie

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!

Collapse
 
uptownhr profile image
James Lee

@lydiahallie What are the tool sets that you are utilizing to create these animations? I love the simplicity and effectiveness? Would love to see a video demo of you creating one of these :)

Collapse
 
haideralise profile image
Haider Ali

Great article and best illustration.

Collapse
 
hayk1997 profile image
Hayk-1997

Awesome explanation

Collapse
 
mino profile image
minoblue

Beautifully explained as you are. 😍

Collapse
 
franciscocaldeira profile image
Francisco

I love the animated images :b

Collapse
 
timnguyen90 profile image
Tim Nguyen

Thank Lydia,

Your pictures can tell all of the thing that we need!

Thank you for your great post!

Collapse
 
ravics09 profile image
Ravi Sharma

Great job💯

Collapse
 
late_riser profile image
late_riser

Great article! May I know which tool you used to generate these animations?

Collapse
 
epover profile image
epover

I think your work is wonderful! Update point Python 😂

Collapse
 
island profile image
IsLand

Thank you~

Collapse
 
hamid814 profile image
hamidbakhtiari • Edited

awesome stuff there for sure!

Collapse
 
zahirinatzuke profile image
Yohan González

Muy buena la explicacion, me ha encantado

Collapse
 
felipesaev profile image
felipesaev

how to maker that gifs ?

Collapse
 
mkubdev profile image
Maxime Kubik

You can use Screen2Gif :)

Collapse
 
roshnet profile image
Roshan Sharma • Edited

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.

Collapse
 
cpothirajan profile image
cpothirajan

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?

Collapse
 
kpulkit29 profile image
Pulkit Kashyap

No it does not mean that

Collapse
 
ramesh profile image
Ramesh Elaiyavalli

Great and clear post Lydia. 👍✌️

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

A nice and quick way to check CORS issues.

Collapse
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
joewalker profile image
Teerawit Laothong

Can I translate this blog to Thai language?

Collapse
 
nandansn profile image
Nandakumar R

Thanks

Collapse
 
mcwiise profile image
Captain Mcwiise

Neat explanation!, which tool do you use to create your .gif animations?

Collapse
 
hoanghungict profile image
Nart

thankui

Collapse
 
samburns profile image
SamBurns

good article. i like this type of article
black magic specialist in Kerala

Collapse
 
chusynuk profile image
Eloi

This is great! Pure GOLD! :)

Thanks a lot for this super clear explanation!

Collapse
 
rajshekhar profile image
Rajshekhar

Wow.. Easy read and understand the concepts

Collapse
 
paulorcv profile image
Paulo Roberto Campos de Vasconcelos

Great work! Thank you!

Collapse
 
jakemetzdev profile image
Jake Metz

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

Collapse
 
hamodey85 profile image
Mohammed Almajid

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

Collapse
 
hamzamateen profile image
HamzaMateen

This is so well done!

Collapse
 
drarig29 profile image
Corentin Girard

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

Collapse
 
sureshnanjan profile image
Suresh Nanjan

Kudos to your efforts and the elegant concept flow in all your articles in this series. Keep up the good work and my heartfelt gratitude for making these concepts clear to everybody.