Getting started with CORS (Cross-Origin Resource Sharing)

CORS or Cross-Origin Resource Sharing is a mechanism used to pass or share data between web servers. Essentially it is a policy containing a set of HTTP response headers.

Why CORS..?

The reason for CORS is stright forward. Lets say you wanted to access data sitting one Server A from your new shiny webapp hosted in the cloud (Server B). In an effort to prevent cross-site scripting your web browser has a built-in protocol called the same origin policy that prevents external access to data, limiting the communication between your two servers.

This problem is primarily prevalent when using Javascript to make AJAX requests for data across domains.
Utilyzing CORS however server A could be configured to accept external requests from ALL or specific external servers.

Making a CORS Request

To allow CORS on server A running Apache we would add the following to the
.htaccess file:

# Allow from a specific website or client
Header set Access-Control-Allow-Origin "http://www.Server-B.com"

#Allow from multiple websites but not all
<IfModule mod_headers.c>
  SetEnvIf Origin "http(s)?://(www\.)?(serverb|serverc|150.108.190.100)$" AccessControlAllowOrigin=$0
  Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
</IfModule>

# Or to allow from everywhere:
Header set Access-Control-Allow-Origin "*"

It is important to note that additional headers can also be added to further secure access between the servers that need to communicate.

Access-Control-Allow-Credentials: true
This property will include cookies from the remote server inside of the request. These are not included by default.

Access-Control-Allow-Methods: "GET, POST, PUT, DELETE, OPTIONS"
This property allows you to specify what methods are accepted on the remote server.

CORS Example
Our objective is to pass some JSON data from the foo.kodesmart.com subdomain to the kodesmart.com domain.
First, let's update the .htaccess file on the foo.kodesmart.com server

Access-Control-Allow-Origin: https://foo.kodesmart.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type 

The Javascript request to post some JSON data from subdomain to primary domain

<script type="text/javascript">
    var http;
    if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		http = new XMLHttpRequest();
    } else {
		// code for IE6, IE5
		http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var url = "http://foo.kodesmart.com/index.php";
    var params = "";
    http.open("POST", url, true);

	//Send the proper header information along with the request
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http.onreadystatechange = function() {
		if(http.readyState == 4 && http.status == 200){
			document.getElementById("demo").innerHTML = http.responseText;
		}
	}
	
	http.send(params);
</script>

Receiving the Request with PHP

<?php
	if (isset($_SERVER["HTTP_ORIGIN"]) === true) {
		$origin = $_SERVER["HTTP_ORIGIN"];
		$allowed_origins = array(
			"http://kodesmart.com"			
		);
		
		if (in_array($origin, $allowed_origins, true) === true) {
			header('Access-Control-Allow-Origin: ' . $origin);
			header('Access-Control-Allow-Credentials: true');
			header('Access-Control-Allow-Methods: POST');
			header('Access-Control-Allow-Headers: Content-Type');
		}
		if ($_SERVER["REQUEST_METHOD"] === "OPTIONS") {
			exit; // OPTIONS request wants only the policy, we can stop here
		}	
	
		// continue
		..
	}
	
?>