Cookie cannot be read by script

Question

I'm trying to read a cookie from a browser by the following Javascript code using the js-cookie package. However, the cookie is not being read.

import Cookies from 'js-cookie';
var cookie_name = 'cookie';
var cookie = Cookies.get(cookie_name);
console.log(cookie);

The cookie is created using the below Python code that utilizes Flask.

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, text/plain')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='<url>')

The Flask app has the following parameters

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SESSION_COOKIE_HTTPONLY'] = False

Above I've turned off the HttpOnly flag so my script should be able to read the cookie. I also cannot see the cookie using console.log(document.cookie) in the browser. Is there any reason why my JS code can't read the cookie?

Cookies is not a valid browser api. Cookies are always get/set via document.cookies. — Geuis
– Geuis, Commented Feb 6, 2019 at 4:57
Is the backend and frontend hosted on separate servers/domains? — henrik123
– henrik123, Commented Feb 14, 2019 at 6:30

Susanne Peng · Accepted Answer · 2019-02-12 06:52:57Z

2

If you can't see the cookie in the browser console it means that it either isn't being set or that it is being set with HTTP only.

SESSION_COOKIE_HTTPONLY should only affect the session cookie set by Flask, it looks like you are trying to set a different cookie entirely.

I would:

Confirm that the cookie is really being set (you can check this via dev tools)
If it is being set, and somehow being set with HTTP only turned on, change your code:

...

response.set_cookie(key='cookie', value=payload, domain=<url>, httponly=False)

answered Feb 12, 2019 at 6:52

Susanne Peng

8821 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anass TIssir · Accepted Answer · 2019-02-06 07:57:18Z

0

you should work with 'react-cookie', install it via npm. Then in your component try to import the HOC withCookies

import { withCookies } from 'react-cookie';

get the cookies binding by key

    function getCookieFucnctionTest(myRecordFromCookies) {
       var value = "; " + document.cookie;
       var parts = value.split("; " + myRecordFromCookies+ "=");
       if (parts.length === 2) return parts.pop().split(";").shift();
     }

after the use of getCookieFucnctionTest and sotre it into a parametere

export your component with the HOC

export default withCookies(MyComponent);

answered Feb 6, 2019 at 7:57

Anass TIssir

2502 silver badges8 bronze badges

1 Comment

Black Over a year ago

I'd like to use the js-cookie library due to simplicity. Also, switching packages does not help as the cookie is not being detected on the browser. It's not clear why this cookie can't be read via a script as the Flask settings should allow it to be readable

MacK · Accepted Answer · 2019-02-13 18:54:31Z

The fact you can't get to see your cookie through console.log(document.cookies) is possibly an indicator of a mismatch between the domain or path of your cookie and what the browser is trying to access.

EG: if your backend/Flask app is running on api.example.com:8080 and the client is using www.example.com:80 then you need to explicitly set the domain to .example.com to be readable globally on your domain, also you might incurr in a CORS error while setting the cookie on your AJAX request, you might need to add the following headers to Flask:

response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Set-Cookie')
response.headers.add('Access-Control-Allow-Origin', 'http://www.example.com')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
response.headers.add('Access-Control-Allow-Credentials', 'true')
response.set_cookie(key='cookie',
                value=payload,
                domain='.example.com')

You can also enforce a path='/' but it seems Flask does that by default, in any case you should be able to see your Cookies even with different paths but set on the same domain on your DevTools of choice under the screen Application > Cookies (in case the path is set incorrectly console.log(document.cookies) wont produce any result or might strip out the cookie you're after)

Collectives™ on Stack Overflow

Cookie cannot be read by script

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related