Set Cookie Expiration Date – Browser compatiability

I was having an issue with the cookie expiration date not being set correctly for Internet Explorer 11 via Javascript.  I had found an older Javascript class for setting and modifying cookies that was available that I was using.  The class did not support sub-cookies however, so I added that functionality, as well as a few tweaks.

Variable for setting a Cookies Expires Value

The bottom line is that I soon found that historically there have been two ways to set an expiration date in a cookie – expires or max-age.

• expires
  • UTC Date format expected
  • Example:
    • Thu, 26 Mar 2015 15:26:23 GMT
  • Can be easily generated from a Javascript date object with the toUTCString() method
    • NOTE: Many other sources on the internet suggest using the toGMTString() method, however this is deprecated and is not advised to be used moving forward.
• max-age
  • EPOCH (or Unix time) is expected
    • Number of seconds since January 1st, 1970
  • Example:
    • 1427383583165
  • When setting max-age for a cookie, set the amount of time until the cookie will expire, not the full EPOCH time from 1970.
    • Example:
      • Expire in 1 minute:
        • 60   (60 seconds)
      • Expire in 1 day:
        • 86400   (60 seconds * 60 minutes in an hour * 24 hours in a day)

So which option is the correct option?  Sadly, the answer depends on which browser the visitor is using.  max-age is the predominate option, however older versions of Internet Explorer (I believe it’s 8 and older) do not recognize this value and instead expect expires to be set instead. That said, my testing at the time of writing this shows that IE11, Chrome, and FF will all accept either value. However, the best scenario for this is to simply set both.  This will cover your bases regardless of what browser your visitor uses.  It is my understanding that most browsers will look for the max-age value first, and then fall back to expires if needed.

Allowable Dates

There is a limitation on the max date allowed of January 19th, 2038 (at 03:14:07 to be precise) due to the 32bit time system built into servers (year 2038 bug).  For this reason, that is the max allowed date (at this time) that you should use when setting a future expiration date to ensure optimal browser compatibility.  In epoch time, the max translates to 2147483647.

Checking Cookie Values

Chrome

EditThisCookies is the greatest browser plugin for this – simple, quick, easy, allows you to modify or delete cookies as needed. http://www.editthiscookie.com/

Firefox

Firefox maybe the best browser for viewing cookies as they update in realtime as the cookie values change.  To view them however, you need to install Firebug. http://getfirebug.com/ Choose the Cookies tab and watch all of the cookie info display and update. Alternatively, you can view cookies without Firebug by right clicking on a page and choosing View Page Info.  Then choose the Security tab, and the View Cookies button.

Internet Explorer

Using IE11 got a bit easier, but still  not very friendly for working with cookies. You can use the Developer Tools for this though, but it’s still kluky and in my experience not always accurate regarding the expiration date.  The program listed below did help though.

• Open Developer Tools
• Choose Network tab
• Click the green play button in the top left to start capturing data.
• Load your webpage to capture network data.
• Choose: Network (tab) -> Details -> Cookies  This will list all of the cookies and their information for this webpage.
  • NOTE: If your cookie was set on this page load it will not display.  You will need to refresh the page again to view the cookie value.
  • NOTE: You will need to “capture” network traffic by clicking the green triangle in the top left corner.  If “capture”mode is enabled, it will show a red square (stop sign).

This program can be installed on your PC (worked on Windows 8 even though not listed as a supported OS on their site) that will allow you to view cookie values.  It has come in handy. http://www.nirsoft.net/utils/iecookies.html

Javascript Cookies Class

I mentioned at the start of this article that I am using a Javascript class for cookie management – you can find a copy of that class on GitHub. https://github.com/PromInc/js-cookie-class-with-subcookies