Databases
StackOverflow2013
Postsdbo
POKeeping code from being exploited, Securing Javascript and Forms
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKeeping code from being exploited, Securing Javascript and Forms
    text
    copied!<p>I am creating a page that allows users access to a certain section of my website if they click 8 out of 25 checkboxes in the right sequence.</p> <p>First of all thanks to <a href="https://stackoverflow.com/users/251986/reigel">Reigel</a> for the orignal code, he took what I had and rewrote it, its way better than what I initialy started with. Also thanks to <a href="https://stackoverflow.com/users/186636/peter-ajtai">Peter Ajtai</a> for helping me optimize the code.</p> <p>My question is, how can I clean the output, keeping anyone from exploiting anything, or adding anything that will mess up the server. Is it needed?</p> <p>Here is a live Version: <a href="http://jsfiddle.net/xSsrC/3/" rel="nofollow noreferrer">Click Here to see a live working version</a></p> <p>My code is as follows:</p> <pre><code>&lt;body onLoad="clearForms()" onUnload="clearForms()"&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;form id="form1" name="form1" method="post" action="check_combination.php"&gt; &lt;table width="200" border="1" align="center"&gt; &lt;tr&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="1" /&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="2"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="3"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="4"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="5"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="6"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="7"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="8"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="9"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="10"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="11"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="12"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="13"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="14"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="15"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="16"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="17"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="18"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="19"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="20"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="21"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="22"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="23"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="24"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="25"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="23" colspan="5" align="center" valign="middle" class="label"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="button" value="Test length" id="test" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="submit" name="button" id="button" value="Submit" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="button" name="button" id="button2" value="Test hidden input value" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input name="result" type="hidden" id="result" /&gt; &lt;/form&gt; &lt;/body&gt; </code></pre> <p>And the javascript:</p> <pre><code>function clearForms() { var i; for (i = 0; (i &lt; 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 &lt; 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 &gt;= 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('&lt;label&gt;' + this.value + ' &lt;/label&gt;'); } 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()); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload