Blog/NotesConcept

What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]

A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.

Beginner

Anuj Sharma

Last Updated Dec 10, 2024


Advertisement

Cross-Origin Resource Sharing (CORS) is a crucial security feature implemented as part of all major web browsers to restrict how web applications access resources across different domains. Here’s a detailed look into how CORS works.

What is CORS (Cross-Origin Resource Sharing) in nutshell?

CORS is a mechanism that allows servers to specify which domains are permitted to access their resources. By including specific HTTP headers in their responses, servers can control and restrict access to their data.

All the major browsers use this mechanism to provide access across domains and use HTTP headers to determine whether to allow or restrict access from one domain to another.

How CORS work?

Web browsers do the CORS requests in 2 Steps

  1. Preflight Request or HTTP OPTION request: When a web application initiates a cross-origin request, in many cases, the browser first sends a preflight request (HTTP OPTIONS) to the server. This preflight request checks if the server allows the actual request based on its CORS policy.
    • Preflight Request Server Response: The server responds with CORS-specific headers to indicate whether the request is permitted. These headers define which origins are allowed, which HTTP methods are supported, and other relevant information.
  2. Actual Request: If the preflight request is successful and the server permits the actual request, the browser proceeds with sending the actual request (such as GET or POST).

Key CORS Headers Required

Access-Control-Allow-Origin

Specifies which domains are allowed to access the resource. It can be set to a specific domain, "*", or null. It is not advisable to use '*' in production applications, which means resources can be accessed by any browser client and this may cause denial-of-service attack (DoS attack) attack.

Example:

Access-Control-Allow-Origin: frontendgeek.com : Server allows to access resources from frontendgeek.com client

Access-Control-Allow-Origin: * : Server allows to access resources from any client

Access-Control-Allow-Methods

Lists the HTTP methods like GET, POST, PUT, DELETE that are permitted for cross-origin requests.

Example:

Access-Control-Allow-Methods: GET, PUT, POST : Server only permits GET, PUT and POST requests from allowed client. In case of sending any other HTTP request like DELETE then server wont process that request and reject it.

Access-Control-Allow-Headers

Enumerates the HTTP headers that can be used in the actual request.

Access-Control-Allow-Credentials

Indicates whether credentials like cookies can be included in cross-origin requests. Server will process only if it is included as part of the the response HEADER.

What is a CORS Error?

When the cross-origin request is made from the client domain (browser) and if it is not allowed by the server’s CORS policy. In this case, the browser restrict the request and generates a CORS error.

There are 2 primary ways to handle CORS error

  1. Configure the server to include the appropriate CORS headers which allows the client domain and the corresponding HTTP request type.
  2. Another possible way is to use a proxy to handle cross-origin requests.

Security Implications of CORS

CORS enhances web security by allowing servers to control access to their resources. Properly configured CORS policies/headers help prevent unauthorized data access and mitigate risks such as Cross-Site Request Forgery (CSRF) and Denial-of-service (DoS) attacks.

Example Flow 

Simple Request:

  1. Client: domain1.com makes a GET request to domain2.com/blogs.
  2. Server: domain2.com responds with the blogs and Access-Control-Allow-Origin: domain1.com.
  3. Browser: Checks the CORS header Access-Control-Allow-Origin. If domain1.com is part of the header value, it allows the blogs to be accessed by the web page.

Preflight Request:

  1. Client: domain1.com wants to send a PUT HTTP request to domain2.com/blogs.
    1. In some cases, browser, sends an OPTIONS HTTP request before sending the actual request to validate the server support for CORS.
  2. Server: domain2.com responds to OPTIONS request with response headers 
    1.  Access-Control-Allow-Methods: GET, PUT, POST
    2.  Access-Control-Allow-Headers: Content-Type.
  3. Client: In case Access-Control-Allow-Methods contains the PUT, then browser sends the actual PUT request.
  4. Server: Responds to the PUT request and includes Access-Control-Allow-Origin: domain1.com.
  5. Browser: Checks the Access-Control-Allow-Origin header. If domain1.com is part of the header value, it allows the resource to be accessed by the web page.

Interaction Sequence Diagram of OPTION request in CORS

Interaction Sequence Diagram of OPTION request in CORS

 

By setting up CORS correctly on the server, your web pages can safely request resources from other domains, keeping your web applications secure.


Share this post now:

Advertisement

💬 Comments (0)

Login to comment

Advertisement

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Advertisement


Other Related Blogs

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

Anuj Sharma

Last Updated Jan 9, 2025

Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.

HTTP/2 vs HTTP/1.1: What's the Key Difference?

Anuj Sharma

Last Updated Jan 29, 2025

Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1

Promise.all Polyfill in JavaScript - Detailed Explanation [For Interviews]

Anuj Sharma

Last Updated Jan 16, 2025

Deep dive into promise.all polyfill in javascript will help to understand the working of parallel promise calls using Promise.all and its implementation to handle parallel async API calls.

How to Format Phone Number in JavaScript (JavaScript Interview)

Anuj Sharma

Last Updated Jan 9, 2025

Learn the best & quickest way to format phone number in JavaScript with or without country codes. This will help websites to show the phone numbers in a more human-readable format.

5 Different Ways to Reload Page in JavaScript (Frontend Interview)

Anuj Sharma

Last Updated Jan 17, 2025

Explore the 5 most efficient ways to Refresh or Reload page in JavaScript similar to location.reload(true), and identify the appropriate use cases to use one of these different approaches.

5 Ultimate Rules to master this keyword in JavaScript

Anuj Sharma

Last Updated Feb 22, 2025

Easy to understand 5 rules, that cover the behaviour of the "this" keyword in different contexts and helps you to master this keyword for any javascript interview.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved