ansaurus

Question

Check on every page to ensure user has validated as being over 18

Answer 1

+5 A:

If you want to do this all on the client side, you certainly can. Keep in mind that this will be easily circumventable, so you never want to implement actual security in javascript on the client, but for something silly to keep watchdog groups off your back, this will work.

I'm assuming you have the html file you pasted above saved as checkAge.html. Add the following to the <form> tag:

<form action="index.html" name="age_form" method="get" id="age_form" onSubmit="checkAge()">

This will execute the checkAge function when the form is submitted. If the person says they are over age 18, then the function returns true, and the form gets submitted, and index.html is loaded. If they say they are not 18, the function returns false, the alert popup is displayed, and the form is not submitted.

And modify your checkAge function so the last part looks like this:

        var ret;
        if ( (today.getTime() - theirDate.getTime()) < 0) {
            alert("You are too young to enter this site!");
            ret = false;
        }
        else {
            ret = true;
        }
        setCookie('ageCheck', ret, 1); // save the cookie for one day
        return ret;
    }

This adds the code to set the cookie, and then return true or false.

Also, you will need to add this function to make setting cookies easier:

function setCookie(c_name,value,expiredays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

This is just a helper function to make setting the cookie a little easier.

Then, on your content pages, you might do something like this:

<html>
<head>
  <title>My age-restricted content</title>
  <script>
    window.onload = function () {
      var ageCheck = getCookie('ageCheck');
      if ('true' == ageCheck) {
        document.getElementById('content').style.display = '';
      } else {
        window.location = '/checkAge.html';
      }
    }
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        }
      }
    return "";
    }

  </script>
  </head>
<body>
  <div id="content" style="display: none;">
    You can't see this unless you are old enough
  </div>
</body>
</html>

This makes the content of the page invisible by default. When the page loads, the javascript code will check to see if there is a cookie indicating the person is 18. If there is, then the page content is displayed. If there is no cookie, of there is a cookie saying the person is under 18, then they are redirected to the age check page.

pkaeding 2010-05-28 17:40:29

This doesn't seem to be working. I copy/pasted the example page above checking the cookie (the restricted content page). Deleted and verified I have no agecheck cookie. When I visit the page with the HTML you posted nothing happens. Content remains hidden and there is no redirection to ageCheck.html. Any suggestions?Thanks for your help thus far!

liquilife 2010-05-28 18:11:55

Ahh, that will teach me to not test the code before posting it! There were errors in the HTML page I posted (the content one, not the age checking one). I fixed them in the answer, but take a look at where I refer to 'window'.

pkaeding 2010-05-28 20:34:34

I feel like this is so close. The redirect works but unfortunately it redirects regardless if the cookie exists or not. I've ran it through Firebug and the cookie is setting from the age check page. Just the javascript to detect the cookie perpetually redirects me to the agecheck page.

liquilife 2010-06-01 18:51:15

Update. Everything is working great! You are a gentleman and your help is much appreciated!

liquilife 2010-06-01 19:42:21

ansaurus

tags:

views:

answers:

Check on every page to ensure user has validated as being over 18

related questions