I'm trying to get into NeoG Camp and for the Mark 15 assignment, we have to write 2 blogs which I think is an awesome way to stop procrastinating and start blogging.
So while searching for topics to write on I thought It would be nice to learn something new and blog the learnings.
While searching for networking resources I stumbled upon a new word CORS(Cross-Origin Resource Sharing)
I decided to dive deeper into what it meant.
In this blog, I have given a brief introduction to CORS.
So let's get started.
Firstly we must understand how resources are requested on the Web.
Data is exchanged over the network using the famous Hyper Text Transfer Protocol. This protocol defines the rules of communication. Header in HTTP is used to define the type of data exchange b/w the client and server. A request is made for data and a response is received.
Origin
Two URLs have the same origin if these three things are the same for both.
- protocol
- port
- host
Same Origin Policy
This is a security mechanism practiced in the browser which restricts how a document or the script loaded by an origin can interact with the resources from another origin. It prevents the websites from attacking each other by restricting them from accessing data from an origin different from theirs.
When an HTTP request is sent from one origin to another, any cookies, including authentication session cookies, relevant to the other domain are also sent as part of the request. The response that is generated is from within the user's session and includes user-specific data.
This is where Same-Origin-Policy helps as without it a malicious website can read your private data from other sources like emails etc.
p.s. cross-origin loading of page resources is permitted usually.
There is more to Same Origin Policy but we are here for CORS so let's change the context.
Cross-Origin Resource Sharing
There are some legitimate use cases of cross-origin sharing that are blocked by the Same Origin Policy. Modern Web App Development requires Cross-Origin Sharing for various purposes.
CORS fixes this problem as far as I understand.
For CORS to work when we want to access a resource from a different origin, the server(providing the resource )should provide access.
- While making a Cross-Origin request the browser has to include an Origin header that includes the current origin.
- If the server-side wants to grant access to the request from this origin it will add a new header. This origin is called Access-Control-Allow_Origin. It may include the name of the origin or a *(specifying no restriction to any origin)
- When this header is seen by the browser it allows the response data to be shared with the client.
so CORS basically allows you to make resource requests from one location on the web to another location which is prohibited by the Same Origin Policy.
p.s. CORS needs to be used carefully as mistakes in implementation or being overly lenient towards different origins can result in security vulnerabilities.
You can read more about CORS and how to implement them on the MDN docs.