CORS POLICY

Information and technology has become a vital part of our lives in the 21^st century. Ranging from the multi-billion dollar industries to any individual all depend heavily on information and technology.

Let us take a real-life example of companies such as Uber or Ola, when a consumer books a cab through their site, what they do is connect the user to their driver-partners. If we look at this process in some depth we will find the following process taking place. The company has the information of their consumer. Whenever a consumer books a cab, the company retrieves the information of the consumer such as an address, phone number, and passes it to their driver-partners.

· The point to note here is that not all consumer information is passed to the driver-partner but it is filtered and only the essential information is passed to the partner which is needed by the driver to locate the location of the consumer. All that was done in this process was that information was stored and passed to different users with the help of technology.

Hence we understand that data and information are of utmost importance for these companies. But more than that the companies understand which data to share and what data not to share.

Something similar happens in the case when a browser and a server interact which each other to obtain data. The information which can be shared and the ones which cannot be shared in determined by something called CORS (Cross-origin resources sharing). In brief terms, CORS is a mechanism which allows restricted resource on a webpage to be requested from another domain outside the domain from which the first resource was served.

Drawing the analogy from our previous example, the driver-partner cannot ask the company for the Phone number of the consumer but has to interact via the company with the consumer. CORS policy defines a method to check for a way in which the browser and server can interact with each other and whether it is secured to allow cross-origin requests.

Cross-origin requests: The resource request outside the origin is called as cross-origin request

Here we see the user loads a page from website-A. While the page is loading an Ajax request is made to the website-B. This is called a cross-origin request.

Ideally, the browser should restrict the cross-origin request made by server-A. Hence the browser first asks permission from website-B, which is also called a pre-flight request. If the preflight request is successful the web-browser allows the Ajax request to take place.

Otherwise, the request is unsuccessful and the web browser throws an error saying No: access-control-Allow-Origin. Which looks something like this.

While there is no such restriction in the place when the request is within the same origin.

WHY CORS?

CORS policy is an integral part of communication between various servers through browsers. As stated earlier all the information cannot be given to everyone. Hence CORS standard is needed because it allows servers to specify who can access its assets. It also specifies how the assets can be assessed.

It also ensures that the domain must be approved before the request can be sent. This prevents malicious activities.

HOW IS CORS IMPLEMENTED?

When a request is made by server-A to server-B. The server-B has to set the response header called access control allow origin.

The server-B then sets a URL for server-A.

WHAT REQUESTS USE CORS?

Used for Invocations of XMLHttpRequest or fetch APIs

2. WebGL textures

3. Images/video frame drawn to a canvas using drawImage ().

4. CSS Shapes from images.

WAIT WHAT ABOUT THE IMAGES THAT I USED TO TAKE FROM OTHER WEBSITES?

This is a genuine doubt for a daily user reading this article. Why don’t I get blocked or face the error mentioned earlier? This has a very simple answer to it, the thing is that:

Unlike AJAX requests, browsers do allow embedding most content from other websites, such as images, scripts, CSS, etc. Some exceptions to this are iframes, depending on the configuration and browser the user is using.

Then obviously the question arises, isn’t this a loophole that can be manipulated by malicious users, since the user can use an <img src=” “> to make a malicious GET request to another website instead of loading an image. This might expose some of the confidential information and put the website in vulnerable hands. Hence servers do some additional work from their end to ensure safety and security using CSRF tokens or transaction tickets.

So can't I make AJAX requests to an API outside the origin from by browser?

This is where CORS policy comes into play. CORS basically allows servers to specify certain trusted origins. Browsers that implement the CORS policy have to include HTTP header origin in requests made by origin.

Let us take the example of Make My Trip. Make my Trip is not a company having its own hotels, flights. They are basically a bridge between user and various other companies.

So when a user wants to book a flight ticket from Bangalore to Mumbai. What MakeMyTrip does is make a request to these websites like Indigo, Spice-Jet, air-Asia, etc. This is an example of how API

The Companies have given access to Make My Trip to fetch information from their database. The same is how the server allows specific users to access their website and some privileges which normally are not made available to all users.

In the above image you can clearly see that requests coming from the same domain are accepted but when it comes from a different domain CORS policy comes into play which restricts the incoming request. But in the third case, even though the request comes from a different domain it works fine as CORS has been enabled for the domain2.com site as it is trusted.

CONCLUSION

This is just a brief overview of the process at work when we interact with other websites, servers, and the basics of CORS policy. It can be seen how this policy determines and affects our day-to-day interaction with other servers.

We can also imagine the consequences of such policies would not have been in place.

Finally, data, as we know, is of utmost importance in this age, hence protecting that from getting into the wrong hands is also of utmost importance, where the CORS policy helps a lot.

Connect with me on LinkedIn