What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]

Cross-Origin Resource Sharing (CORS) is a crucial security feature implemented as part of all major web browsers to restrict how web applications access the resources across different domains. Here’s a detailed look into how CORS works

What is CORS (Cross-Origin Resource Sharing) in nutshell?

CORS is a mechanism that allows servers to specify which domains are permitted to access their resources. By including specific HTTP headers in their responses, servers can control and restrict access to their data.

All the major browsers uses this mechanism to provide access across domains and uses HTTP HEADERs to determine whether to allow or restrict the access from one domain to another.

How CORS work?

Web browsers do the CORS requests in 2 Steps

1. Preflight Request or HTTP OPTION request: When a web application initiates a cross-origin request, in many cases, the browser first sends a preflight request (HTTP OPTIONS) to the server. This preflight request checks if the server allows the actual request based on its CORS policy.
   • Preflight Request Server Response: The server responds with CORS-specific headers to indicate whether the request is permitted. These headers define which origins are allowed, which HTTP methods are supported, and other relevant information.
2. Actual Request: If the preflight request is successful and the server permits the actual request, the browser proceeds with sending the actual request (such as GET or POST).

Key CORS Headers Required

Access-Control-Allow-Origin

Specifies which domains are allowed to access the resource. It can be set to a specific domain, "*", or null. It is not advisable to use '*' in production applications, which means resources can be accessed by any browser client and this may cause denial-of-service attack (DoS attack) attack.

Example:

Access-Control-Allow-Origin: frontendgeek.com : Server allows to access resources from frontendgeek.com client

Access-Control-Allow-Origin: * : Server allows to access resources from any client

Access-Control-Allow-Methods

Lists the HTTP methods like GET, POST, PUT, DELETE that are permitted for cross-origin requests.

Example:

Access-Control-Allow-Methods: GET, PUT, POST : Server only permits GET, PUT and POST requests from allowed client. In case of sending any other HTTP request like DELETE then server wont process that request and reject it.

Access-Control-Allow-Headers

Enumerates the HTTP headers that can be used in the actual request.

Access-Control-Allow-Credentials

Indicates whether credentials like cookies can be included in cross-origin requests. Server will process only if it is included as part of the the response HEADER.

What is a CORS Error?

When the cross-origin request is made from the client domain (browser) and if it is not allowed by the server’s CORS policy. In this case, the browser restrict the request and generates a CORS error.

There are 2 primary ways to handle CORS error

1. Configure the server to include the appropriate CORS headers which allows the client domain and the corresponding HTTP request type.
2. Another possible way is to use a proxy to handle cross-origin requests.

Security Implications of CORS

CORS enhances web security by allowing servers to control access to their resources. Properly configured CORS policies/headers help prevent unauthorized data access and mitigate risks such as Cross-Site Request Forgery (CSRF) and Denial-of-service (DoS) attacks.

Example Flow 

Simple Request:

1. Client: domain1.com makes a GET request to domain2.com/blogs.
2. Server: domain2.com responds with the blogs and Access-Control-Allow-Origin: domain1.com.
3. Browser: Checks the CORS header Access-Control-Allow-Origin. If domain1.com is part of the header value, it allows the blogs to be accessed by the web page.

Preflight Request:

1. Client: domain1.com wants to send a PUT HTTP request to domain2.com/blogs.
   1. In some cases, browser, sends an OPTIONS HTTP request before sending the actual request to validate the server support for CORS.
2. Server: domain2.com responds to OPTIONS request with response headers 
   1.  Access-Control-Allow-Methods: GET, PUT, POST
   2.  Access-Control-Allow-Headers: Content-Type.
3. Client: In case Access-Control-Allow-Methods contains the PUT, then browser sends the actual PUT request.
4. Server: Responds to the PUT request and includes Access-Control-Allow-Origin: domain1.com.
5. Browser: Checks the Access-Control-Allow-Origin header. If domain1.com is part of the header value, it allows the resource to be accessed by the web page.

Interaction Sequence Diagram of OPTION request in CORS

By setting up CORS correctly on the server, your web pages can safely request resources from other domains, keeping your web applications secure.