So I have a cookie set through js when the user accepts a popup, it is set through the following function.
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 + ";path=/";
}
setCookie("accepted_popup", 'accepted_value', 1);
When checking the Cookie in chrome dev tools it is set indeed.
Name |Value |Domain |Path |Expires |Size |HttpOnly |Secure |SameSite |Priority
accepted_popup |accepted_value |example.com |/ |2020-07-09T15:07:43.000Z |11 | | | |Medium
I realize that for the cookie to take effect on the server it would need a page load. So I don't want the popup to show next time the page loads, so I'm checking the Cookie on the server like this.
<?php
if(isset($_COOKIE['accepted_popup'])){
doSomething(); //not showing popup
}else{
showPopup(); //showing popup
}
?>
What's new in this question that hasn't been asked before is that the above code was perfectly working on the old server, it stopped working when moving to AWS(if that might be a reason).
When I do var_dump($_COOKIE); on the server the cookie accepted_popup doesn't show in it.
Also I'm setting the cookie and retrieving it on the same domain(in production), say "example.com" no subdomain or www.
On my development site subdomain.example.com the above code is working fine, and behaving as expected.
So the problem turned out to be not in setting the cookie in PHP but in AWS CloudFront.
If anyone is facing the same problem and have AWS hosting, check
CloudFront Distributions -> Behaviors -> Default(*) either change the "Forward Cookies" option or set add the cookie names to the "Whitelist Cookies" as shown in the image.
Related
I'm working on some cookie consent and terms etc.. So I made a JS function to set a cookie after user clicks "Agree" button:
...html
<button onclick="setCookie('law_cookie', 'agree_all', 90)">
...js
function setCookie(name, value, daysToLive) {
// Encode value in order to escape semicolons, commas, and whitespace
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number") {
/* Sets the max-age attribute so that the cookie expires
after the specified number of days */
cookie += ";max-age=" + (daysToLive * 24 * 60 * 60) + ';Secure;path=/';
document.cookie = cookie;
cookie_set = true
}
}
Now I tested in chrom and firefox, everything works great! BUT, safari isn't able to set a cookie. I tried to initialise by clicking on the button but after reload safari hasn't set the cookie.
I checked if javascript was enabled (it was) and I also tried to set cookie = encodeURIComponent(cookie); but nothing works.
Someone has an idea what I'm doing wrong?
Safari version 15.2, unlike Chrome and Firefox, refuses to set Secure cookies on the localhost origin, so you'll need to add a workaround just for Safari.
Have you tried using a private tab on safari? It may be possible that it didn’t load your new files. On my website I use the same method to write cookies and it works on Safari.
Encoding the value is good
let cookie = name + "=" + encodeURIComponent(value);
But encoding the whole sting not:
cookie = encodeURIComponent(cookie);
I modified your script I removed the 'secure' entry as that will limit it to working only with HTTPS, when you are troubleshooting give it the best chances, and add security only when everything works. In the past the might have worked with some browsers:
https://developer.mozilla.org/en-US/docs/web/api/document/cookie
;secure Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.
And I added window.alert so you will see 3 things:
Proof that your button/event actually hit
Check that you provided the age argument (without age your condition will not save cookie)
Will show you what values are going to save so you can confirm if it's ok.
The modified JS:
function setCookie(name, value, daysToLive) {
// Encode value in order to escape semicolons, commas, and whitespace
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number") {
/* Sets the max-age attribute so that the cookie expires
after the specified number of days */
cookie += ";max-age=" + (daysToLive * 24 * 60 * 60) + ';path=/';
window.alert(cookie);
document.cookie = cookie;
cookie_set = true
}
}
setCookie('law_cookie', 'agree_all', 90)
Often using a lot of console.log helps with troubleshooting as well
Do you use some other frameworks which could interfere with this? Something might be doing stuff with cookies behind your back. Did you try saving cookies from the HTTP header as well?
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
Did you try to minimalize the replicator, make smallest project which can still replicate the problem? Or start with a small self-contained JS fiddle:
https://jsfiddle.net/ao9p7e4j/1/
Here I added a function to show cookies to see what you have
The following code works fine in FF:
var date = new Date();
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
document.cookie = "c_odi" + "=" + $('#orderdetailid').val() + expires + "; path=/";
But not in Chrome. When I'm using Chrome and I do document.cookie in the console to view cookies, the c_odi cookie isn't there. But when I do the same in FF, it is. How can we make cookies work in Chrome? The cookies that were added by PHP are fine, but not this one in JavaScript, and I do need to add this cookie via JavaScript at this point.
This problem can occur if You open Your code as file:///C:/.../xxx.html instead of http:// localhost/xxx.html. Chrome doesn't save cookies (because there is no domain and no http communication) in file:// case.
Few links of interest:
https://gist.github.com/shellscape/02d3a97031e7afdf99d2642f93d59486
Setting Cookies using JavaScript in a local html file
https://bugzilla.mozilla.org/show_bug.cgi?id=536650
https://datatables.net/forums/discussion/46255/save-state-to-cookie-in-file-protocol
Chrome doesn’t store cookies from the pages which are loaded from local file system. For example if you are accessing a HTML file in chrome browser from local file system(ex: file:///C:/Users/deepak.r/Desktop/test.html), cookies are not supported.
Try to replace this line:
document.cookie = "c_odi" + "=" + $('#orderdetailid').val() + expires + "; path=/";
with this one:
document.cookie = "c_odi" + "=" + escape($('#orderdetailid').val()) + expires + "; path=/";
You would have to use unescape when you try to read value, but you'll menage when time comes :)
Seems like it's working for me:
http://jsfiddle.net/rQEnF/3/
At least the cookie shows up in dev tools, as you can see. However, I replaced the jQuery selector $('#orderdetailid').val() with a constant value, as you can see. Is there something wrong with that value or the element containing the value maybe?
Make sure your address bar url matches the domain. In Chrome if you set domain=www.site.com and then test your page in the browser missing out the www. it won't work.
Step 1: My client from his OSX/Windows comes to my site using Google chrome , and downloads a trial key such as: LICENSE.cert file, which contains some unique keys: xyz-zsd-cdfd-xfdfd-1212
Step 2: i have a cookie written (for Step 1)
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Step 3: NEXT day or Day after, again he comes back to the same site but this time he came from Safari or Firefox or IE (not using same Google chrome)
How do i read the cookie which was stored on his Google chrome in day 1? (is there anyway to write once for all? so that i suggest him?)
Cookies are managed separately by each browser - it isn't possible for you to access cookies created by other browser.
Your best bet would probably to persist the required data into some kind of database and access it when needed, if that's possible in your case.
Using IE11, I can display the content of all cookies, write out a cookie, find it, and delete it using JavaScript, even though I have my Privacy set to "Block All Cookies". (And actually, no matter what version I set my IE emulation to, the document.cookie still works.) It works as it should on Chrome with cookies disabled - i.e. document.cookie returns empty/nothing when I try to reference it in the same JavaScript.
I'm trying to detect whether the user has cookies turned off in their IE. (Old ASP app that requires IE with cookies. No JQuery. No Modernizr.) To do that, I'm attempting to write out a cookie, find it, and then delete it. That either works or it doesn't - which should tell me whether cookies are turned ON or OFF. Any ideas? I thought this was the safest way to detect a user's IE cookie setting.
My code:
<script language=javascript>
cookiesON = false;
if ("cookie" in document ) {
alert("1. document.cookie (before add): " + document.cookie);
var dateNow = new Date();
document.cookie = "testcookie=" + new Date()
alert("2. document.cookie (after add): " + document.cookie);
if (document.cookie.indexOf("testcookie=") > -1) {
cookiesON = true;
} else {
cookiesON = false;
}
// delete cookie: set cookie to expire 2 minutes ago
document.cookie="testcookie=xx; expires=" + (new Date(dateNow.getTime() - 2*60000).toGMTString());
alert("3. document.cookie (after delete): " + document.cookie);
}
On IE:
All 3 alerts show values for document.cookie, no matter whether cookies are turned on or off. You can see the testcookie being added and deleted back off.
On Chrome:
All 3 alerts show blank for document.cookie when cookies are off. Works as described for IE when cookies are turned on.
I am using the following cookie:
var $j = jQuery.noConflict();
$j(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var thirtyDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + thirtyDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
}
});
Everything works fine with one exception. The above cookie is for displaying instructions the first time a user visit the gallery yet the gallery has multiple pages. What happens is the user sees the instructions for each page in the gallery the first time they visit that specific page. These instructions need to load only once when they visit the gallery no matter which page they start on. How do I go about changing this so it displays only once across my gallery pages?
Couple Notes:
The gallery is wrapped inside a Dreamweaver Template and the cookie is inside that template. I cannot move the cookie outside of the template for a few reasons.
Also I use a hosted CMS and I DO NOT have server side access so it must be done using javascript.
Add ;path=/ to make your cookie into a site cookie. See this article on JavaScript Cookies for more details.
document.cookie = valuename + "=" + value + "; " + expires + ";domain=;path=/";
This "domain=;path=/"; will take dynamic domain as its cookie will work in subdomain.
It will work if you want to test in localhost.