1

我正在创建一个页面，如果用户以正确的顺序单击 25 个复选框中的 8 个，则允许用户访问我网站的某个部分。

首先感谢Reigel的原始代码，他拿走了我所拥有的并重写了它，它比我最初开始使用的要好得多。还要感谢Peter Ajtai帮助我优化代码。

我的问题是，我怎样才能清理输出，防止任何人利用任何东西，或者添加任何会弄乱服务器的东西。需要吗？

这是实时版本：单击此处查看实时工作版本

我的代码如下：

<body onLoad="clearForms()" onUnload="clearForms()">

 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>

<form id="form1" name="form1" method="post" action="check_combination.php">
<table width="200" border="1" align="center">

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="14"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="15"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="16"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="17"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="18"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="19"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="20"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="21"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="22"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="23"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="24"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="25"/></td>
</tr>

<tr>
 <td height="23" colspan="5" align="center" valign="middle" class="label"></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="button" value="Test length" id="test" /></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="button" name="button" id="button2" value="Test hidden input value" /></td>
</tr>

</table>

<input name="result" type="hidden" id="result" />

</form>

</body>

和javascript：

function clearForms() {
    var i;
    for (i = 0; (i < document.forms.length); i++) {
       document.forms[i].reset();
 $(':checkbox[name=checkbox]:disabled').attr('disabled', false);

    }
}


//initial checkCount of zero
var checkCount = 0;

//maximum number of allowed checked boxes
var maxChecks = 8;

$(document).ready(function() {

clearForms();

$("#form1").submit(function(e) {
  if($("input:checkbox:checked").length < 8) {
    alert("You must select at least 8 options before submitting!");
    e.preventDefault();
  }
});

var $nameCheckbox = $('input:checkbox[name=checkbox]');

    $nameCheckbox.click(function() {

        //update checkCount
        checkCount = $('input:checked').length;

        if (checkCount >= maxChecks) {
            //alert('you may only choose up to ' + maxChecks + ' options');
            $nameCheckbox.not(':checked').attr('disabled', true);
        } else {
            $nameCheckbox.filter(':disabled').attr('disabled', false);
        }

        if (this.checked) {
            $("td.label").append('<label>' + this.value + ' </label>');
        } else {
            $("td.label").find(':contains(' + this.value + ')').remove();
        }

        $('input[name="result"]').val($("td.label").text());

    });


    $("#test").click(function() {
        alert($('input:checked').length)
    });

    $('#button2').click(function() {
        alert($('input[name="result"]').val());
    });

});
4

4 回答 4

5

首先，感谢您的提及，非常欢迎您。

我的问题是，我怎样才能清理输出，防止任何人利用任何东西，或者添加任何会弄乱服务器的东西。需要吗？

我的建议是始终检查服务器端。是的，您可以在客户端进行检查，但是当它在客户端时，客户端/用户有权进行更改。因此，如果可以（我建议您必须），请同时检查服务器端和客户端。

于 2010-10-05T03:52:41.357 回答
1

这是做不到的。Javascript 总是会被攻破，任何用户输入都不可信。

您可以尝试混淆代码，但它永远不会是 100%（甚至不会接近）。

于 2010-10-05T03:52:48.440 回答
1

不！

这是一个糟糕的安全方案——如果没有其他原因，它已经成熟了，可以使用蛮力。 认真考虑使用已建立的身份验证机制——您喜欢的任何语言都有大量选项。

于 2010-10-05T03:53:01.693 回答
0

您可以根据表单结构在服务器上生成哈希（例如 MD5 或更好的 SHA-1 或其他东西），然后在表单提交时将其发送回服务器，并在服务器上重新计算以查看用户是否篡改表格中的任何内容。这在旧的CGI Programming in Perl Book中有概述，顺便说一句，这是我读过的关于 Web 编程安全的最好的书之一。

我不推荐它，但出于兴趣，可以非常确定用户没有篡改您的表单。

于 2010-10-05T04:00:56.667 回答