Passing cookies in Cross Origin AJAX requests across domains can be accomplished as long as the proper configuration is made on the browser and server side. This tutorial outlies the correct settings to ensure the request doesn’t violate the CORS policy and the request succeeds.
Contents
The Problem
Your code makes an AJAX request (with jQuery, though this issue isn’t specific to jQuery) cross-domain and the server expects the cookies from the browser to be passed. However they are not sent in the request from the browser.
CORS vs JSONP
I’m not going to go into full details here – just hit on the tip top level. A plethora of information is available on the internet for these topics.
CORS (Cross-origin resource sharing) is a mechanism implemented by browsers to ensure that malicious requests to a server can’t be made – it’s a restriction method. It respects the Same-origin policy for security reasons.
First off, JSONP technically is a way to solve this problem, however I don’t advise it as the correct solution. It is an old and outdated technology and has security flaws. The basics of it is that a request to the server (with cookies) is made by the browser for a Javascript function. A function is returned and the browser can then use it to process the response as needed.
How to Pass Cookies on a Cross-Domain AJAX Request from Browser to Server
There are two things that need to be done here:
- Configure your AJAX request to pass cookies
- Set the response headers to conform with CORS
Configuring the AJAX Request
You need to tell your AJAX request to pass credentials with this bit of code:
1 | xhrFields: { withCredentials: true }, |
AJAX Parameter: withCredentials
Reference: MDN XMLHttpRequest.withCredentials
This parameter indicates if a cross-domain request should send credentials (which include cookies, TLS certificates, authorization headers, etc.).
AJAX Request
Here is a full example of what the basic AJAX request should look like.
1 2 3 4 5 6 7 8 | jQuery.ajax({ url: "http://subdomain.yourserver.com/getinformation/", dataType: 'json', xhrFields: { withCredentials: true }, success: function(data) { console.log(data); } }); |
The browser is now passing cookies (credentials) to the server.
Server Headers
The server now needs to respect the CORS request and respond with the correct headers. There are two headers that need to be set for this to work roundtrip.
Header: Access-Control-Allow-Origin
This needs to be set to the domain from which the browser made the request. So if the URL in the browser is:
1 | http://www.yourserver.com |
and makes the AJAX request to:
1 | http://subdomain.yourserver.com/getinformation/ |
then this header needs to be set as so:
1 | Access-Control-Allow-Origin:http://www.yourserver.com |
What this header says is that this is the only domain that is allowed to make this cross-origin request – essentially the two domains are the same domain. A request from any other domain will fail the Same-origin policy of CORS and the request will fail.
Reference: MDN Access-Control-Allow-Origin
Header: Access-Control-Allow-Credentials
This header needs to be set to true in this scenario.
1 | Access-Control-Allow-Credentials:true |
This is simply a partner header to the withCredentials parameter passed in the AJAX request. It’s saying that credentials are allowed to be passed through this request and response.
Reference: MDN Access-Control-Allow-Credentials