CORS Explained!
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. This is one of the security mechanism used by the web server of web clients. So, what actually this means? In this article, I will be explaining about the CORS mechanism and how this will add security at an introductory level.
The above mechanism is Cross-Origin Resource Sharing, which tells the web server or client either allow or to restrict the sharing of any kinds of resource between different origin. The origins can either be a different domain or same domain with different ports. Also, CORS can be implemented for HTTP request methods. Below are some of the images to make you clear on how CORS works.
So the question comes, is CORS important? Or, how does it add security?
Yes, CORS plays an important for security to prevent any malicious behaviors. Let us take an example, we have a web server that is built only to respond to the request from a certain website or web clients. So we need to decline all the requests coming other than from the particular web client. Here, CORS shines in and allows requests only from the required site or client.
Still, have some confusion? Let me add one more example. You have a server that responds to its client with daily top news. In this case, the client will only need the GET request method. If clients get access to ‘PUT, DELETE or POST’ methods, the news can be deleted or changed. And, there is a high risk of giving fake news to the clients. So, CORS stands out and blocks any of the requests that are not GET request from the client.
How is it implemented then?
Let’s look at the client-side first. While sending any requests, HTTP header is added telling the domain name of the current page. For example, I am browsing xyz.com and I need to send a request to abc.com. An HTTP header ‘Origin: xyz.com’ is added to tell that the request originated or came from xyz.com. Then the browser looks up for the Origin header. If the Origin header is present, the browser forwards the request, else request is discarded or dropped.
Now looking on the server-side, the request reaches the server. Now the server looks for the ‘Origin’ header. The origin header we have is ‘Origin: xyz.com’, and the server of abc.com searches the origin in its CORS list. If the domain name is in the whitelist of the server and the HTTP request method is allowed, then the response is sent accordingly by the server. Else, the request is dropped by the server and status 0 is sent to the client with error “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”
In a nutshell, CORS is like a Firewall for the web servers to prevent unwanted requests from entering the server. The article is made beginner friendly so there are still many more things to explore.
References:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS