Understand CORS to really solve it

Introduction

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers that blocks web pages from making requests to a different domain than the one that served the web page. This is a crucial security measure to prevent cross-site scripting (XSS) attacks, but it can also cause headaches for developers when building web applications that need to make cross-origin requests. In this blog post, we will delve into the technical details of CORS, understanding for real what is behind and never be helpless in front of this error :

Access to XMLHttpRequest has been blocked by CORS policy

Security matters

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers to prevent cross-site scripting (XSS) attacks. It works by blocking web pages from making requests to a different domain than the one that served the web page. For example, if a web page served from "example.com" tries to make a request to "api.example.com", the browser will first check if "api.example.com" has explicitly allowed "example.com" to make requests to its domain and of course by default, it does not.

CORS works by adding special headers to HTTP requests and responses. The browser sends an "Origin" header with the request, which indicates the domain of the web page making the request. The server can then respond with an "Access-Control-Allow-Origin" header, which allows the request.

There are also other headers that can be used for more fine-grained control over cross-origin requests. For example, the "Access-Control-Allow-Methods" header can be used to specify which HTTP methods are allowed for a specific domain, and the "Access-Control-Allow-Headers" header can be used to specify which headers are allowed in a request.

One important thing to note is that CORS only applies to certain types of requests, such as XMLHttpRequest. Simple requests, such as those made with the "img" tags, are not subject to CORS. Additionally, requests made from the same origin as the web page are not subject to CORS, as they are considered "same-origin" requests.

In simpler terms, preventing cross site requests prevents a hacker from calling an API in your name without you even noticing it by using XSS attack on another website (another domain) that you are not even aware of.

If you want more information about XSS attacks, you can read this excellent article : What is cross-site scripting (XSS) and how to prevent it? | Web Security Academy (portswigger.net)

Let’s now see why we all hate CORS.

Why all developers hate CORS & how to make peace ?

CORS can be a headache for developers because it can cause unexpected issues when building web applications that need to make cross-origin requests. This happens as soon as the back-end is not hosted on the same domain as the front-end.

Cases might be:

• You develop an SPA (Single Page Application) where the static HTML / CSS /  JS files are hosted somewhere and the JS code makes requests to a backend somewhere else to fetch and edit data.
• You are developing a front-end that needs data from another API you are note in charge of.

The important thing to know is that CORS is enforced by browsers as it is the one that will block the request if the server does not give the correct allowed domain when it is asked.

So to fix CORS errors in the two specific use cases we saw just above you can :

• Edit your backend to enable CORS and allow your front-end hosting domain as an Allowed Origin.
• Use a proxy that will allow your front-end domain as origin and will forward the request to the real back-end. The request will then come from a server to a server and CORS is not implied in such exchanges. Note that most of public API enforce CORS to avoid you having the private API key embedded in your front-end that can be read by anyone reading your source code.

Conclusion

As a web developer, encountering an error related to CORS is a common experience. Without a clear understanding of the underlying causes, fixing CORS errors can quickly become overwhelming. I hope this explanation of the basics has provided a more accessible and easier-to-understand insight into the topic.

Have a great rest of your day and I hope to see you soon!