1
Je crée une page qui permet aux utilisateurs d'accéder à une certaine section de mon site Web s'ils cliquent sur 8 cases sur 25 dans le bon ordre. Tout d'abord grâce à Reigel pour le code orignal, il a pris ce que j'avais et l'a réécrit, ce qui est bien mieux que ce que j'ai d'abord commencé. Merci également à Peter Ajtai pour m'avoir aidé à optimiser le code.Empêcher l'exploitation du code, sécuriser Javascript et les formulaires
Ma question est, comment puis-je nettoyer la sortie, empêcher quiconque d'exploiter quoi que ce soit, ou d'ajouter quelque chose qui va gâcher le serveur. Est-ce nécessaire?
Voici une version live: Click Here to see a live working version
Mon code est le suivant:
<body onLoad="clearForms()" onUnload="clearForms()">
<p> </p>
<p> </p>
<p> </p>
<p> </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>
Et le 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());
});
});
chaque fois que je vois votre code, je * veux * vraiment jouer à un jeu de cuirassés ... peut-être que si la sécurité ne marche pas, vous pourriez aller pour le marché des jeux occasionnels =) –
lol, ce serait cool . Quand j'ai d'abord pensé à cette idée, j'ai réalisé qu'une chose aussi simple pouvait avoir un potentiel décent en tant que simple jeu. Si je peux passer la courbe d'apprentissage du codage, je pourrais utiliser cela pour quelques idées différentes que j'ai. Évidemment, n'importe qui est libre d'utiliser ce code, après tout, beaucoup ont aidé. La plus grande partie de ma participation vient d'être assis ici en pensant aux bonnes questions à poser, et en jouant du mieux que je peux. – James