Unable to set cookies in Javascript - javascript

I'm trying to set my cookies in Javascript the following way
<video id = 'media'></video>
document.addEventListener('DOMContentLoaded', function() {
document.cookie='X-At=$ACCESS_TOKEN$';
document.getElementById('media').src = "$some video link$";
});
However, the cookie just doesn't seem to be added. The file is also hosted on a simpleHttpServer because Chrome seems to ignore pages on local pages. Could someone tell me where the problem is? Note that the cookie gets set when I delete document.getElementById('media').src = "$some video link$";... SoI'm guessing it has to do with setting the source of the element.
Thanks so much.

Found out that cookies are domain specific. So I was unable to set the cookies for the request to a different network, i.e. my file is hosted on a local network 127.0.0.1 and I was trying to send the cookie to a different domain.
The hacky go around for this was to create a proxy server for my request and overwrite the cookie there and redirect the target to my original destination. Couldn't think of a better way to do this.

mate: way of create a cookie like this
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

Related

Cannot set cookie path to the root directory with Javascript

On localhost. Using Firefox 88.0 (Private window). My document tree:
/index.html
/page1/index.php
/page2/index.php
Here's my JS to set cookies (on page1):
function setCookie(name, value) {
document.cookie = name + "=" + value;
document.cookie = "path=/";
}
Which (I think) overwrites the cookie path to / every time I call the function. At the beginning of the same JS file I have: alert(document.cookie);. It displays the full cookie as I save it, including path=/.
On the homepage (/index.html) I have: <script>alert(document.cookie);</script>. But it displays an empty alert. I don't see the cookies. But if I go back to the page1 then I see the cookies again. Why is this?
I've also tried (solutions from other SO answers):
visiting 127.0.0.1 - didn't work (port is always 80).
Uploading to a web server. Same result as above.
visiting the localhost (localhost and 127.0.0.1) on Chrome.
Couldn't resolve. Could anyone help please? Thank you in advance!
Apparently I have to set the path at the time of setting the cookie, not using document.cookie after the cookie has already been set.
This got the problem fixed:
function setCookie(name, value) {
document.cookie = name + "=" + value + ";path=/"; //Set the path while setting the Value.
}

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:

How to edit existing cookies in subdomains?

If a subdomain of lol.com has a cookie named "a" with value "a" and that has a domain of .lol.com how would you edit that cookie from lol.com if you have a console open in it (using JS console from inspect element in chrome).
Also would it be possible to edit it too if the cookie's domain was a.lol.com? They are both https://
Thank you.
Before adding a new cookie you must assign it to specific domain.
Example:
This function helps you to easily add cookies:
function setCookie(cName, cValue, cExpireInDays, cDomain){
var d = new Date();
d.setTime(d.getTime() + (cExpireInDays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cName + "=" + cValue + "; " + expires + ";domain="+cDomain+";";
}
From sub.lol.com open console and add new cookie by calling the setCookie function
setCookie("Test", "TestValue", 4, "lol.com");
Go to lol.com open another time the console, and write document.cookie you will get the following data:
"Test=TestValue; OTHER_COOKIES..."
If you want edit it you must add a new cookie with the same domain as we did before or just call the setCookie function.

Why would setting document.cookie not work in Chrome?

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.

js cookie is not shown in chrome developer tools

I created cookie with server side code (c#) and it was shown in chrome developer tools. (Resources->Cookies)
now I created it in js and it is not shown there anymore.
if I write in the console: "document.cookie" - I can see my cookie, but I want to see it in Resources->Cookies so I can easily delete it when I want to.
the code to create the cookie: (from: http://www.w3schools.com/js/js_cookies.asp?output=print)
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
and:
setCookie("myCookie", "true", 365);
Some updates on very similar topic. Secure cookies are not shown on insecure sites.
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/rSbJ1m2F3HY
You need to refresh the resources inspector (small refresh icon in the bottom of the dev tools tray) before it appears.
As from experience, you'll need to refresh the cookies page after you implement the cookie with JS.
Check the cookie settings in your browser and select Allow all cookies option and then refresh the page.

Categories

Resources