Same Origin Policy & CORS

Introduction

So what are we talking about when you hear the phrase 'same origin policy'? Simply put, 'same origin policy' is a concept in which web browsers allow content to be shared between web pages, but only if those pages adhere to the criteria of coming from the same origin. This is a built in feature of most web browsers, and is intended as a security feature in which to deter bad actors from trying to manipulate web pages using malicious code.

This policy, while great for security, can limit the ability for verified websites to share data between each other. This inhibits the functionality of many scripts and APIs. In order to work around same origin policy, web browsers have agreed to a system called CORS, which allows certified web pages to share with each other, no matter their origin.

Same Origin Policy

Same origin is determined by a handful of factors. These are:
• Protocol: These include options such as http, https, or ftp, and usually precede the rest of a URI call.
• Port: A communication endpoint. There are many of these (80 being the most common one, representative of http calls), and they represent which entry point we're trying to access a URL from. Think of a website as a building, with the ports being different entrances to this building.
• Host: The meat of the URL. This is the address that we are trying to access.

Here are some examples in order to illustrate what does and does not constitute a 'same' origin. We're going to compare these to our base example: http://www.example.com/dir/page.html

• http://www.example.com:81/dir/other.html

  In this case, the protocol and the host match, but the port does not. This would be a failure

• https://www.example.com/dir/other.html

  In this case, the protocol doesn't match. This would be a failure

• http://en.example.com/dir/other.html

  In this case, the host doesn't match. This would be a failure

• http://example.com/dir/other.html

  This looks like it might match, but it doesn't. Same origin policy is going to look for an exact match, and this address doesn't fit the bill. Failure.

• http://example.com/dir/other.html

  This looks like it might match, but it doesn't. Same origin policy is going to look for an exact match, and this address doesn't fit the bill. Failure.

• http://www.example.com/dir/page2.html

  This is an example of an address that has the same protocol, host, and port. MASSIVE SUCCESS!

CORS

So, same origin policy has a few inherent hangups. Most notable is that sharing data between websites is rad! Allowing scripts to exercise between sites allows us all kinds of cool functionality. So how do we get around same origin policy? That's where CORS comes in.

CORS stands for Cross Origin Resource Sharing, and that's exactly what it allows us to do. CORS utilizes http headers to certify secure connections between sites. Think of a class field trip. To get on the bus and go to the museum, you need a signed permission slip. Your teacher is very bright and won't let a forged signature pass her inspection. The only way to go on the field trip is to have a certified signed permission slip. CORS is that very important parent's signature.

Same origin policy is a great security tool, that helps prevent malicious scripts from running amok in your browser. However, sometimes we want scripts to run in our browser! In order to do this, we can utilize CORS to send certified requests to another website for their data.