Search code examples
cookieshttpscross-domainbottlesamesite

Connecting localhost to a remote dev server (CORS, same-site, secure and other headaches)

I'm currently working on a React project. The development server (Bottle/Python) for the project is hosted remotely, and my React dev-server is localhost. Part of the authentication process for the application involves setting a cookie on login, but because of same-site and secure rules that cookie is not being set, meaning that my dev frontend can't access any of the data that it needs.

Myself and the server engineer have added SameSite=None to the cookie as well as secure, but because my localhost is not https the cookie is still not being stored properly (I get the error message "this Set-Cookie" was blocked because it had the "Secure" attribute but was not received over a secure connection").

There are no issues when the app is deployed because everything is on the same domain, but for now we're stuck - we've been trying to solve the issue for several hours but can't seem to get it.

My question is - what is the best development practice if you need to access a non-local development server, but can't actually just have your own version of the server running on your local machine?

Do I:

  1. Need to make my localhost https somehow?
  2. Need to make the dev-server domain https?
  3. Need to install the server locally because there's just no way to do this?

Apologies if this is a noob question, it would be great to have some advice. Many thanks.

Solution

  • The short answer is:

    1. No
    2. Yes
    3. No

    You can run your app on http://localhost:port. Assuming response from your dev server has in response headers Set-Cookie of the cookie which has Secure flag, your dev server URL has to be https in order to have the cookie accepted by the browser.

    I have this setup and it works just well.

    Regarding CORS (as mentioned in the title of the question): you have to have you server configured to accept credentials and to have allowed origins configured. The client app when doing XHR request has to have withCredentials:true. Check the points 2 and 3 in my post for details.

    Also note, that if you are using Chrome you can bypass for development purposes the requirement to have SameSite=None and Secure by disabling the flag "Cookies without SameSite must be secure", also detailed here