Cookies not saved in the browser

Question

I am trying to set a cookie in my browser using a Python Flask backend however, when we call the set cookie function I am unable to observe the cookie being saved by the browser. The following is my current understanding about how this is supposed to work:

• Cookies are just key value pairs that may have an expiration which makes them persistent, otherwise they expire when the browser is closed
• to set a cookie, all that is necessary is to use the set-cookie header in the response. I call the flask response object's set_cookie method to do this.
• the browser should automatically save the cookie and follow the expiration rules (the set_cookie header can be observed in the response received by the browser)

Making the request in Angular HttpClient

let headers = new Headers();
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers, withCredentials: true });
const request_data = {'username': this.username, 'password': this.password};
this.http.post('http://localhost:8080/token', request_data, options)

Setting the cookie in Python Flask

g.response = make_response()
time = datetime.datetime.now() + datetime.timedelta(days=30)
g.response.set_cookie("auth_token", auth.token, expires=time)
return g.response

Plain text response in the browser

HTTP/1.1 200 OK
set-cookie: auth_token=7253f2fa43d7584741dcf8972dea8f; Expires=Fri, 05-Jan-2018 01:33:30 GMT; Path=/
vary: Origin
access-control-allow-credentials: true
access-control-allow-origin: http://127.0.0.1:4200
content-type: application/json
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Cache-Control: no-cache
Content-Length: 58
Server: Development/2.0
Date: Wed, 06 Dec 2017 01:33:30 GMT

Browser's cookies section

Other thoughts & posts explored:

• Tried using both Safari and Chrome, and received the same result in both. I have also verified that cookies are allowed by the browser.
• $http doesn't send cookie in Requests
• Cookie is not set in browser
• How do I SET a Cookie (header) with XMLHttpRequest in JavaScript?

Question:

How do I get the cookies to be saved by the browser so that it can be used in the current session?

Solution

The domain for the cookie was set to the loopback address (127.0.0.1). In angular, I was calling the set-cookie endpoint using 'localhost' instead of the loopback address which prevented the cookies to be saved in the browser. As soon as cookie domain, endpoint base URL, and browser address matched using the loopback address, everything worked as expected.

Interesting side note: I am not sure why at the moment, but matching addresses doesn't seem to enough. I also tried setting both the cookie domain, endpoint base URL, and browser address to 'localhost' but this still didn't set the cookie. It only worked once all values were the loopback address.

Comments

[Z. Bagley]

are you familiar with localStorage and sessionStorage?

[Krejko]

Hello, I am looking to store session tokens here. Based on what I am seeing online, cookies are the most secure way of doing this. One article I am referencing says "Never store access tokens in local storage, that storage area is very vulnerable to XSS attacks" stormpath.com/blog/token-auth-spa. Please let me know if you are thinking there is another way doing this that is also secure. Thanks!