Cross-Origin Resource Sharing (CORS)

Last updated on April 11, 2024

There are plenty of resources online that covers the same-origin policy so I will not go into details here. If interested, I highly recommend reading Google’s Browser Security Handbook.

Cross-Origin Resource Sharing (CORS) specification enables client-side open access across domain-boundaries generally restricted by same-origin policy. At a high-level, CORS allows client to opt-in to resources other than from same-origin. There are plenty of use cases where you need to share resources cross-origin. For example, Amazon may work with Facebook to leverage your friends’ feedbacks/recommendations while you browse through their products. If such service did exist, Amazon would opt-in to a CORS-enabled Facebook service.

Echo Service
I’ve written a simple echo service that will sends back an xml containing the message sent to it. This service is accessible from any resource under http://demo.jstrgames.com. Try it out from echo client. Since the AJAX call is made within the same origin, XMLHttpRequest trust the response. However, if the echo service is access from different site, even subdomain like http://jstrgames.com, XMLHttpRequest will reject this request. Try out the echo client from subdomain. Since this client violates the same-origin policy, XMLHttpRequest will not trust the response message.

CORS via jQuery
As you can see, there’s nothing special to the AJAX call below. By default, XMLHttpRequest will send an “Origin” HTTP request header.

$.ajax({
  type: "POST",
  url: "http://demo.jstrgames.com/echo.php",
  data: $("#echoForm").serialize(),
  dataType: "html",
  success: function(data, status, xhreq){
    $("#echoResponse").text($(data).filter(":first").text());
  },
  error: function(data, status, xhreq){
    $("#echoResponse").text("Error: " + status);
  }
});

The “Origin” can be used by the server resource to confirm the opt-in. In the echo service, only www.jstrgames.com is opted in. Once confirmed, additional response headers are added to inform the client that they can trust this response. Try this echo client.

$headers = getallheaders();
if( $headers["Origin"] == "http://www.jstrgames.com" ) {
  header('Access-Control-Allow-Origin: http://www.jstrgames.com');
  header('Access-Control-Max-Age: 3628800');
  header('Access-Control-Allow-Methods: POST');
}

Here’s a screenshot from Fiddler as echo client communicates with echo service.

There are a couple of notes to be aware of. First, Access-Control-Allow-Origin must match the Origin. If the values are different, XMLHttpRequest will not trust the response. Second, XMLHttpRequest for pre-IE10 browsers does not support CORS. However, IE8/9 does have limited support for CORS via XDomainRequest. To enable XDomainRequest on jQuery for IE8/9, you can use jQuery.XDomainRequest. That’s it