Develop Reference

How to set cookies client-side taking into account Intelligent Tracking Protection?

According to this blog post on webkit.org, cookies set client-side using document.cookie are capped to a 7 day expiry.
I understand the rationale behind using httpOnly for sensitive cookies such as auth tokens, but if I need to store something for a long duration and have it available across subdomains of a site, then cookies are the only option, right?
With these new ITP restrictions, setting cookies client-side which should live for any longer duration of time is not going to work, so what's the best way to approach this? One idea was make a route which takes params and converts them into a Set-Cookie header and then make a request to that instead of using document.cookie. Is there a better way?

One attempt would be to use localStorage instead of cookies, technically they don't expire. The Problem however can be, that the user can decide to empty the localStorage.
Here's an example
//use this if you only need it for the current page and remove it after leaving the page
const exampleStorage = window.localStorage;
exampleStorage.setItem('currentUser', 'Manuel');
//use this if you need to keep it even after leaving the page
localStorage.setItem('glob_currentUser', 'Max');
//and finally this if you need to keep it only for the session
sessionStorage.setItem("session", "Morning")
If you need more Information about LocalStorage here are 2 helpful websites:
MDN Window​.local​Storage
The W3C Specification for localStorage

PHP Cookies contains Less data

I used https://github.com/js-cookie/js-cookie to set cookies. When I check in browser, cookies are set properly but When I extract cookies on server side(PHP) it behaves abnormally. Sometimes $_COOKIE contains/holds all the content/data which is normal & fine, but sometimes $_COOKIE misses some of the cookie data that is being set in from client side.
You can see in screenshot that sub-total & laravel_session keys are missing in response when I print it in PHP while both are present in request header
I am using Laravel 5.1

Cookies size is limited to about 4000 bytes ( including key, value, expiration date). you probably exceeded the limit, and your data was cut off.
You can increase the size by changing the value of LimitRequestFieldSize in your apache conf file.
keep in mind that generally, storing so much data in cookies is a sign of bad design, maybe try using session or local storage instead.

How to force refresh client js from server side?

Here is the case:
I get a js to monitor web ads.Because of the browser cache,when i update js on server side,js on client side will not be refreshed immediately.How could i force refresh client js as soon as i update js on server side?
p.s. Add version number strategy is not useful in my case.

Simple strategy - add a version number as a query string to your js files, and change the number. This will cause the browsers to fetch your js files again -
<script src="mysource.js?version=123"></script>
Whenever you change your script on the server, change this version number in the html too. Or better yet, apply a random number as the version value every time you request this script.

You can use HTTP's cache-control mechanisms to control the browser's caching.
When serving a copy of your JS file, include an ETag and/or Last-Modified header in the response. Also include a "Cache-Control: must-revalidate" header. This tells the browser that it must check back with the server every time, and it can send an If-None-Match and/or If-Modified-Since header in future requests to ask the server to send the file only if it's changed.
If you'd like to avoid the load of browsers checking with the server every time, and it's OK for the changes to not take effect immediately, you can also include a Date header with the current time and an Expires header set to some point in the future — maybe 12 or 24 hours. That allows the browser to use its cached copy for the specified amount of time before it has to check back with your server again.
HTTP's cache-control features are pretty robust, but there are plenty of nuances, such as controls for intermediate caches (e.g. other systems between your server and the user's browser). You'll want to read about caching in HTTP overall, not just the specific header fields that I've mentioned.

You can do this by changing the name of the file. Add some version number (could be like parameter, i.e. filename.js?v=time(); for PHP for example) or just append some random numbers at the end of the filename.
Actually I'm not sure whether you can force the client to refresh this type of files. But when changing the file name you will force the browser to get the newest version.

Other Alternatives to Cookies

I am using cookies to store data at client end for later access. But my concern is I am unable to set more than 20 cookies and I am looking for alternative to cookies.
Please help me on this
Updated
I found jStorage plugin here But it does not work for me in this case..

You can leverage local/session storage of HTML5
To save a value:
localStorage.name = "Bob";
To get a value:
alert(localStorage.name);
http://www.w3.org/TR/webstorage/

The two main options are Web Storage and Web SQL Database.

Are you storing one piece of information in each cookie? Because you could use JSON serialization to store more data in each individual cookie.

There are few alternatives to cookies
Session (server side)
If HTML5 compliant browser then you can even have client side database

You can store only one cookie representing a session ID (for example, an alfanumeric randomly generated long string). Then you just need a database to store all your data (that now is on 20 cookies) together with that session ID. At runtime, you read from the only cookie the session ID, and load from the DB all data.

JavaScript cookie setting used to work and stopped

In a nutshell, I have a web application which used to be able to set cookies just fine, but it no longer works. The really strange thing is I've used Chrome's debugger to follow what's going on, and it makes it all the way to the "document.cookie = " statement fine.
Further, I haven't changed anything except the content of the cookie (adding more information). I haven't modified the cookie setting logic at all, or even the parameters.
Here's the most recent version of my application: http://asmor.com/scripts/tsrand/alpha/
The relevant bit is lines 147-149, http://asmor.com/scripts/tsrand/alpha/init.js
cookie=JSON.stringify(opt)
log("Cookie: "+cookie);
$.cookie(cookieName, cookie, { expires: 365 });
opt is an object I'm using to store form element values. I convert the object into a JSON string and then store it. Here's an example of what cookie contains in this version of the program:
{"diseaseSelect":".5","soloGame":"checkbox:false","showLog":"checkbox:true","min_Setting":"0","max_Setting":"1","cardBarrowsdale":"Maybe","cardDoomgate":"Maybe","cardDragonspire":"Maybe","cardDreadwatch":"Maybe","cardFeaynSwamp":"Maybe","cardGrimhold":"Maybe","cardRegianCove":"Maybe","min_Thunderstone":"1","max_Thunderstone":"1","cardStoneofAgony":"Maybe","cardStoneofAvarice":"Maybe","cardStoneofMystery":"Maybe","cardStoneofScorn":"Maybe","cardStoneofTerror":"Maybe","min_Monster":"3","max_Monster":"3","cardAbyssal":"Maybe","cardAbyssalThunderspawn":"Maybe","cardBanditHumanoid":"Maybe","cardCultistHumanoid":"Maybe","cardDarkEnchanted":"Maybe","cardDoomknightHumanoid":"Maybe","cardDragon":"Maybe","cardElementalFire":"Maybe","cardElementalNature":"Maybe","cardElementalPain":"Maybe","cardEnchanted":"Maybe","cardEvilDruidHumanoid":"Maybe","cardGiant":"Maybe","cardGolem":"Maybe","cardHorde":"Maybe","cardHumanoid":"Maybe","cardHydraDragon":"Maybe","cardOoze":"Maybe","cardOrcHumanoid":"Maybe","cardTheSwarm":"Maybe","cardUndeadDoom":"Maybe","cardUndeadLich":"Maybe","cardUndeadPlague":"Maybe","cardUndeadSpirit":"Maybe","cardUndeadStormwraith":"Maybe","min_Guardian":"0","max_Guardian":"1","cardDarkChampion":"Maybe","cardDeathSentinel":"Maybe","cardGuardianofNight":"Maybe","cardGuardianofTorment":"Maybe","cardUnholyGuardian":"Maybe","min_Trap":"0","max_Trap":"1","cardTrapDeath":"Maybe","cardTrapDire":"Maybe","cardTrapDraconic":"Maybe","min_Treasure":"0","max_Treasure":"1","cardAmuletTreasure":"Maybe","cardFigurineTreasure":"Maybe","cardUlbricksTreasure":"Maybe","min_Hero":"4","max_Hero":"4","cardAmazon":"Maybe","cardBelzur":"Maybe","cardBlind":"Maybe","cardCabal":"Maybe","cardChalice":"Maybe","cardChulian":"Maybe","cardClan":"Maybe","cardDeep":"Maybe","cardDiin":"Maybe","cardDrunari":"Maybe","cardDivine":"Maybe","cardDwarf":"Maybe","cardElf":"Maybe","cardEvoker":"Maybe","cardFeayn":"Maybe","cardFlame":"Maybe","cardGangland":"Maybe","cardGohlen":"Maybe","cardGorinth":"Maybe","cardHalf-Orc":"Maybe","cardLorigg":"Maybe","cardOutlands":"Maybe","cardPhalanx":"Maybe","cardRedblade":"Maybe","cardRegian":"Maybe","cardRunespawn":"Maybe","cardSelurin":"Maybe","cardSidhe":"Maybe","cardSlynn":"Maybe","cardStoneguard":"Maybe","cardTempest":"Maybe","cardTerakian":"Maybe","cardTholis":"Maybe","cardThyrian":"Maybe","cardToryn":"Maybe","cardVerdan":"Maybe","cardVeteran":"Maybe","min_Village":"8","max_Village":"8","cardAmbrosia":"Maybe","cardAmuletofPower":"Maybe","cardArcaneEnergies":"Maybe","cardBanish":"Maybe","cardBarkeep":"Maybe","cardBattleFury":"Maybe","cardBlacksmith":"Maybe","cardBlessedHammer":"Maybe","cardBluefireStaff":"Maybe","cardBorderGuard":"Maybe","cardBurntOffering":"Maybe","cardChieftansDrum":"Maybe","cardClaymore":"Maybe","cardCreepingDeath":"Maybe","cardCursedMace":"Maybe","cardCyclone":"Maybe","cardDivineStaff":"Maybe","cardDoomgateSquire":"Maybe","cardFeast":"Maybe","cardFireball":"Maybe","cardFlamingSword":"Maybe","cardFlaskofOil":"Maybe","cardForesightElixir":"Maybe","cardFortuneTeller":"Maybe","cardFrostBolt":"Maybe","cardFrostGiantAxe":"Maybe","cardGlowberries":"Maybe","cardGoodberries":"Maybe","cardGreedBlade":"Maybe","cardGuardianBlade":"Maybe","cardGuide":"Maybe","cardHatchet":"Maybe","cardIllusoryBlade":"Maybe","cardLantern":"Maybe","cardLightstoneGem":"Maybe","cardMagiStaff":"Maybe","cardMagicMissile":"Maybe","cardMagicalAura":"Maybe","cardPawnbroker":"Maybe","cardPiousChampion":"Maybe","cardPolearm":"Maybe","cardPolymorph":"Maybe","cardQuartermaster":"Maybe","cardRecurveBow":"Maybe","cardSage":"Maybe","cardScout":"Maybe","cardShortBow":"Maybe","cardShortSword":"Maybe","cardSilverstorm":"Maybe","cardSkullbreaker":"Maybe","cardSoulGem":"Maybe","cardSoulJar":"Maybe","cardSpear":"Maybe","cardSpiritBlast":"Maybe","cardSpiritHunter":"Maybe","cardSpoiledFood":"Maybe","cardTavernBrawl":"Maybe","cardTaxCollector":"Maybe","cardThunderRing":"Maybe","cardTorynGauntlet":"Maybe","cardTownGuard":"Maybe","cardTrader":"Maybe","cardTrainer":"Maybe","cardWarhammer":"Maybe"}
Now, here's the oldest backed-up copy I have: http://asmor.com/scripts/tsrand/backup/2010-09-13/dev/
This copy still works.
Here's the cookie-setting logic from that copy, lines 130-132 http://asmor.com/scripts/tsrand/backup/2010-09-13/dev/scripts/init.js
cookie=JSON.stringify(opt)
log("Cookie: "+cookie);
$.cookie(cookieName, cookie, { expires: 365 });
And an example of what the cookie for that one contains:
{"guardianSelect":".5","trapSelect":"1","monstersSelect":"3","heroesSelect":"4","villageSelect":"8","soloGame":"checkbox:false","useConditions":"checkbox:true","showLog":"checkbox:true","setBase":"checkbox:false","setPromo":"checkbox:true","setWrathOfTheElements":"checkbox:false","cardAbyssal":"Maybe","cardDoomknightHumanoid":"Maybe","cardDragon":"Maybe","cardElementalNature":"Maybe","cardElementalPain":"Maybe","cardEnchanted":"Maybe","cardGolem":"Maybe","cardHorde":"Maybe","cardHumanoid":"Maybe","cardOoze":"Maybe","cardUndeadDoom":"Maybe","cardUndeadSpirit":"Maybe","cardDarkChampion":"Maybe","cardDeathSentinel":"Maybe","cardTrapDeath":"Maybe","cardTrapDire":"Maybe","cardAmazon":"Maybe","cardBlind":"Maybe","cardChalice":"Maybe","cardClan":"Maybe","cardDiin":"Maybe","cardDivine":"Maybe","cardDwarf":"Maybe","cardElf":"Maybe","cardFeayn":"Maybe","cardGangland":"Maybe","cardGohlen":"Maybe","cardLorigg":"Maybe","cardOutlands":"Maybe","cardRedblade":"Maybe","cardRegian":"Maybe","cardRunespawn":"Maybe","cardSelurin":"Maybe","cardThyrian":"Maybe","cardToryn":"Maybe","cardAmbrosia":"Maybe","cardAmuletofPower":"Maybe","cardArcaneEnergies":"Maybe","cardBanish":"Maybe","cardBarkeep":"Maybe","cardBattleFury":"Maybe","cardBlacksmith":"Maybe","cardClaymore":"Maybe","cardCreepingDeath":"Maybe","cardCursedMace":"Maybe","cardFeast":"Maybe","cardFireball":"Maybe","cardFlamingSword":"Maybe","cardForesightElixir":"Maybe","cardGoodberries":"Maybe","cardHatchet":"Maybe","cardIllusoryBlade":"Maybe","cardLantern":"Maybe","cardLightstoneGem":"Maybe","cardMagiStaff":"Maybe","cardMagicMissile":"Maybe","cardMagicalAura":"Maybe","cardPawnbroker":"Maybe","cardPolearm":"Maybe","cardSage":"Maybe","cardShortBow":"Maybe","cardShortSword":"Maybe","cardSpear":"Maybe","cardTavernBrawl":"Maybe","cardTaxCollector":"Maybe","cardTownGuard":"Maybe","cardTrainer":"Maybe","cardWarhammer":"Maybe"}
I'm using libraries for the JSON and for setting/getting the cookie. Both that early version and the latest use the exact same versions of the exact same libraries.
The only thing I can think of is that the cookie has gotten a bit more than twice as long. Before URI encoding, we're talking 4000 characters vs. 1800 characters. Also, I URI encoded the more recent cookie and manually set it myself, and the browser accepted it just fine, and my program loaded it just fine.
I'm completely out of ideas here. Help!

You should really store all this data in a session on the server if possible, rather than having a massive cookie. Then you can simply request data via AJAX or embed it in each page request.
Browsers are only required to provide 4KB of space per cookie, so if you're over that there's a chance it might not be stored.

4096-byte limit; otherwise entire cookie is discarded by IE.
http://support.microsoft.com/kb/306070