This is code in which i am setting the cookie
document.cookie = 'cookie_consent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT Secure';
Below is my code for checking cookie.
useEffect(() => {
const cookieValue = (`; ${document?.cookie}`).split('; cookie_consent=').pop().split(';')[0];
if (!cookieValue) {
console.log("Cookie not avaliable");
}
}, [document?.cookie]);
Cookie is getting expired after accepting within few days since i set cookie expiry as 31 dec 9999 etc.
Thank You in advance, Any help will appreciated.
As a side note, set useEffect with document.cookie as a dependence will not re-run when document.cookie change, it only accepts state dependencies
Also,
All the cookies expire as per the cookie specification. So, there is no block of code you can write in JavaScript to set up a cookie that never expires. It is just impossible and is a fact.
Solution: But you can set up a cookie that expires in JavaScript and pick some very large value as expiry date as specified below:
const expireDate = new Date(2147483647 * 1000).toUTCString();
document.cookie = `cookie_consent=true; expires=${expireDate} Secure`;
My assumption would be immediately that 9999 is too great as a year.
See the following post: https://stackoverflow.com/questions/10328361/maximum-lifetime-of-javascript-cookie#:~:text=The%20max%20value%20is%202,on%20the%20UNIX%20timestamp%20value.
Related
Using cookies, i am trying to just show a alert message and a blinking status message that cookie is getting expired in like a countdown, giving them 60 seconds to click, extend it, if they do not click the link, it will navidate to the href link for expiration. and will expire the cookie.
<script>
//the function IdleToLong will be called after 30seconds.
//This means if the page reloads, it starts over.
setTimeout(IdleToLong, 30 * 1000); // 30 seconds
function IdleToLong() {
alert('Move your ass');
//If you also need to logout in PHP then you must notify the server that a user has been idle to long.
$.get('logout.php?reason=idle').complete(function() {
window.location.href = '/';
});
}
</script>
the above code works but it does not display a message like a countdown from 60 backward to 0, in that alert, if they click, expend, extend the cookkie, else logout, but that alert should only appear after every 3 hours, because i am setting it for 3 hours and extending it by 3 hours
That's not that simple, JavaScript cannot retrieve the expiration time of a Cookie in the document.cookie API or in the Response object in case of a fetch or XMLHttpRequest. So you'll have to provide the token from the backend in a readable header (or in the body). Then you'll be able with some simple logic to code the countdown in JavaScript.
To give more concrete examples, this header is not retrievable in JavaScript:
Set-Cookie: test=value; Path=/; Expires=Sat, 28 Mar 2020 12:48:58 GMT;
After this header has arrived in a HTTP response, the cookie is retrievable with document.cookie but without the expiration date.
On the other hand, this header is retrievable:
X-Whatever-Name-You-Want: test=value; Path=/; Expires=Sat, 28 Mar 2020 12:48:58 GMT;
So you could provide the Cookie in a custom header in order to retrieve it with JavaScript with the expiration date.
When a user visits your site and you set a cookie, you should set a second cookie containing the first cookie's expiration date. Then using JavaScript you can subtract the value of the expiration date from the current time to get your setTimeout value.
PHP:
$cookie_max_age = [number of seconds];
$cookie_expires = time()+$cookie_max_age;
$cookie_value = rawurlencode("[cookie value]");
header("set-cookie: [cookie name]=$cookie_value; max-age=$cookie_max_age", false);
header("set-cookie: expires=$cookie_expires; max-age=$cookie_max_age", false);
JavaScript:
var expires = parseInt(('; '+document.cookie).split('; expires=')[1]);
var interval = setInterval(function() {
var milliseconds_left = (new Date()).getTime()-expires*1000;
if (milliseconds_left<=0) {
clearInterval(interval);
$.get('logout.php?reason=idle').complete(function() {
window.location.href = '/';
});
}
else if (milliseconds_left<=60000) {
var messageBox = document.getElementById('messageBox');
messageBox.innerHTML = "Your session will expire in "+(milliseconds_left/1000)+" seconds.";
}
}, 1000);
Doing a countdown is a different problem. You probably want to create a lightbox with an extend button.
This issue is related to GDPR compliance but I'll keep it more focused on the technical issue at hand:
I have found some great open source resources for cookie consent banners, like Cookie Consent and Cookie Script. The implementation of the banner looks simple enough. The issue though is they require cookies to be disabled by default, which I am unsure how to do on a global level on a domain.
I don't know a lot of JavaScript but what I'm wondering is: Is there a method with Javascript to universally allow or deny cookies on a domain? Or, would this method be unique to each script in question? Google Analytics for example has documentation on disabling cookies. How would I lump that together with Facebook, Youtube, and all the other scripts using cookies and only allow cookies after a user has consented? Or, would I have to address it for each individual script?
In other words, is there a method in JavaScript where I can universally turn off/on cookies depending on user preference? Just from my research so far it seems there is not.
I have created a Proxy script on the document.cookie variable.
Run this script as the first script in your document.
Note
This solution assumes:
Cookies are set through javascript (and server side uses sessions).
It also only works on browsers which support the use of javascript proxies.
It only works for local domains (it only prevents external domain cookies from being set)
The Proxy script
Setting a cookie
What it does it that it intercepts the document.cookie variable because window.disableCookies is set to true in the script below. It stores the cookies in the window.cookieList array until the enableCookies script is executed. If enableCookies is executed, it will disable the proxy and iterate over the window.cookieList variable, to set the cookies in the browser.
Reading the cookies
If a script sets a cookie it expects the cookie in the document.cookie variable. So until the enableCookies function is called (and window.disableCookies is set to false), it fakes a document.cookie response, it builds it based upon the window.cookieList variable.
var cookie_setter_orig = document.__lookupSetter__("cookie").bind(document);
var cookie_getter_orig = document.__lookupGetter__("cookie").bind(document);
window.cookieList = [];
window.disableCookies = true;
Object.defineProperty(document, "cookie", {
get: function () {
if(!window.disableCookies) {
return cookie_getter_orig();
} else {
var response = "";
window.cookieList.forEach(function(cookie){
var splitted = cookie.split(";")[0].split("=");
response += splitted[0] + "=" + splitted[1] + "; ";
});
return response.slice(0, response.length - 2);
}
},
set: function (val) {
if(!window.disableCookies) {
cookie_setter_orig(val);
} else {
window.cookieList.push(val);
}
}
});
function enableCookies()
{
window.disableCookies = false;
window.cookieList.forEach(function(cookie){
document.cookie = cookie;
});
window.cookieList =[];
}
Testing it out
To test it out you can execute the following script:
/* These cookies are not set; they are set on the window.cookieList, until enableCookies is activated */
document.cookie = 'cookie1=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/';
document.cookie = 'cookie2=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/';
document.cookie = 'cookie3=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/';
/* This is a fake cookie list from the window.cookieList variable
* Output: cookie1=test; cookie2=test; cookie3=test
*/
console.log(document.cookie);
setTimeout(function(){
enableCookies(); /* Enable cookies and pass them to the browser */
/* The cookie below is passed to the browser directly, since cookies are enabled */
document.cookie = 'cookie4=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/';
/* This is the real cookie list
* Output: cookie1=test; cookie2=test; cookie3=test; cookie4=test
*/
console.log(document.cookie);
}, 2500);
Is there a method with Javascript to universally allow or deny cookies on a domain?
No.
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.
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?
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.