CORS: Cross-Origin Resource Sharing

What is CORS?

CORS stands for Cross-Origin Resource Sharing. CORS is a standard for accessing Web resources on different domains. CORS allows web scripts to interact more openly with content outside of the original domain, leading to better integration between web services.

For example, an HTML page served from http://domain-a.com makes an img source request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images, and scripts from separate domains, which is a good way to optimize the website, by keeping static resource separately, for example on AWS S3 storage.

To understand the concept of CORS you must have a good understanding of HTTP Headers.

HTTP Headers

HTTP Headers allow the client and the server to pass additional information with the request or the response. When we enter a URL in the browser to access any website, the browser prepares an HTTP request and sends it to the server and then the server sends back the HTTP response to the browser. Both the HTTP request and response have HTTP headers included which carry the general information related to how the request should be treated or the response should be evaluated.

Headers (according to their contexts)

• General Header: Header applying to both request and response. No relation to data eventually transmitted.
• Request Header: Information about the resources to be fetched.
• Response Header: Information about the response, like its Keep-Alive, Response Status Code, etc or information about the server itself.
• Entity Header: Information the bout body of entity like its content length etc.

Same-Origin Policy

To prevent websites from tampering with each other, web browsers implemented a security measure known as the same-origin policy. Under this policy, a web browser permits scripts contained in a one web page to access data in another web page, but only if both web pages have the same origin (defined as a combination of URL scheme, hostname and port number ).

In simple words, a url example.com/abc.html can demand resources only from URLs of example.com and not from any other web domain like diffexample.com

But using CORS we can add HTTP headers which can instruct the web browsers on how to use and manage cross-domain content.

How CORS works?

1. A user opens a resource on a webpage which references another domain. This is usually a JavaScript file, but can include fonts and CSS resources.
2. The user’s browser creates a connection to the second domain, adding an “Origin” HTTP header to the request which contains the first domain.
3. The second domain replies with an “Allow-Content-Origin” HTTP header which lists the domains allowed to make CORS requests. A ‘*’ wildcard allows all the domains to make a request. [ACAO: Access Control Allow Origin]
4. If the first domain is allowed to make the request, the second domain responds with the requested content.

For example, suppose web content on domain http://first.com wishes to invoke content on domain http://second.com, code specified below might be used within JavaScript deployed on first.com:

var invocation = new XMLHttpRequest();

var url = 'http://second.com/resources/public-data/';

function callOtherDomain()
{
    if(invocation)
    {
        invocation.open('GET', url, true);
        invocation.onreadystatechange = handler;
        invocation.send();
    }
}

This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:

Cross-Origin Resource Sharing is an important concept which all the Web Developers must know. This article touches only the tip of the iceberg and it's meant to give you a general idea about CORS and what it is used for. If you have any doubt, share in the comments below and we will definitely help you out.