CORS (Cross-Origin Resource Sharing)

Introduction

CORS (Cross-Origin Resource Sharing) is a mechanism implemented in web browsers that allows a web page to make requests to a different domain than the one it was served from. By default, web browsers impose the Same-Origin Policy, which restricts the web page to only make requests to the same origin (domain, protocol, and port) as itself. CORS relaxes this restriction by allowing controlled access to resources from other origins.

How CORS Works

When a web page makes a cross-origin request, the browser includes an Origin header in the request, indicating the origin of the web page. The server then responds with a set of CORS-specific headers that indicate whether the requested resource should be accessible from the requesting origin.

The CORS headers include:

• Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource. This header can return either a specific origin or a wildcard * to allow any origin.
• Access-Control-Allow-Methods: Indicates the HTTP methods that are allowed for the requested resource.
• Access-Control-Allow-Headers: Specifies the headers that are allowed in the actual request.
• Access-Control-Expose-Headers: Lists the headers that the response can expose to the web page.
• Access-Control-Allow-Credentials: Indicates whether the resource supports user credentials in requests.
• Access-Control-Max-Age: Specifies the time duration (in seconds) that the response can be cached.

These headers are enforced by the browser, which checks them before allowing the web page to access the requested resource.

Common CORS Scenarios

Simple Request

A simple request is an HTTP GET or POST request that meets certain criteria, such as only using safe methods and not containing any custom headers. In this case, the browser automatically includes the necessary CORS headers, and the server can respond with the appropriate Access-Control-Allow-Origin header allowing the request.

Example:

GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://www.example.com

Preflight Request

A preflight request is sent by the browser as a safety mechanism for more complex requests. It is an HTTP OPTIONS request that checks with the server whether the actual request is allowed by the specified CORS policy. The server should respond with appropriate CORS headers, including Access-Control-Allow-Origin and Access-Control-Allow-Methods, indicating that the actual request is permitted.

Example:

OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Handling CORS on the Server

To enable CORS support on the server, it needs to respond with the appropriate CORS headers in the server's responses. The server should validate the Origin header and determine whether the requested resource is accessible from the requesting origin. If allowed, the server should include the appropriate Access-Control-Allow-Origin header.

Different programming languages and frameworks have their own ways of handling CORS. Some frameworks may provide built-in middleware or configuration options to handle CORS headers automatically. Alternatively, server code can be implemented manually to set the necessary headers.

Conclusion

CORS is an important mechanism that allows web pages to interact with resources from different origins. It enhances the security of web applications by ensuring controlled access to cross-origin resources. Understanding how CORS works and implementing proper CORS handling on the server is crucial for building modern web applications.