Cookie cannot be read by script

httponly cookie
set cookie javascript
document.cookie not working
jquery cookie
jquery read cookie
cookie path
how to read cookies
javascript set cookie on form submit

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?

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);

Cookie cannot be read by script, you should work with 'react-cookie', install it via npm. Then in your component try to import the HOC withCookies import { withCookies } from  As we know PHP is a server side script and JavaScript runs in the browser and whether the cookie originates in JS or PHP should not matter in this case. Cookies are stored in the document.cookie

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:

  1. Confirm that the cookie is really being set (you can check this via dev tools)
  2. 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)

Cookies, document.cookie, Reading from document.cookie So we can't store anything huge in a cookie. If we load a script from a third-party domain, like <script  By default the content of cookies can be read via JavaScript. The HTTPOnly flag prevents scripts from reading the cookie. As the name HTTPOnly implies, the browser will only use the cookie in HTTP (S) requests. This prevents hackers from using XSS vulnerabilities to learn the contents of the cookie.

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)

js-cookie/js-cookie: A simple, lightweight JavaScript API for , If you're viewing this at https://github.com/js-cookie/js-cookie, you're reading the documentation for <script type="module" src="/path/to/js.cookie.mjs"></script> <script like so: /check.html (or at least, such cookie cannot be read correctly). If you do not specify expiry date for cookie then it will available, until browser is closed. Path for cookie is the current directory by default. In PHP, cookie must be sent before any output to client.

JavaScript Cookies, Also discussed what cookies can and cannot do?, setting cookies, A website can set and read only its own cookies (for example, Yahoo can't read IE's <title​>JavaScript Cookie</title> <script type="text/javascript"> //This is  The cookie value should be url encoded with encodeURIComponent(), to make sure it does not contain any whitespace, comma or semicolon which are not valid in cookie values. Set a cookie expiration date. If you don’t set anything else, the cookie will expire when the browser is closed.

chrome.cookies, To use the cookies API, you must declare the "cookies" permission in your manifest, is marked as HttpOnly (i.e. the cookie is inaccessible to client-side scripts). Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it. If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like: cookie1 = value; cookie2 = value;

JavaScript and Cookies, so CGI scripts on the server can read and write cookie values that are stored on the JavaScript can read, create, modify, and delete the cookies that apply to the Note − Cookie values may not include semicolons, commas, or whitespace. This means one cannot set a path using path: window.location.pathname in case such pathname contains a filename like so: /check.html (or at least, such cookie cannot be read correctly). domain Define the domain where the cookie is valid.

Comments
  • Cookies is not a valid browser api. Cookies are always get/set via document.cookies.
  • @Geuis, Seems he using react-cookie
  • @Geuis I'm using the js-cookie library
  • how are you building the flask response?
  • Is the backend and frontend hosted on separate servers/domains?
  • 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