Question

我正在开设一个网站（烟草相关），要求所有访问者在他们可以查看该网站之前验证他们已超过18岁。我有一个确认年龄的表格，但我已经死路一条。我如何使用它来存储他们通过测试的cookie并检查所有页面以查看是否已通过此检查？任何建议和帮助将非常感谢！以下是我的验证表格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validate</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script language="javascript">
        function checkAge()
        {
            var min_age = 18;

            var year = parseInt(document.forms["age_form"]["year"].value);
            var month = parseInt(document.forms["age_form"]["month"].value) - 1;
            var day = parseInt(document.forms["age_form"]["day"].value);

            var theirDate = new Date((year + min_age), month, day);
            var today = new Date;

            if ( (today.getTime() - theirDate.getTime()) < 0) {
                alert("You are too young to enter this site!");
                return false;
            }
            else {
                return true;
            }
        }
    </script>

</head>
<body>

<form action="index.html" name="age_form" method="get" id="age_form">
<select name="day" id="day">
  <option value="0" selected>DAY</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>
</select>
<select name="month" id="month">
  <option value="0" selected>MONTH</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<select name="year" id="year">
  <option value="0" selected>YEAR</option>
  <option value="1920">1920</option>
  <option value="1921">1921</option>
  <option value="1922">1922</option>
  <option value="1923">1923</option>
  <option value="1924">1924</option>
  <option value="1925">1925</option>
  <option value="1926">1926</option>
  <option value="1927">1927</option>
  <option value="1928">1928</option>
  <option value="1929">1929</option>
  <option value="1930">1930</option>
  <option value="1931">1931</option>
  <option value="1932">1932</option>
  <option value="1933">1933</option>
  <option value="1934">1934</option>
  <option value="1935">1935</option>
  <option value="1936">1936</option>
  <option value="1937">1937</option>
  <option value="1938">1938</option>
  <option value="1939">1939</option>
  <option value="1940">1940</option>
  <option value="1941">1941</option>
  <option value="1942">1942</option>
  <option value="1943">1943</option>
  <option value="1944">1944</option>
  <option value="1945">1945</option>
  <option value="1946">1946</option>
  <option value="1947">1947</option>
  <option value="1948">1948</option>
  <option value="1949">1949</option>
  <option value="1950">1950</option>
  <option value="1951">1951</option>
  <option value="1952">1952</option>
  <option value="1953">1953</option>
  <option value="1954">1954</option>
  <option value="1955">1955</option>
  <option value="1956">1956</option>
  <option value="1957">1957</option>
  <option value="1958">1958</option>
  <option value="1959">1959</option>
  <option value="1960">1960</option>
  <option value="1961">1961</option>
  <option value="1962">1962</option>
  <option value="1963">1963</option>
  <option value="1964">1964</option>
  <option value="1965">1965</option>
  <option value="1966">1966</option>
  <option value="1967">1967</option>
  <option value="1968">1968</option>
  <option value="1969">1969</option>
  <option value="1970">1970</option>
  <option value="1971">1971</option>
  <option value="1972">1972</option>
  <option value="1973">1973</option>
  <option value="1974">1974</option>
  <option value="1975">1975</option>
  <option value="1976">1976</option>
  <option value="1977">1977</option>
  <option value="1978">1978</option>
  <option value="1979">1979</option>
  <option value="1980">1980</option>
  <option value="1981">1981</option>
  <option value="1982">1982</option>
  <option value="1983">1983</option>
  <option value="1984">1984</option>
  <option value="1985">1985</option>
  <option value="1986">1986</option>
  <option value="1987">1987</option>
  <option value="1988">1988</option>
  <option value="1989">1989</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>
  <option value="1993">1993</option>
  <option value="1994">1994</option>
  <option value="1995">1995</option>
  <option value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999">1999</option>
</select>
</form>
</body>
</html>

Answer 1

如果您想在客户端执行此操作，您当然可以。请记住，这很容易绕过，所以你永远不想在客户端的javascript中实现实际的安全性，但是为了让看门狗小组不受欢迎，这样做会有效。

我假设您将上面粘贴的html文件另存为checkAge.html。将以下内容添加到<form>代码中：

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

这将在提交表单时执行checkAge功能。如果该人说他们年龄超过18岁，那么该函数返回true，表单将被提交，并加载index.html。如果他们说他们不是18，则该函数返回false，显示警告弹出窗口，并且不提交表单。

并修改您的checkAge功能，以便最后一部分如下所示：

        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;
    }

这会添加设置cookie的代码，然后返回true或false。

此外，您需要添加this function才能更轻松地设置Cookie：

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());
}

这只是一个辅助函数，可以让cookie更容易设置。

然后，在您的内容页面上，您可能会执行以下操作：

<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>

这使得页面内容默认不可见。当页面加载时，javascript代码将检查是否有cookie指示该人是18.如果有，则显示页面内容。如果没有cookie，有一个cookie表示该人未满18岁，那么他们将被重定向到年龄检查页面。

检查每个页面以确保用户已经验证为超过18

1 个答案: