In this post, using some basic questions will try to explain what CORS is, CSRF attacks, how modern browsers protect from CSRF attacks and how to enable valid CORS when needed.
What is CORS?
CORS stands for acronym - Cross Origin Resource Sharing
When you should worry about using CORS?
Only when you use browsers for API access
When do you see the CORS error?
While using browsers, you may need to incorporate content by sending a request to another domain and you would have landed on a CORS error.
Why do browsers need a CORS policy?
It is a security feature to detect and avoid data sharing and access from different origins.
This is needed to tackle CSRF - Cross-Site request forgery attacks.
What is same-origin policy?
A Security feature to detect and avoid data sharing and access from different origins.
How does CORS secure a website by avoiding CSRF attacks?
Faking websites can mock the request/response of original websites and perform GET/PUT/POST/DELETE operations as shown below:
Browser:
Fake origin request ---------request--------> Bank origin
Fake origin blocked to execute <--------response--------- Bank origin response
Since the browser will be able to differentiate and identify from the response that it is from the bank, it will block it.
Which are all the components used for CORS in a URL?
1. protocol - HTTP or HTTPS should match
2. The domain name should match - e.g. example.com
3. port - 80 or 443 should match
Valid requests
http://example.com && http://example.com/api/rooms
Invalid requests
http://example.com && https://api.example.com/rooms
When do you need to enable CORS?
CORS is important when you use cross-domain browser clients. There is a requirement that you need to share data between your own websites (having different origins say abc.com and xyz.com) through API calls.
How you can enable it?
CORS allows the browser to explicitly whitelist certain origins and relax the browser's same-origin policy
The server will be configured with CORS it will return some extra headers with each response
This response whitelist
* Certain origins
* HTTP methods
* Headers
* Other elements of the request
The browser looks at the response and makes the decision.
CORS requires support on both the server and the browser to work.
The server controls the server's response that whitelists certain origins, but the final decision to allow the response is made by the browser.
What do you do to enable CORS on the origin server?
* Determine which origins to whitelist
* Add CORS middleware to the server
CORS Headers - The following are the related headers for CORS
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
Among the above the important header is Access-Control-Allow-Origin
This is used to allow access to which origin resources.
This header is used/enforced by the browser to make a decision on whether this response content can be allowed.
If this response's header contains the current origin (browser url), it is allowed to be rendered. Else not.
Browser:
Origin A (current URL) --------------> Orgin B(another URL)
Origin A (current URL) <-------------- Origin B response
If Origin's B response contains 'Access-Control-Allow-Origin' to allow Origin A, then the browser renders the response. Else blocks it.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Enable CORS in ruby on rails:
https://stackoverflow.com/questions/17858178/allow-anything-through-cors-policy
Enable CORS in a Java application:
https://stackoverflow.com/questions/44905898/how-to-enable-cors-on-server-side-code-in-java
Enable CORS in a C# application:
https://stackoverflow.com/questions/31942037/how-to-enable-cors-in-asp-net-core
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-8.0
Top comments (0)