CORS simplified n how it is enforced

CORS simplified and how it is enforced by browsers 🛂

While working in your dev env you may find when a some gui client making a call to one of your api server(local/deployed), we may mostly encounter a CORS exception like the below. So what is this and how we could understand this deep and avoid exceptions.

This is only a security feature which every server brings in to combat CSRF attacks by identifying the host making the request to the servers and also filtering specific headers/method allowed in the request to the server by means of the various properties available from the actual client which comes part of the actual request.Headers.

CORS more likely comes into picture if we are not making a simple requests (something more than GET request with additional headers). The client tool used (browser or even postman) triggers a preflight (OPTIONS) request.

This preflight request consists of Access-Control-Request-* Headers to the other server and the server responds back with Access-Control-Allow-* Headers and this is cached by the browser to handle the future requests to the servers determined by the response header Access-Control-Max-Age.

This is supported by modern browsers and tools like postman, at the same time some of them provide settings to suppress and other support extensions to override this.

Sample Options request ➡️, contains these information as listed below

• What is the current origin for this request ❓
• What is the method requested ❓
• What are the non-standard headers set in request, or sometimes they include content-type if that specific media type is not allowed by default ❓

Origin: https://dev-post.hashnode.dev
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

Sample Options response ⬅️, which gives the below rules to be followed to the client tool

• 📨 The list of Origins supported or * to allow all
• 💻 The methods supported by external server
• 💾 The various custom Headers and content-type to be allowed
• ⌛ The value in seconds which can be used to cache the options response, so that not every api calls are triggering preflight requests. However every browser has a max limt which is enforced when this value is more that the max cache time.

Access-Control-Allow-Origin: https://dev-post.hashnode.dev/api
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

Browsers can enforce one more security measure on top of this CORS functionality by checking for credentials information in any responses back from the server

Access-Control-Allow-Credentials: true

Irrespective of the type of request we discussed above, if the response contains the above header value, the browser will not let the response back to the invoking script. So what is this 🔑 Credentials are additional information a fetch or XMLHttpRequest has to specify implicitly to relay the client information like the below.

• 🍪 HTTP cookies
• 🔓 HTTP Authentication information

Thanks for supporting! 🙏

Would be really great if you like to ☕ Buy Me a Coffee, to help boost my efforts.

🔁 Original post at 🔗 Dev Post