Same Origin Policy & CORS
Tags: cors, javascript, sameoriginpolicy
Published: 2019-08-19 07:33:12

<h3>Introduction</h3>

<p>So what are we talking about when you hear the phrase '<i>same origin policy</i>'? Simply put, '<i>same origin policy</i>' 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. </p>
<p>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 <b>CORS</b>, which allows certified web pages to share with each other, no matter their origin.</p>
<h3>Same Origin Policy</h3>

<ul>Same origin is determined by a handful of factors. These are:
<li><b>Protocol</b>: These include options such as <i>http</i>, <i>https</i>, or <i>ftp</i>, and usually precede the rest of a URI call.</li>
<li><b>Port</b>: A communication endpoint. There are many of these (80 being the most common one, representative of <i>http</i> 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.</li>
<li><b>Host</b>: The meat of the URL. This is the address that we are trying to access. 
</ul>
<hr>
<p>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: <b>http://www.example.com/dir/page.html</b>
<p></p>
<p></p>
<ul>
<li>http://www.example.com:<b>81</b>/dir/other.html
<p>In this case, the protocol and the host match, but the port does not. This would be a failure</p></li>
<li><b>https</b>://www.example.com/dir/other.html
<p>In this case, the protocol doesn't match. This would be a failure</p></li>
<li>http://<b>en.example.com</b>/dir/other.html
<p>In this case, the host doesn't match. This would be a failure</p></li>
<li>http://<b>example.com</b>/dir/other.html
<p>This looks like it might match, but it doesn't. Same origin policy is going to look for an <i>exact</i> match, and this address doesn't fit the bill. Failure.</p></li>
<li>http://<b>example.com</b>/dir/other.html
<p>This looks like it might match, but it doesn't. Same origin policy is going to look for an <i>exact</i> match, and this address doesn't fit the bill. Failure.</p></li>
<li>http://www.example.com/dir/page2.html
<p>This is an example of an address that has the same protocol, host, and port. MASSIVE SUCCESS! </p></li>
</ul>
<hr>
<h3>CORS</h3>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4629n77b49wh7x59jd6j.png)
<p>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 <b>CORS</b> comes in.</p>
<p><b>CORS</b> stands for <i>Cross Origin Resource Sharing</i>, 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.</p>
<p>Same origin policy is a great security tool, that helps prevent malicious scripts from running amok in your browser. However, sometimes we <i>want</i> 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.</p>