Tips voor Javascript

Formulier beschermen tegen spam(bots)

Een formulier kan tegen spam beschermt worden met bijvoorbeeld een captcha. De bezoeker moet dan door het beantwoorden van een vraag, aantonen dat hij/zij een mens is. Mooier zou het zijn dat de pagina is beschermt tegen spambots, maar dat de bezoeker van de “mens zijn” controle niets merkt, en daarvoor niets hoeft te doen.

Bij de oplossing gaan we uit van de stelling “een mens klikt op een formulier en voert dan gegevens in middels toetsaanslagen, en een spambot doet dat anders”.

Door te controleren of er op het formulier is geklikt, c.q. of de bezoeker op toetsen heeft gedrukt om data in te voeren, en deze actie in het formulier vast te leggen, kunnen we bij de verwerking van het formulier hierop controleren, en zo formulieren van spambots blokkeren.

De oplossing:

Aan het formulier is een hidden input veld toegevoegd met de naam bescherm. Nadat het formulier is geladen (window.onload) worden in de functie setInput aan het formulier de events onclick en onkeydown gekoppeld, die de functie ikBenMens aanroepen. Deze functie schrijft een waarde in het verborgen “bescherm” veld. Is er sprake van een toetsaanslag, wordt tevens de onkeydown event van het formulier leeggemaakt, zodat bij verdere input niet steeds de functie afgaat. Bij het versturen van het formulier wordt gecontroleerd of het bescherm veld aangeeft dat de invoer mensenwerk was. Zo niet, dan wordt het formulier niet verzonden.

(De oplossing is gestript van niet relevante informatie, voor betere leesbaarheid).

<html>
<head>
<script language="JavaScript" type="text/javascript">

function setInput()

{ var frm = document.form1;

frm.onclick = ikBenMens;

frm.onkeydown = ikBenMens;

…

}

function checkInput()

{ if (document.form1.elements["bescherm"].value !="Ik ben een mens.")

{ return false; }

return true;

}

function ikBenMens(ev)

{ ev = ev || event;

if (ev.type=='keydown') { document.form1.onkeydown = null; }

document.form1.elements["bescherm"].value = "Ik ben een mens.";

}

</script>
</head>
<body onload="setInput()" …>

<form name="form1" action="xxx" onsubmit="return checkInput();">

…hier overige invoer velden

<input type="hidden" name="bescherm">

<input type="Submit" value="Verstuur">

</form>
…
</body>
</html>

N.B. Meestal wordt een formulier doorgezonden naar een andere pagina die de afhandeling doet. Ook hier zou je ook nog kunnen controleren of het formulier door een mens werd ingevuld.