Why would setting document.cookie not work in Chrome? - javascript

My coworker ran into an issue where NO cookie could be set on Chrome via code like this:
document.cookie = "TEST=1; expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"
Putting document.cookie into the console immediately after would show results as if I made no change. On refresh of the page, the cookie was not there so it was reporting correctly, just not setting correctly.
The above code would work if he opened a new incognito window and worked for everyone else in general. I removed all his cookies using the dev tools and still had no luck manually setting cookies ( although others would come back that were set via the server headers).
Once he restarted Chrome, it started to behave properly, so it seems like he was running up against some quirk or bug that can no longer be reproduced.
Has anyone else run into this? As of now I am thinking of checking that document.cookie reports back what is expected after setting, and then initiating our cookieless flow for when a user has cookies disabled when things don't match up. I hate the idea of doing that so any suggestions / answers would be great.

The way cookies work, at least in Chrome, is a bit weird.
If you need to change a cookie's value, then you need to add/set each keys one by one.
Try this in your console:
document.cookie; // -> "expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"
document.cookie = 'TEST=1';
document.cookie; // -> "TEST=1; expires=Tue, 14 Oct 2014 20:23:32 GMT; path=/"
Yes, it has added the key, and not replaced the whole cookie with TEST=1.
If you need to remove a key, you can simply provide no value: TEST=.
I hope this will get you out of the cookie nightmare (it was for me).

Make sure to run it on a server (at least a local server) so that document.cookie works.
If you locally run this file in the browser. "document.cookie" wouldn't work.

As another user mentioned, you have to set them one-by-one. These functions can be useful in parsing & applying a cookie string:
function clearCookies(){
var cookies = document.cookie.split(';');
for(i in cookies){
var vals = cookies[i].split('=');
var name = vals.shift(0, 1).trim();
document.cookie = name+'=';
}
}
function parseCookies(cookie){
clearCookies();
var cookies = cookie.split(';');
for(i in cookies){
var vals = cookies[i].split('=');
var name = vals.shift(0, 1).trim();
document.cookie = name+'='+vals.join('=');
}
}

You have to set the domain!
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=" +
window.location.hostname;
}

The expiry date set for the cookie might be the problem. I have come into a problem like this before on Chrome. Set the date to present or future date and test if it would work. Probably that was how Chrome was designed.

We have the same problem in work a while ago, in our case it only happen when we work in local enviroment, after research we crossed an article that said that browser have some kind of problems with localhost:3000, because it recognizes as an insecure page or something like that.
We fixed just by replacing localhost:3000 for 127.0.0.1:3000 (i think that the ip depends on your configuration), and after we replaced that it works perfectly. I hope it helps you.

Related

My cookie doesn't persist between sessions?

I have a cookie that saves some fairly benign data I use to check if a Changelog modal window should appear on a page or not. When I load a page there is no cookie at all. The project runs on IIS, using .NET Core 2.2 with ASP and MVC. So I do the following:
function showChangelog(override = false) {
let newestEntryId = getNewestChangelogVersion();
let cookieEntryId = getCookieChangelogVersion();
if (newestEntryId > cookieEntryId) {
setCookieDetails(false, newestEntryId);
cookieEntryId = newestEntryId;
}
let changelogPersistence = getCookieChangelogPersistence();
if (changelogPersistence === false || override === true) {
let modalBody = $('#changelogModalBody');
...
...
Here is what happens:
The first check returns 0. As it should. That is the newest entry in the changelog object.
The second check returns -1. As it should. There is no cookie to check at this stage, so I return -1 to indicate this.
Then I see if the newest entry gathered from the changelog is higher than the one from the cookie. If it is, override it and write the new version number to the cookie. That produces the following cookie:
"dontPersistChangelog=false; changelogVersion=0; path=/; expires=Tue, 06 Sep 2022 13:54:33 GMT"
Then, from this new cookie I check whether the cookies persistence flag is true or false. If it is true, then don't show the window. If it is false, then do show the window.
Then the code goes on to just make the window appear with all the relevant information. Sounds good.
For good measure, here is the code that sets the cookie:
/**
* Used to set the website cookie for the changelog window.
* #param {boolean} persistence Whether the changelog should not persist (true) or persist (false)
* #param {number} version What version of the log is being put in the cookie.
*/
function setCookieDetails(persistence, version) {
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 999);
let persistChangeLog = 'dontPersistChangelog=' + persistence;
let changelogVersion = 'changelogVersion=' + version;
document.cookie = persistChangeLog;
document.cookie = changelogVersion;
document.cookie = 'path =/';
document.cookie = 'expires=' + expirationDate.toUTCString();
}
Here is the puzzling part; The actual cookie seizes to exist when I close the browser and start the browser back up. I checked using the console in the browser. It's like it gets deleted and its gone. I was under the impression that document.cookie was not the same as a session cookie? That it could persist through separate sessions?
I tried the cookie with and without an expiration date. The cookie is deleted either way. This both happens when I run the project in Visual Studio or the deployed version on my IIS.
What am I potentially doing wrong?
See https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
I don't think your calls to document.cookie are updating properties of an existing cookie. A cookie's properties are semicolon separated and stored as a string.
So you set up a cookie like so:
function resetOnce() {
document.cookie = "doSomethingOnlyOnce=; expires=Thu,01 Jan 2050 00:00:00 GMT";
}
So for your function above:
function setCookieDetails(persistence, version) {
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 999);
let persistChangeLog = 'dontPersistChangelog=' + persistence;
let changelogVersion = 'changelogVersion=' + version;
document.cookie = persistChangeLog + ";path =/;expires=" + expirationDate.toUTCString();
document.cookie = changelogVersion + ";path =/;expires=" + expirationDate.toUTCString();}

JS Cookie doesnot available in server side?

This is how I create my cookie with Javascript and after that redirect to cart page.
var d = new Date();
d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
var expires = ";expires=" + d.toUTCString();
var product = { productId: btn.value, colorId: productColorId, quantity: 0 };
products.push(product);
document.cookie = "products=" + JSON.stringify(products) + expires + "; path=/; SameSite=strict";
window.location.href = "cart";
and I can find this cookie in my browser in cookie section, but in server side I get nothing.
At first I use this code and I get null.
string products = HttpContext.Request.Cookies["products"];
After that I try this code
if (HttpContext.Request.Cookies.TryGetValue("products", out cookieValue))
{
// TODO: use the cookieValue
}
else
{
// this cookie doesn't exist.
}
and always it runs else, It seems, even don't find cookie.
Is there any suggestion?
According to this documentation,a can optionally be set in double quotes and any US-ASCII characters excluding CTLs, whitespace, double quotes, comma, semicolon, and backslash are allowed.
Try the following changes in your javascript ,use encodeURIComponent() to convert double quotes
document.cookie = "products=" + encodeURIComponent(JSON.stringify(product)) + expires + "; path=/; SameSite=strict";
The screenshot of the cookie value got in the server-side
In response to a comment, Cookie headers in javascript is forbidden, which means it cannot be set programmatically. Only the browser may set it, and it may choose to not send cookie information along with the HTTP request depending on their browser settings. (Typically inside privacy settings)
First I would confirm that the cookie header is indeed being sent. You can usually find this out by using the browser's web inspector and looking at network request. Here is a screenshot in chrome:
If you don't see the cookie header then I would advise double checking browser privacy settings to ensure cookies are enabled and disabling ad/tracking blockers if you have them installed. If this is a case, unfortunately there isn't much you can do other than beg the user to change their settings or disable their ad blockers.
If you DO see the cookie header, then this suggest that it may be a problem in the back-end code, but I'm not familiar with ASP.NET so I can't really comment on that.
Hope this helps

Javascript setting cookies with path=/

I'm creating cookies which are intended to be shared all across mysite.
This is the code that creates such cookies:
var setCookie = function(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
var path ="path=/;";
document.cookie = cname + "=" + cvalue + ";" + expires + ";" + path;
};
It looks pretty straight forward, and I'm using path=/ to indicate that I want to create or modify always the same cookie all along my site.
The problem is that it is creating one cookie for each URL. With a Mozilla plugin I can see the following:
Cookie Name Value Path
timer_is_enabled true /
timer_is_enabled false /foo
timer_is_enabled true /foo/bar
Which is causing my many bugs because the variables which are being accessed are not one and only, but many independent ones.
Any idea why I'm getting this behavior?
Your code should work as expected, at least regarding the path attribute. Those other cookies may be remnants from earlier tests (sadly, there's normally no way to track the creation date of a given cookie since browsers don't normally keep such information).
I suggest you remove all current cookies from the browser and try again.
That function works ok for me. Ran the following:
setCookie('myCookieKey', 'myCookieValue', 10);
And I got the following:

Cookie not getting deleted

In my asp.net application, am creating a cookie from server side using following code
Dim aCookie As New HttpCookie("StartDownload")
aCookie.Value = "True"
aCookie.Expires = DateTime.Now.AddMinutes(1)
Response.Cookies.Add(aCookie)
When I execute this code, the cookie is getting created, but am not able to delete the cookie from javascript on click of a button. Below is the javascript code.
function delCookie() {
alert(document.cookie);
document.cookie = "StartDownload" + "=; expires=" + new Date(0).toUTCString();
alert(document.cookie);
}
Am using IE browser. Not sure what the problem is. Kindly help.
You can try to hardcode the expiry date, something like, Thu, 01-Jan-1970 00:00:01 GMT and see if that'd work for you or not.
If still not, you might want to ask yourself following questions:
Have you checked the client-side and server-side cookie domains and paths to ensure they're the same?
Is one cookie secure and the other not?
Are there any server/client clock sync issues?

Setting persistent cookies with javascript

I have found a weird bug in my application and due to my small experience with Javascript I couldn't debug it;
I am trying to set a persistent cookie, which will die after one year from its set (max value in major browsers) but persists and won't be deleted after the browser gets closed. I've been using this code:
// Build the expiration date string:
var expiration_date = new Date();
expiration_date.setYear (expiration_date.getYear () + 1);
expiration_date = expiration_date.toGMTString();
// Build the set-cookie string:
var cookie_string = "test_cookies = true; path=/; expires=" + expiration_date;
// Create/update the cookie:
document.cookie = cookie_string;
I've noticed that the cookie has a session tag when I use cookie manager plugin, and only the ones with this tag get removed when the browser shuts down (others like Wordpress's and such scripts persist).
I changed your syntax over to my style of coding (variables at the top, minimal re-casting, etc.) and the example below works on my localhost quite well.
// Build the expiration date string:
var expiration_date = new Date();
var cookie_string = '';
expiration_date.setFullYear(expiration_date.getFullYear() + 1);
// Build the set-cookie string:
cookie_string = "test_cookies=true; path=/; expires=" + expiration_date.toUTCString();
// Create or update the cookie:
document.cookie = cookie_string;
If you are having problems on a production server, try setting the domain of the cookie as well (www.quirksmode.org/js/cookies.html#link5)
You can also use the max-age attribute.
cookie_string = "test_cookies=true; path=/; max-age=31536000";
One week: max-age=604800
One month: max-age=2628000
One year: max-age=31536000
have you tried using the getFullYear() and setFullYear() methods of the Date instance instead of getYear() and setYear() ? the latter are are deprecated, see here.
hope that helps! cheers.

Categories

Resources