Simple JavaScript EU Cookie Compliance Code

JavaScript code to comply with EU law on Cookies and Privacy whilst browsing.

Something I quickly did at work the other day was useful enough to put up on my site for people to download and use. I have just updated it to make it more customisable and even more useful so I thought I would update the blog as well.

If you live in the European Union you might have been aware of a recent rule for websites that was made many years back but totally ignored up until now.

It is going to take a test case in the courts to resolve it one way or the other but just to be safe and to be compliant with new EU law about cookies I have created a generic EU Cookie / Privacy JavaScript function.

This code can be referenced from any site in the footer (a global footer would be advised) and then your site will become compliant with EU diktats on website privacy and cookies straight away.

The code is wrapped in a self calling function so will be called as soon as the script is loaded into the DOM.

You might want to add a call to the main function call on line 409 of the script into your own onDOM or onWindow ready function to make sure it is called after all other scripts that may load cookies into the users browser last.

// call the CheckCookie function
EUCookie.CheckCookie();

The parameters at the top of the EUCookie object that display the message and the wording for the buttons are all customisable (different languages, different HTML etc) and you can modify the code to pass in different variables as you see fit.

On our site which handles multiple languages and parameters we have handled this by removing the self calling function code from the script just leaving the EUCookie namespace and then in our global footer doing something like this:

<script type="text/javascript" src="/jobboard/scripts/JS/EUCookie.js"></script>
<script type="text/javascript">
 
 // set custom values for the EUCookie object
 EUCookie.EUMessage = '<p>Do you want this site to accept cookies and be compliant with EU law?</p>';
 EUCookie.AgreeText = 'Accept';
 EUCookie.DisagreeText = 'Decline';
 EUCookie.RedirectLink = 'http://www.strictly-software.com/';
 EUCookie.MsgWidth = '400px';
 EUCookie.MsgHeight = '200px';

 // check whether the user wants to use the site with cookies
 EUCookie.CheckCookie();

</script>

As you can see the EUCookie object script - with self calling (function(){ })(); removed is loaded in first and then any parameters you want to change are modified on the singleton before the CheckCookie() function is called.

The script also handles browsers where the user has totally disabled cookies either through a toolbar like the Web Developer Toolbar or through the browser itself and if the user has no cookies passed to it then the message won't even appear.

I have just added in "Paranoid Mode" which is a setting you can turn on which will do the following when testing for cookies.

• It will not only just check for document.cookie but actually create a test cookie, read it and then delete it before checking it has gone - some old browsers only clear cookies on a new session.
• It will also set a timer (the length of time in milliseconds is also set by the ParanoidCheckTimer property) that will constantly check the DOM for the re-enabling of cookie use e.g if you use the Web Developer Toolbar you can disable cookies on the fly. If you loaded the page with cookies off and then set them on with the toolbar the ParanoidMode setting will detect the change and show the popup message.

If the user decides they don't want to use cookies and therefore if the site if it relies on them, then they are taken away to another customisable URL the EUCookie.RedirectLink parameter which defaults to my blog at the moment.

Obviously this url could be changed to a cookieless version of your site so that they can continue to use it . Maybe a version designed for mobiles where cookies are not used at all could be a viable option.

If the user clicks on the "I agree" button then a cookie called EUCookie is set for 365 days on their computer and on each subsequent visit it rolls over for another 365 days.

Obviously if the user clears their cookies, or lets an anti-virus scanner or tool like CCleaner remove the EUCookie my script sets, then they will be asked the question again on their next visit. So you might want to change the wording of the message to reflect this.

I have also added another property called AlwaysShowMsg which will always show the warning message whether or not cookies are currently enabled or not. You never know when a 3rd party script or your system might load in a cookie so this might be useful - also check out the ParanoidMode setting.

I have also added in a property called HideScroll which can be set to BODY, HTML or an empty string. This will hide the relevant scrollbars when the lightbox is shown to prevent users scrolling down past the greyed out area. The scrollbars are returned to a setting of "auto" once the DOM is cleared of the cookie messages if agreed to.

I have also added in some code to measure the viewport and the scroll position so that the message box is properly centered in the screen rather than the inline 20% margin style it was using before.

Benefits of this EU Cookie Compliance Script 

1. It is easily installed and makes any website comply with EU law. 
2. The code is wrapped in a namespace and therefore you shouldn't get problems with functions overwriting functions etc. 
3. It uses very simple design inline and backward compatible styles to create a lightbox and "center" the box on the page.
4. All the major parameters can be customised including the name and value of the EU compliance cookie, the text for the buttons, the redirect link and the styling.
5. No framework is used or relied upon and all the code is self contained within the script. 
6. The ParanoidMode option allows you to automatically detect when cookies are switched on or used if the page is loaded without their use. This enables a loaded page to still show the message when it detects cookies being used.
7. The code is a simple drop into any global footer of your site. Just put a reference to the script in your footer and the script should work (as long as you haven't got previous JavaScript errors).

The only downside is that the script relies on JavaScript to be enabled and for a cookie to be set to tell the website that cookies are allowed. A server side version could be made easily enough but for the 90% of internet users who use JavaScript this script should be good enough.

Plus as most 3rd party cookies are set by advertising or other external scripts with JavaScript then this solution is enough to stop them in their tracks especially with paranoid mode which will kick in whilst you have a loaded page open and an external script decides to attempt to set a cookie 1 minute into your viewing. A server side solution wouldn't handle this.

You can see and download the source code from here: EU Cookie Law Compliance Code

Feel free to make use of it as you want but if you don't change it dramatically (e.g just add a missing ; etc) then please leave the credits at the top of the script.

Hopefully this script will help all of us out and prevent those evil virus spreading cookies from infecting all our computers before it's too late :)