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
Related
I inherited a website to maintain. It uses two different third-party programs and transfers information between the two using an iFrame to set cookies. The information is not particularly sensitive.
Using generic versions of everything, let's say:
* Tool 1: www.xyzWarehouse.com
* Tool 2: www.xyzCorp.com
* In-between page: tools.xyzCorp.com
xyzWarehouse opens a tiny iFrame for tools.xyzCorp.com/setTransferCookies.jsp
setTransferCookies.jsp sets cookies for domain xyzCorp.
xyzWarehouse then runs a black box that opens the URL for the correct page of xyzCorp
custom JS code on xyzCorp then opens those cookies and uses them to pre-fill form fields.
I've recently been trying to update the cookies to account for changes in browser security requirements. At the moment, my current problem is in trying to get cookies to work for Chrome, using SameSite:None and Secure.
Long-term, we want to have all three locations to look like:
* www.xyzWarehouse.com
* corp.xyzWarehouse.com
* tools.xyzWarehouse.com
But that has to go through red tape with IT and involves changes on the administrator for tool1 and tool2. We need an intermediate solution to keep us going until then.
This is what I've tried:
Original code 1: Using .jsp
cookieString = cookieString.substring(0,cookieString.length()-1) + "}";
Cookie cookie = new Cookie ("xyzTracking",cookieString);
cookie.setMaxAge(365 * 24 * 60 * 60);
cookie.setDomain("xyzWarehouse.com");
response.addCookie(cookie);
I can't seem to find a version of Cookies which involves samesite, so probably can't use this. Please let me know if I'm wrong. This, of course, gives an error telling me I need to use SameSite: None
Attempt 2: Using JavaScript
for (i=0;i<attPairs.length;i++) {
var pair = attPairs[i].split("=");
params[pair[0]] = pair[1];
}
jQuery.cookies.set( 'xyzTracking', params, {expiresAt: date, domain:'xyzWarehouse.com', sameSite: 'None', secure: 'true'});
Chrome complained - errors about samesite.
Attempt 3: Using JavaScript
for (i=0;i<attPairs.length;i++) {
var pair = attPairs[i].split("=");
params[pair[0]] = pair[1];
}
document.cookie = "xyzTracking=" + encodeURIComponent(params) + "; domain=xyzWarehouse.com; SameSite=None; Secure";
Chrome complained - errors about samesite
Attempt 4: Using .jsp
cookieString = cookieString.substring(0,cookieString.length()-1) + "}";
response.setHeader("Set-Cookie", "xyzTracking="+cookieString+"; SameSite=none; Secure; Domain=xyzWarehouse.com");
Chrome will let this run without reporting any errors, but on the far side, trying to retrieve cookies, www.xyzWarehouse.com tells me that there are no cookies set.
What am I doing wrong and how do I fix it? I do not have any experience in .jsp, I have a lot of experience in JavaScript, but honestly I try to program to avoid using cookies if at all possible, so I have barely ever had to set them. Those I have set were never cross-domain.
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.
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 need (for practice) to set a cookie via bookmarklet in website X, and read him with another bookmarklet from website Y.
For example, set a cookie named "user" with value of "Guy" in Google, and read this from YouTube.
I managed to set the cookie, but can't think of any idea how to read him from website b.
Thanks!
You need two bookmarklets, a getter and a setter.
You go to site X and use the getter bookmarklet to read the cookie and let the user copy it to his clipboard.
Then you go to site Y and use the setter. The setter will prompt the user for the bookmarklet and the user will then paste it into the prompt. The code will then set the cookie accordingly.
You can of course combine these two bookmarklets into a single getter/setter. The prompt will contain the current cookie for the page. The user can then choose to either copy the cookie and cancel (using it as a getter) or choose to to alter the cookie and click "OK" (using it as a setter).
I was looking for a way to share cookies of a specific website with a friend (reading them in my browser via bookmarklet and my friend setting them on his browser also via bookmarklet). Not quite what you asked for, but searching brought me here. This is my approach:
First there is a bookmarklet for exporting cookies. It will remove unnecessary white-spaces and encode your data in a base64 string for safe transport:
javascript:(
function(){
prompt("GET cookies encoded in base64", btoa(document.cookie.replace(/\s/ig, "")));
}
)
();
Then there is a second bookmarklet for importing all cookies encoded in the string. You can also set an optional lifetime here (thanks to https://www.quirksmode.org/js/cookies.html):
javascript:(
function(){
var inputstring = prompt("SET cookies decoded from base64");
var inputclean = atob(inputstring).replace(/\s/ig, "");
if (confirm("These cookies will be imported:\n\n" + inputclean.replace(/;/ig, "; "))) {
var days = prompt("Cookie lifetime in full days", "365");
var cookiearray = inputclean.split(";");
cookiearray.forEach(function(entry) {
var expires = "";
var split = entry.split("=");
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = split[0] + "=" + (split[1] || "") + expires + "; path=/";
});
}
}
)
();
Do not forget you have to run those on a specific website or tab. It does NOT export the entire collection of the cookies your browser is storing.
According to this StackOverflow, how to get cookies from a different domain with php and javascript you can't get cookies from another domain UNLESS you have access to it, as it would be a huge security flaw.
I'm stuck with this weird issue in Safari. I'm storing a user selection data in a cookie using javascript.
I create the cookie using following code -
document.cookie = cookieName +
"=" + encodeURIComponent(cookieValue) +
"; expires=" + jsDate.toGMTString();
and its read using -
var cookie = document.cookie;
if(cookie.length !== 0){
var theCookie=" "+document.cookie;
var ind=theCookie.indexOf(" "+cookieName+"=");
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(";",ind+1);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+2,ind1));}
else { return '';}
This code works fine in Firefox and IE but when I access this cookie's data in Safari - an empty string is returned. The weird thing is, if i REPEAT my selection and try again, i can access the data. In other words, the first time i access my site, the cookie data is unavailable but in subsequent attempts the data is available!
To see this issue again, i have to clear Safari's cache, history and delete the cookies from the "Show cookies" section and reopen the browser.
Another observation - when i fail to read the cookie data, we can see the cookie when we look under Safari > Preferences > Security > Show cookies
ps:
facing this with Safari version 4 & 5