What is Cross Origin Resource Sharing (CORS) policy? How it works?

Cross Origin Resource Sharing is a http header based mechanism that supports secure cross-origin requests and data transfers between browser and server.

CORS is purely between browser and server header communication and not involving http clients like Postman. Before going to deep into CORS, lets look into technical topics involved.

• Origin: Origin is having three parts in the form scheme://host:port.
  1. Scheme: http or https
  2. any host name
  3. Port number
  Some of the examples of origin are
  - http://my-web-site.com:1989
  - https://my-web-site.com:1989
• Resource:
  - Any data item which is retrieved/updated in the server
  - User details or image or a record in the database are some of the examples for a resource
• Same Origin Policy:
  -If Requested origin and server origin(including scheme and port ) are same, then we can say both are in same origin policy.

Same Origin Policy

• Cross Origin Policy:
  - if requested origin and server origin are different, we can say there are in cross origin

Cross Origin Policy

These days due to multiple services are involved in the same application(like Super App) and most of the application are micro-service based, accessing cross origin server is very common.

• CORS policy will help to prevent malicious script to access resource.
• CORS will follow different ways to retrieve resource and create/update/delete a resource
  - METHOD 1: for GET http method used to retrieve resources from server
  - METHOD 2: Using POST/PUT/DELETE http method

METHOD 1: when retrieving resources from server, Browser will follow below steps.

Step1: Browser will send GET request with Origin header

Step2: Server will check Origin header and send response with Allow-Access-Control-Origin header

Step3: Browser will check Origin and Allow-Access-Control-Origin header values, if both are matching browser will show the response and if not matching browser will throw an error as shown below pictures.

CORS http GET method flow for success response

CORS http GET method flow for failure response

METHOD 2: When creating/updating a resource in the server, Browser will follow below steps.

Step 1: Browser will send preflight http method OPTION with header Origin and Allow-Access-Control-Method

Step 2: Server will give response with headers Allow-Access-Control-Origin and Allow-Access-Control-Methods

Step 3: Browser will check both request and response headers Allow-Access-Control-Method and Allow-Access-Control-Methods.
- If matching, Browser will send similar to Method 1, but instead of GET, browser will send POST/PUT/DELETE
- If not matching, browser will throw an error

CORS http PUT method flow for success response

• Possible values for Allow-Access-Control-Origin are
  - Host name : Allow only one host name
  - List of host names: List of host names allowed
  - *: allow all the request, no restriction. This will be very dangerous and not safe
• Possible values for Allow-Access-Control-Methods:
  - HTTP method name: e.g PUT
  - HTTP method names separated by commas. e.g PUT, DELETE

Configuring CORS is not a solution to avoid attacks like Cross Site Request Forging(CSRF), But CORS will help to prevent cross origin related attacks.

Happy Learning!!!