检查每个页面以确保用户已经验证为超过18 [英] Check on every page to ensure user has validated as being over 18
问题描述
我正在开设一个网站（烟草相关），要求所有访问者在他们可以查看该网站之前验证他们已超过18岁。我有一个确认年龄的表格，但我已经死路一条。我如何使用它来存储他们通过测试的cookie并检查所有页面以查看是否已通过此检查？任何建议和帮助将非常感谢！以下是我的验证表格：
I'm working on a website (tobacco related) that requires all visitors to validate they are over 18 before they can view the site. I have a form in place that validates the age but I'm at a dead end. How can I use this to store a cookie that they've passed the test and do a check on all pages to see if this check has already been passed or not? Any suggestions and help would be hugely appreciated! Below is my validation form:
<!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>
推荐答案
如果您想在客户端执行此操作你当然可以。请记住，这很容易绕过，所以你永远不想在客户端的javascript中实现实际的安全性，但是为了保持看门狗组不受欢迎，这样做会有效。
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.
我假设您将上面粘贴的html文件另存为checkAge.html。将以下内容添加到< form> 标记中：
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()">
这将执行 checkAge 函数表格已提交。如果该人说他们年龄超过18岁，则该函数返回true，表单将被提交，并加载 index.html 。如果他们说他们不是18，则函数返回false，显示警告弹出窗口，表单未提交。
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.
并修改 checkAge 函数，所以最后一部分如下所示：
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;
}
这会添加设置cookie的代码，然后返回true或false。
This adds the code to set the cookie, and then return true or false.
此外，您还需要添加此功能可以更轻松地设置Cookie：
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());
}
这只是一个辅助函数，可以让cookie更容易设置。
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>
这使得页面内容默认不可见。当页面加载时，javascript代码将检查是否有cookie指示该人是18.如果有，则显示页面内容。如果没有cookie，有一个cookie表示该人未满18岁，那么他们将被重定向到年龄检查页面。
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.
这篇关于检查每个页面以确保用户已经验证为超过18的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
