CORS Explained

Introduction

Shelly is starting her web development journey, and she decides to make a weather website, she writes some HTML to structure the page, adds the CSS to the style, and throws in some JavaScript to make it interactive. She opens the page on the browser using the file path of the HTML file, It’s looking good or bad if she sucks at designing. Now she wants to add the data for the weather app, she calls the weather app API, and boom.

What is Cors

CORS(cross-origin resource sharing) is a security implemented by the World Wide Web Consortium (W3C), Its purpose is to enable a webpage to communicate with a domain different from the one that served it. This safeguard prevents unauthorized domains from accessing a server’s resources, thereby fortifying the application’s security.

How does Cors work

As the browser executes Shelly’s code, it encounters a crucial point where she requests data from a different domain. Because she’s loading her webpage from the file system using a file:// URL, the browser regards it as having a null origin due to the absence of a domain.

Requests from a null origin to other domains are blocked by browsers for security reasons. This explains why Shelly received the message stating that access to fetch data from a ‘null’ origin has been blocked by the CORS policy.

Cross-origin requests (e.g., from https://example-a.com to https://example-b.com) are typically supported only over HTTP/HTTPS protocols, or other specific protocols defined by browsers.

Recognizing this, Shelly opts to use a server to serve her web pages.

Simple Request

Simple are considered to be safe and non-destructive. They are typically requests that do not alter the server’s data.

According to the CORS specification, a request is considered simple if it meets the following criteria:

1. It uses one of the following methods: GET, HEAD, or POST.
2. It does not include any custom headers (i.e., only standard headers like Content-Type, Accept, etc. are allowed).
3. It does not include any credentials (e.g., cookies, HTTP authentication).

simple request(client and server)

Since the server allows all origins, the browser permits the javascript code to access the data the server returned.

simple request(client and server)

The server sends the allowed origin and http://example-a.com is not allowed to access it, so the browser throws a Cors error and displays it in the browser console.

Preflight Request(OPTIONS Request)

A preflight request is an HTTP OPTIONS request that is automatically sent by the browser as a safety check before making certain types of cross-origin requests. It is a part of the Cross-Origin Resource Sharing (CORS) mechanism, which is a security feature implemented by web browsers.

Ensuring that cross-origin requests that fall outside the criteria for “simple” requests are explicitly authorized by the server. The criteria for triggering preflight requests are defined by the CORS (Cross-Origin Resource Sharing) specification and include:

1. Non-Simple Methods: Requests using HTTP methods other than GET, HEAD, or POST. This includes methods like PUT, PATCH, DELETE, etc.
2. Custom Headers: Requests that include custom headers (i.e., headers other than the standard ones defined by the browser, like Content-Type, Accept, etc.).
3. Credentials: Requests that include credentials, such as cookies or HTTP authentication.

The preflight request includes headers like Access-Control-Request-Method and Access-Control-Request-Headers to inform the server about the type of request being made and the headers it intends to include.

The server responds to the preflight request with headers including:

• Access-Control-Allow-Origin: Specifies which origins are allowed to make the request.
• Access-Control-Allow-Methods: Specifies which HTTP methods are allowed for the requested resource.
• Access-Control-Allow-Headers: Specifies which headers are allowed for the requested resource.
• Access-Control-Allow-Credentials: Specifies if credentials (e.g., cookies, HTTP authentication) are allowed with the request.
• Access-Control-Max-Age:(Optional, indicating how long the results of the preflight request can be cached)

preflight request(client and server)

Conclusion

CORS introduces an additional layer of security to the web, enabling developers like Shelly to seamlessly integrate with various resources while safeguarding against unwanted access from unauthorized domains. Understanding CORS not only enhances our debugging capabilities but also demonstrates respect for the privacy of resources not open to us. It stands as an essential tool in our web development toolkit.