CORS, In A Way I Can Understand

Two days ago, I tweeted my frustration:

I was an hour in to diagnosing a tiny browser error that was breaking the entire project: "CORS error, Access-Control nice try, you can't do that, ha ha" (I'm paraphrasing).

Apparently, it resonated with a bunch of friends online.

So it got me thinking: What is CORS and how can I explain it so even I can understand it?

First, What I Learned CORS Was

Cross-Origin Resource Sharing (CORS) is a simple, browser- and server-implemented security protocol that tells which sites can communicate with which other sites.

Basically, if Site A (your site) wants to call Site B, it needs your permission to do so. But, it stops Site B from calling Site C, without your permission, and causing possible damage to your data or site, or stealing information, or any other variety of terrible things.

A great example of this would be an ad fed to you from a third-party source (which you allow) that wants to call www.stealallthispersonsdata.org (which you don't allow). The ad will show, but the data won't be stolen.

That is, if you set CORS up correctly.

And there are some beginner things to set up CORS. Here goes the way I look at it:

My Imperfect Metaphor

My wife and I need to step out of the house and we leave our 10 year old daughter in charge.

Why You Need CORS

We don't give our daughter any instructions on who to let in and what they can do. Stranger knocks on door, daughter lets stranger in. Stranger invites more strangers, robs our house, spray paints the cat, and steals our personal information.

CORS gives a framework of who is allowed in and allowed to call whom.

Setting the Access-Control-Allow-Origin

We tell our daughter, "Don't allow anyone in except for Miss Patty (our neighbor)." A knock at the door happens, and our daughter asks who it is. She then can make a decision based on who we told her to allow in.

This allows you to tell the browser which sites you will allow in.

Setting the Access-Control-Allow-Credentials

We tell our daughter, "Don't allow anyone in except for Miss Patty, or anyone who knows our secret code word."

Typically CORS doesn't include cookies or other authentication in its requests. Setting this to true throws cookies in the request as well.

Setting the Access-Control-Allow-Methods

We tell our daughter, "You can invite one friend over, but they can't paint the wall."

This tells the CORS request to allow which methods of request: GET, POST, PUT, DELETE. So, if you wanted a site to do a GET, but not to update anything, you can do that.

Setting the Access-Control-Max-Age

We tell our daughter, "You can invite one friend over, but they have to leave at 6 PM."

This one is really imperfect. This sets the value in seconds to cache preflight request results, such as the data in Access-Control-Allow-Headers and Access-Control-Allow-Methods headers.