CORS: What It Is and Why It Matters
What is CORS?
Resource sharing with cross-origin origin (CORS) is a browser feature that allows controlled access to resources outside of the domain. It permits web pages to request resources to domains that are different from the domain that hosts the website.
CORS helps to prevent malicious websites from making unauthorized requests on behalf of the user. Without CORS, a malicious website could potentially make requests to a sensitive API on behalf of the user, potentially revealing sensitive information or causing unintended actions to be taken.
Let's try to understand it with a simple example, try below code snippet in you browser console
fetch("https://dummy.restapiexample.com/api/v1/employees")
.then(response => response.json())
.then(data => console.log(data))You will get the following error
Access to fetch at 'dummy.restapiexample.com/api/v1/employees' from origin 'codecave.abhishekjnvk.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
now try on same origin(domain)
fetch("https://codecave.abhishekjnvk.in/page-data/app-data.json")
.then(response => response.json())
.then(data => console.log(data))You will get the below response
{ "webpackCompilationHash": "fc550684563c845b9e83"}Did you notice the difference? The first request was made to a different domain. The second request was made to the same domain. The first request was blocked by CORS, while the second request was allowed. Lets understand why this happened.
This is because all modern browsers enforce a security feature same-origin policy which prevents a web page from making requests to a different domain than the one that served the web page. This is done to prevent malicious websites from making unauthorized requests on behalf of the user and to prevent sensitive information from being leaked.
Now that we know what CORS is, let's take a look at how it works. We'll also explain how to handle CORS and how to prevent unauthorized access to your API.
How Browsers Blocks CORS
When you make a request to a different domain, browser will preflight request to server checking if "Access-Control-Allow-Origin" header is set or not. If the header is not present or if it doesn't include the domain that is whitelisted by server, the browser will block the request.
Preflight requests are an important part of the CORS process. It is a OPTION request that is sent by the browser as a part of actual request to check whether the request is allowed by the server's security policies. Read more about preflight requests here.
Following is the flow of CORS request in browser
How to handle CORS?
There are several ways to handle CORS, depending on the situation:
-
Enable CORS on the server: If you are the owner of the server that is receiving the request, you can enable CORS by setting the appropriate headers in the HTTP response. This will allow web pages served from other domains to make requests to your server.
-
Use a CORS proxy: If you are unable to enable CORS on the server, you can use a CORS proxy to make the request. A CORS proxy is a server that acts as an intermediary between the client and the server.
CORS proxies are not secure Because the CORS proxy is a third-party server that is not under your control. This means that the proxy could potentially be malicious and could potentially steal sensitive information from the request. If you are able to enable CORS on the server, you should do so instead of using a CORS proxy.
-
Use the JSONP technique: JSONP (JSON with Padding) is a technique that allows web pages to make requests to a server from a different domain by using a script tag. The server returns a script containing the requested data, which is then executed by the browser. JSONP is not as secure, because it is vulnerable to cross-site scripting (XSS) attacks, so it should only be used as a last resort
Security Concerns with CORS
using CORS is not a silver bullet. It is important to handle CORS properly to ensure the security of your API and to prevent unauthorized access. There are several security concerns that you should be aware of when using CORS:
- Allowing requests from any origin: If you allow requests from any origin, you are opening up your API to be used by malicious websites. This could potentially lead to sensitive information being leaked or unintended actions being taken. If you are unable to enable CORS on the server, you should only allow requests from trusted origins.
Conclusion
CORS is a security feature implemented by web servers to prevent malicious websites from making unauthorized requests on behalf of the user. It is important to handle CORS properly to ensure the security of your API and to prevent unauthorized access. There are several ways to handle CORS, including enabling CORS on the server, using a CORS proxy, or using the JSONP technique.
