Cross Origin Resource Sharing - CORS

Cross Origin Resource Sharing or CORS is a mechanism that allows restricted resources on a web server to be accessed by a web page from a different origin securely. It is a standard defined by the W3C to enable cross-origin HTTP requests while maintaining security.

• Table of contents

How CORS works technically

When a web page on one origin (origin 1 : https://originOne.com) tries to access a resource from another origin ( origin 2 : https://originTwo.com), the browser enforces the Same-Origin Policy (SOP) by default, blocking the request unless the server explicitly permits it.
CORS works by allowing servers to specify which origins are permitted to access their resources and under what conditions.

There are two types of requests in CORS -
1. Simple request
2. Preflight Requests

1. Simple Request

A request would be considered as a simple request if it follows these criterias (Made by CORS):

1. Request should be use only one of GET , POST or HEAD http method
2. If method is POST then the header Content-Type should be one of following : application/x-www-form-urlencoded, multipart/form-data, text/plain
3. It allows following headers : Accept Accept-Language Content-Language Content-Type and some browser specific headers (like: DPR, Downlink, Save-Data, Viewport-Width, Width)
4. The request should not contain any custom header

Browser sends simple requests(HTTP) directly. In response , server includes specific CORS headers in its response to indicate whether the request is allowed or not.

2. Preflight Request

If a request doesn't follow the criteria of simple request then browser sends a preflight request to the server before the actual request. This preflight request contains customs headers (who ask to the server should is send this request to you ?)

A preflight request is an OPTION http request that contains following headers :

1. Host : The destination server
2. Origin : Origin who is asking for the resources
3. Access-Control-Request-Method: Asks to host that they allows origin to make request with a specific methods (Like:PUT) ?
4. Access-Control-Request-Headers: Asks to host that they allows origin to make request with a specific headers (Like: X-Custom-Header) ?

The response of preflight can contains similer headers like following :

• Access-Control-Allow-Origin : Specifies which origin(s) are allowed to access the resource.
• Access-Control-Allow-Methods : Lists the HTTP methods allowed for the resource.
• Access-Control-Allow-Headers : Lists the custom headers allowed in the request.
• Access-Control-Allow-Credentials : Indicates whether the response can include credentials (Like: cookies)
• Access-Control-Max-Age : Specifies how long the results of a preflight response can be cached (in seconds).

Possible values of Access-Control-Allow-Origin Header :

1. Single Origin : Server is configured to give access to only one origin. example → Access-Control-Allow-Origin: https://bank.com . In this example only bank.com can access the data.
2. Multiple Origins : In this configuration, server have a list of trusted domains, and server adds the domain accordingly to the request.
3. Wildcard Origin : If the server is configure to wildcard (*) , then server allows all origin to access the data. example → Access-Control-Allow-Origin: *
4. With Credentials : If the header Access-Control-Allow-Credentials: true is set , then the value of Access-Control-Allow-Origin: * would be considered invalid by the browser. Value of Access-Control-Allow-Origin should be set to a specific value with the credentials header.

Common CORS Misconfigurations :

• Null Origin Misconfiguration :
• Bad Regex in Origin Checking :
• Trusting Arbitrary Supplied Origin :