Effectively Requiring Cookies With All Browsers

If you have any web pages that must not be viewed unless a certain cookie is set, this article contains the means to make it so.

The article sidesteps the argument that restricted content can be viewed simply by turning off JavaScript. I'll show you how to redirect browsers to a different page if they don't have JavaScript turned on.

When your site visitor's browser loads a web page with today's code properly in place, this is what happens:

If the browser has JavaScript turned off, it is redirected to another URL.

Otherwise, JavaScript tries to set a cookie. If the cookie is not accepted, the browser is redirected to another URL.

Therefore, when the browser displays the web page, the browser is JavaScript-enabled and a cookie has been set.

This method of requiring a cookie has a number of uses.

One use is, of course, to simply verify the browser is accepting cookies before viewing pages on your web site. Maybe your shopping cart requires cookies and the web page at the redirect URL can explain how to turn cookies on.

Another use is to deliver certain web pages only to those who, as examples, previously signed into your membership area or accepted your terms of service. To implement this, see the "When Cookie Is Set Somewhere Else" section later in this article.

Still another use is to set a cookie that will be read somewhere else. Maybe you have a registration form and only those who submit it and have seen the resulting "thank you" page are allowed to download your premium.

To implement that last example, the "thank you" page and the premium download page both need the JavaScript, each with the same cookie name specified. On the premium download page, the JavaScript needs one line disabled. See the "When Cookie Is Set Somewhere Else" section later in this article for how to disable that line.

To work with software that invalidates cookies by setting a null or "0" value, when the JavaScript finds such a value in the cookie, it behaves just as if the cookie had not been accepted by the browser in the first place.

To implement this with Master Members Only, have the JavaScript check for the existence of a cookie named "MMOtrack" (requires Master Members Only version 3.5 or later).

Here is the source code for a complete, working test web page that checks whether or not the browser accepts cookies.

<html>
<head>
<title>Requiring Cookies Test Page</title>


<!-- Step 1, use this META tag between NOSCRIPT 
     tags to require JavaScript or get redirected. 
     Specify the redirect URL in the META tag.
     (Example has redirect URL http://example.com/)
     This must be in the HEAD area. -->
     
<noscript>
<meta http-equiv="refresh" content="0; url=http://example.com/">
</noscript>


</head>
<body>

<!-- Step 2, use this JavaScript to set the cookie or 
     redirect if cookie was not accepted. Specify the 
     values of the variables marked in the JavaScript.
     This must be in the BODY area. -->

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2007 Bontrager Connection, LLC

// Specify the redirect URL for use if cookie is not accepted.

var RedirectURL = "http://example.com/";

// Specify the cookie name, the cookie value, and 
//    the number of days the cookie is to live.

var CookieName  = "mycookie";
var CookieValue = "something";
var DaysToLive  = 365;

// Domain will be self-determined and directory set for 
//    document root, unless specified otherwise here.

var CookieDomain    = "";
var CookieDirectory = "";

//////////////////////////////////////////////////////

if( (CookieValue.length < 1) || (CookieValue == "0") ) { CookieValue = "token"; }
CookieValue = escape(CookieValue);
DaysToLive = parseInt(DaysToLive);
if(DaysToLive < 1) { DaysToLive = 0; }
if(CookieDomain.length < 1) { 
   CookieDomain = document.URL.replace(/^https?:\/\//i,"");
   CookieDomain = CookieDomain.replace(/^www\./i,"");
   CookieDomain = CookieDomain.replace(/\/.*$/,"");
   CookieDomain = CookieDomain.toLowerCase();
   if( (CookieDomain.indexOf('.') > 0) && (CookieDomain.indexOf('.') == CookieDomain.lastIndexOf('.')) ) { CookieDomain = "." + CookieDomain; }   
   }
if(CookieDirectory.length < 1) { CookieDirectory = "/"; }

function GetCookie(name) {
var cookiecontent = '';
if(document.cookie.length > 0) {
   var cookiename = name + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   var cookieend = 0;
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      cookiecontent = document.cookie.substring(cookiebegin,cookieend);
      }
   }
if(cookiecontent == "0") { cookiecontent = ""; }
return cookiecontent;
}

function SetCookie(name,value) {
var exp = '';
if(DaysToLive > 0) {
   var now = new Date();
   then = now.getTime() + (DaysToLive * 24 * 60 * 60 * 1000);
   now.setTime(then);
   exp = '; expires=' + now.toGMTString();
   }
document.cookie = name + "=" + value + '; path=' + CookieDirectory + '; domain=' + CookieDomain + exp;
}

if(CookieName.length > 0) {
   // Disable next line if cookie was set somewhere else.
   SetCookie(CookieName,CookieValue);
   var tempCookieValue = GetCookie(CookieName);
   if(tempCookieValue.length < 1) { window.location = RedirectURL; }
   }
// -->
</script>
<!-- End of step 2 JavaScript. -->


<h1>Requiring Cookies Test Page</h1>
</body>
</html>

Copy the source code for the test page, save it to a file, and upload it to your server. If you like what it does, then do edits necessary to customize it for your implementation.

There are two sections to implement:

A META tag between NOSCRIPT tags that goes into the HEAD area of your web page source code.
JavaScript that goes into the BODY area of your web page source code.

The META Tag —

The META tag redirects browsers to a different URL.

Because this META tag is between NOSCRIPT tags, it will only be effective for JavaScript-disabled browsers. Browsers with JavaScript turned on won't be effected by the META tag.

Change the http://example.com/ redirect URL in the example to the URL of the web page you want non-JavaScript browsers to be redirected to.

Put the META tag between NOSCRIPT tags into the HEAD area of your web page source code.

The JavaScript —

Six values in the JavaScript can be customized.

The redirect URL. This is where the browser will be redirected to when the offered cookie is not accepted.

This must have a value.

If left blank and the browser did not accept the cookie, either a JavaScript error will be spawned or the web page will go into an infinite redirect loop.
The cookie name. Must start with a letter and contain only letters, numbers, and underscore characters.

If you're just requiring that a cookie can be set and don't need to read the cookie later on, any name will do. Otherwise, the name should be what is expected by the software that has previously set the cookie or that will later read the cookie.

If left blank, no cookie will be set, no cookie will be checked, and no redirection will take place from the JavaScript.
The cookie value. This can be any sequence of characters.

If you're just requiring that a cookie can be set and don't need to read the cookie later on, any name will do. Otherwise, the name should be what is expected by the software that will read the cookie.

If left blank, the JavaScript will assume the value "token".
How long the cookie is to last. This value specifies the number of days the cookie shall remain with the browser. A zero value causes a session cookie to be set (a cookie that automatically deletes when the browser is closed). If left blank or a negative number is provided, zero is assumed.
Cookie domain. This is where the cookie domain name is specified. Unless you have reason to do otherwise, leave this blank. If left blank, the domain name will be determined from the URL in the browser's address bar.
Cookie directory. This specifies the directory where the cookie can be read from.

If left blank, the "/" directory will be assumed, which allows the cookie to be read from any URL of the cookie domain.

Put the JavaScript into the BODY area of the web page source code above any restricted content.

The JavaScript is placed in the BODY area so it runs even if the browser's "back" button is used to return to the page.

The JavaScript is placed above restricted content so the JavaScript runs before any restricted content is displayed.

When Cookie Is Set Somewhere Else

If you're testing for the presence of a cookie set somewhere else:

The cookie name in the JavaScript needs to be the name of the cookie that was set
The JavaScript needs to be prevented from overwriting the cookie.

To prevent the cookie from being overwritten, scan the JavaScript to about line 63. There, you'll find a notation about which line to disable to prevent the JavaScript from setting a cookie. (Setting a cookie overwrites any previously set with the same name for the same directory.)

You can disable the line that sets the cookie by typing two slash characters in front of it. When disabled, the line is:

//   SetCookie(CookieName,CookieValue);

When the web page loads with the above line disabled, the JavaScript will not set the cookie, but it will still check whether or not the cookie is with the browser. If yes, the content is displayed. If no, the browser is redirected.

Testing the Implementation

When this has been implemented, test your web page.

Test it with and without JavaScript turned on. Test it by refusing the cookie and by accepting the cookie.

Thorough testing can reveal incorrect implementation before you go live with it.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Effectively Requiring Cookies With All Browsers

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Effectively Requiring Cookies With All Browsers

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions