🔑 CORS - Cross Origin Resource Sharing

The Craft of Origin Domains

CORS stands for Cross-Origin Resource Sharing and is a security mechanism implemented in web browsers to control access to resources (such as APIs or data) from different origin domains. It is a standard method that allows a web application to securely interact with resources on another server (or domain) while minimizing the risk of security vulnerabilities such as Cross-Site Request Forgery (CSRF) and Cross-Site Scripting (XSS).

How CORS Basics Works

1. Same-Origin Policy: By default, web browsers have what is known as the Same-Origin Policy in place. This policy states that scripts running on a particular domain cannot access data or resources from another domain. This is a security measure to prevent malicious websites from accessing sensitive information from other sites.

2. CORS headers: When a web application (e.g. a JavaScript application running in the browser) wants to access a resource from another domain, the browser sends a CORS request. The server serving the requested resource must then return special HTTP headers to signal to the browser that access to that resource is allowed.

CORS headers

Here are some important CORS headers that the server can return in its response:

• Access-Control-Allow-Origin: This header specifies which origins (domains) are allowed to access the resource. For example:
• Access-Control-Allow-Origin: * – Allows access for all domains.
• Access-Control-Allow-Origin: https://example.com – Allows access only from https://example.com.
• Access-Control-Allow-Methods: Specifies which HTTP methods (e.g. GET, POST, PUT, DELETE) are allowed to access the resource.
• Access-Control-Allow-Headers: Specifies which headers are allowed in the request.
• Access-Control-Allow-Credentials: Specifies whether credentials (such as cookies) are allowed to be used in the request.
• Access-Control-Expose-Headers: Specifies which custom headers are allowed to be exposed in the response object so that the client can access them.

Example CORS request

Suppose you have a JavaScript application on https://my-app.com that wants to access an API on https://api.example.com. The request could look like this:

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // Sends cookies with the request if allowed
}).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok.');
    }
  return response.json();
})
  .then(data => console.log(data))
    .catch(error => console.error('There was a problem with the fetch operation:', error));

The server https://api.example.com must then return a CORS header as follows:

Access-Control-Allow-Origin: https://my-app.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Credentials: true

Preflight requests

When a CORS request meets certain conditions (e.g. using HTTP methods like PUT or DELETE or setting certain custom headers), the browser first sends a Preflight request (OPTIONS request) to check if the server allows the CORS request. The server must then return the appropriate CORS headers to approve this preflight request.

Conclusion

CORS is an essential security concept that allows web applications to access resources from other domains while minimizing the risks of security vulnerabilities. By using CORS headers, servers can control which domains are allowed to access their resources and ensure that sensitive data remains protected.