Understanding CORS and cross-origin cookies

Part 1 — What is CORS.

Let's first start with what is CORS. Why it is important in today's web world to understand the implications of using it.

Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

If our front end and backend are hosted on two different domains, and we want to establish communication between them, the server needs to trust the front end domain for sending any data. Here preflight request comes into the picture which first verifies the sender and then if the sender is allowed, it permits the actual request to have communication with the server to exchange data.

Assume our front-end application is hosted on domain1.com and our backend application is hosted on domain2.com.

At Server, we first need to add a header called Access-Control-Allow-Origin with trusted origin/domain list. It helps in finding the allowed domain and secures your web application against unknown attacks and will not provide requested information in case if the requested origin is not allowed on the server.

header("Access-Control-Allow-Origin: https://domain1.com");

Or pass wildcard(*), in order to allow all domains

header("Access-Control-Allow-Origin: *")

Part 2 — Cross-domain cookies

Here is the problem statement — I have two web apps, WebApp1(https://domain1.com) and WebApp2(https://domain2.com) in two different domains.

1. I am setting a cookie in WebApp1 in the HttpResponse.
2. How to read the same cookie from HttpRequest in WebApp2?

OR

If front-end is deployed in https://domain1.com, Backend API is deployed on https://domain2.com, and we need to pass authentication cookies. Is it possible to pass the same cookies automatically?

Let’s understand the solution for this issue with a web app running with angular and Node.js.

For cookie-based authentication, the server sends Set-Cookie header to the client application in Http Response. However, the application doesn't send the value back in further requests. It requires passing some extra options at the front end and headers at the backend that will be used to trust the sender as per the concept of CORS.

set-cookie:SESSIONID=F0D02B45666DABA1DDAD1CB896F0899; Path=/dev/api; HttpOnly

• First, the client needs to add crossDomain and withCredential option in all subsequent HTTP calls and In the case of angular passing, withCredentials: true option only will work.

crossDomain: true
xhrFields: { withCredentials: true }

The default value for withCredential option is false.

• Now, on the server-side, you need to have the following headers:

header("Access-Control-Allow-Origin: https://domain1.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, *");

Here

1. Access-Control-Allow-Methodsand Access-Control-Allow-Headersshould contain the same value as requested in Access-Control-request-Methodsand Access-Control-request-Headersrespectively.
2. Wildcard(*) will not work with Access-Control-Allow-Originand need to have a list of origin/domains as mentioned above.

That's it. Now you will be able to see the authentication cookie being attached in all your subsequent request.

If still, you are not seeing cookies in subsequent requests. Then go and check path option inside set-cookies header. Here, path value should be the same as starting context of your API. For example —

• Failure case —

API - https://domain2.com/api/develop/boltProjects/10509-sharadjain

set-cookie:SESSIONID=F0D02B45666DABA1DDAD1CB896F0899; Path=/dev/api; HttpOnly

• Success Case —

API - https://domain2.com/dev/api/develop/boltProjects/10509-sharadjain

set-cookie:SESSIONID=F0D02B45666DABA1DDAD1CB896F0899; Path=/dev/api; HttpOnly

Bonus tips— If your Backend is deployed in AWS and using API Gateway to call through, then all these headers need to be applied in API Gateway level also.

Note — Please refer to respective language original documentation for syntax. Here I tried to explain options and processes to solve this issue.

Thanks for reading 😀. If you like the content, please share with more people and follow me for more such interesting topics.
https://www.linkedin.com/in/sharad-jain-304369b7/