Предотвращение использования кода, защита Javascript и форм - PullRequest
Новая
       10

Предотвращение использования кода, защита Javascript и форм

1 голос
/ 05 октября 2010

Я создаю страницу, которая позволяет пользователям получать доступ к определенному разделу моего веб-сайта, если они нажимают 8 из 25 флажков в правильной последовательности.

Прежде всего, спасибо Рейгелю за оригинальный код, он взял то, что у меня было, и переписал его, намного лучше, чем то, с чего я изначально начал. Также спасибо 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 ]

5 голосов
/ 05 октября 2010

Прежде всего, спасибо за упоминание и ваше приветствие.

У меня вопрос: как я могу очистить вывод, не давая кому-либо что-либо использовать или добавить что-нибудь, что испортит сервер. Это нужно?

Мое предложение всегда делать проверку на стороне сервера. Да, вы можете выполнять проверку на стороне клиента, но когда он находится на стороне клиента, клиент / пользователь имеет право изменять вещи. Так что, если вы можете (я предлагаю, вы должны), выполните обе проверки - на стороне сервера и на стороне клиента.

1 голос
/ 05 октября 2010

Нет!

Это плохая схема безопасности - если по какой-то другой причине она не готова для грубой силы. Серьезно рассмотрите возможность использования установленного механизма аутентификации - существует множество вариантов на любом языке, который вы предпочитаете.

1 голос
/ 05 октября 2010

Этого нельзя сделать. Javascript всегда может быть скомпрометирован, и никакой пользовательский ввод не может быть доверенным.

Вы можете попытаться запутать код, но он никогда не будет на 100% (даже близко).

0 голосов
/ 05 октября 2010

Вы можете создать хеш на сервере (например, MD5 или лучше SHA-1 или что-то в этом роде) на основе структуры формы, которую вы затем отправляете обратно на сервер при отправке формы, и пересчитываете на сервере, чтобы увидеть если пользователь вмешался в что-либо в форме. Это описано в старом CGI-программировании в Perl Book , который, кстати, является одной из лучших книг по безопасности веб-программирования, которые я когда-либо читал.

Я не рекомендую этого, но для интереса можно быть симпатичным уверенным, что пользователь не вмешивался в вашу форму.

...