Captcha in JavaScript

Vaak zie je bij een formulier een plaatje staan met verwrongen letters en/of cijfers, zoals de voorbeelden hier onder. Zo'n plaatje heet "captcha".

Om het formulier te kunnen versturen moet je die karakters overtypen in een speciaal daarvoor aanwezig tekstveld. Als je het goed hebt gedaan wordt het formulier verstuurd. Als je fouten hebt gemaakt verschijnt er een ander plaatje en moet je het overdoen, net zolang tot het goed is.

Vrijwel altijd wordt een captcha gemaakt aan de server-kant. Je kunt het ook aan de cliënt-kant regelen, dus op de PC van de bezoeker. Je mogelijkheden zijn dan wel veel beperkter.

Informatie over het hoe en het waarom van captcha's vind je in het item Captcha: wat het is en hoe je het kunt gebruiken.

Op deze pagina presenteer ik een captcha die is geschreven in JavaScript. Deze captcha is een variant op de gebruikelijke aanpak. De gebruiker krijgt vijf losse plaatjes te zien, die allemaal een beetje van elkaar verschillen. De gebruiker moet er daarvan één kiezen, aan de hand van een aanwijzing. Zie het onderstaande voorbeeld.
Als de gebruiker het verkeerde figuurtje aanklikt, verschijnt er een nieuwe rij plaatjes met bijbehorende aanwijzing. Als de gebruiker op 'Versturen' klikt zonder eerst het juiste plaatje te hebben aangeklikt, wordt het formulier niet verstuurd. Er verschijnt dan een foutmelding.

Ja, ik wil meer weten over de mogelijkheden die deze techniek mij bieden kan.

Mijn specifieke vraag is:

Mijn gegevens zijn: Naam: E-Mail:

De code van het voorbeeld kun je downloaden om zelf te gebruiken, inclusief de plaatjes.

• Er worden drie items besproken:
  1. De werking van het script
  2. Inbouwen in je eigen website
  3. Het uiterlijk aanpassen aan je eigen wensen
   
• Het script werkt in grote lijnen als volgt:
  
  • Bij het laden van de pagina wordt de captcha direct op het scherm gezet. De vijf plaatjes worden in willekeurige volgorde getoond. Het 'goede' plaatje wordt ook willekeurig gekozen. De bijbehorende aanwijzing verschijnt ook op het scherm.
  • Als de gebruiker een verkeerd plaatje aanklikt, worden de vijf plaatjes in een andere volgorde gezet en wordt ook een ander 'goed' plaatje gekozen. De bijbehorende aanwijzing kan dus anders worden.
  • Dit gaat door tot het juiste plaatje is aangeklikt.
  • Als de gebruiker het goede plaatje heeft aangeklikt kan het formulier worden verzonden. Dat wordt expliciet gemeld. De figuurtjes verdwijnen. Er kan niet meer op worden geklikt.
  • Deze situatie blijft bestaan totdat de pagina wordt herladen. Het formulier kan dus meer dan eens worden verzonden als de gebruiker correct op de captcha heeft gereageerd.
  • Als op "Opnieuw beginnen" wordt geklikt, wordt het formulier leeg gemaakt, zoals het hoort. Tevens wordt de captcha ververst.
  • De captcha kan alleen met de muis worden aangeklikt. Bediening vanaf het toetsen­bord is niet mogelijk.
  • Als de gebruiker probeert het formulier te verzenden zonder het goede figuurtje te hebben aangeklikt, verschijnt er een foutmelding in een popup-venster.
  • Een bericht kan maar één keer worden verstuurd. Zodra een bericht is verstuurd worden de knoppen "Versturen" en "Opnieuw beginnen" inactief.
  • De link 'waar is dit voor nodig?' laat een popup-venster verschijnen met een korte uitleg.

Over de veiligheid
Er wordt gebruik gemaakt van vijf verschillende plaatjes, die in willekeurige volgorde worden getoond. Daarvoor zijn 5! = 1 × 2 × 3 × 4 × 5 = 120 mogelijkheden. Van de vijf plaatjes moet er één woren aangewezen. Daarvoor zijn vijf mogelijkheden. In totaal zijn er dus 120 × 5 = 600 mogelijkheden. Dat zou voor 'gewone' toepassingen voldoende moeten zijn.

Het formulier kan niet worden verzonden als JavaScript is uitgeschakeld.
Om de captcha te laten werken is het nodig dat JavaScript aan staat. Als JavaScript echter is uitgeschakeld, retourneert onSubmit altijd false en zal de browser het formulier niet verzenden.
Elk script kan echter worden misbruikt. Het maakt daarbij niet uit of het script op de server of op de client-PC draait. Ook deze beveiliging is niet waterdicht.
Op internet bestaan servers die automatisch formulieren invullen en verzenden. Handig voor spammers, want er wordt hun veel werk uit handen genomen. Lastig voor de ontvangers, want ze krijgen ongewenste e-mail. Ook dit script is daar gevoelig voor. Er is een soort oplossing voor, maar die wordt hier niet getoond. Op sites die er door waen getroffen is het ingebouwd, daar werkt het goed. Stuur me een mailtje als het jou overkomt, dan vertel ik je hoe je het aanpakt.

Disclaimer
Gebruik van deze techniek is geheel voor eigen risico. De auteur van deze website is niet aansprakelijk voor enige schade die het gevolg is of het gevolg zou kunnen zijn van enige toepassing van deze techniek.
Toepassing van deze techniek op je eigen website betekent automatisch dat je instemt met deze disclaimer en dat je de auteur van deze site vrijwaart van elke schadeclaim.

Inbouwen in je eigen site
• De benodigde bestanden vind je in de download-file. De JavaScript-code staat in de file captcha-120.js. Deze file bevat alle code die nodig is om de captcha te laten werken.
• Bij het script horen nog zes plaatjes:
   

  cpt0.jpg	cpt1.jpg	cpt2.jpg	cpt3.jpg	cpt4.jpg	cpt-.jpg

   
  In het voorbeeld zijn de plaatjes 20 x 20 pixels. Je kunt ze groter maken als je dat wilt, zolang ze maar alle zes even groot zijn. Kleiner maken raad ik niet aan. Het wordt dan al gauw moeilijk leesbaar.
• De bestandsnamen van de plaatjes hebben de volgende vorm:
    PrefixNummer.Suffix.
  De prefix is hier cpt. Het nummer loopt op van nul tot vier. Het zesde plaatje is 'leeg'; het nummer is een min-teken. De suffix is hier jpg.
• Alle plaatjes moeten dezelfde prefix en suffix hebben. Ze moeten alle zes even groot zijn. Verder hoeven ze niet in dezelfde map staan waar captcha-120.js en de HTML-code zich bevinden. Dat kun je instellen, zie verderop in dit verhaal.
   
• De JavaScript code moet wel aan de HTML woren gekoppeld. Dat doe je op twee plaatsen in het formulier dat je wilt beveiligen:
  
  • Op de plaats waar de captcha in het formulier moet verschijnen roep je de function InitCaptchA() aan.
  • In de <FORM>-tag neem je de code op: onSubmit="return GoCaptchA()". Dat zorgt ervoor dat wordt gekeken of op het juiste plaatje van de captcha is geklikt. Als dat zo is wordt het formulier verzonden op de wijze die is aangeheven in action="...." en method="....".
  Let op de spelling van de namen van deze functions. Beide functions hebben geen parameters.
  De uitgewerkte code staat onderaan de bladzijde.
   
• Als je de captcha wilt gebruiken zoals die er op deze pagina uitziet, hoef je in capcha.js waarschijnlijk niets te veranderen. Je moet hoogstens opgeven in welke map de zes plaatjes zich bevinden.
• Het wijzigen van de opmaak wordt hieronder beschreven.
   
Het uiterlijk van de captcha aanpassen aan je eigen wensen
• Je kunt het uiterlijk van de captcha aanpassen zoveel als je wilt. Het is betrekkelijk eenvoudig te programmeren. Kennis van HTML, JavaScript en CSS is hiervoor een vereiste.
• Er zijn twee manieren om het uiterlijk van de captcha aan te passen:
  
  • Direct de file captcha-120.js editen. Beperk je daarbij tot de inhoud van de variabelen boven in de file en de rijen en cellen van de table binnen de DIV-tag CaptchaFormStuff.
    ' Dit is de enige manier als je de plaats van de aanwijzing ten opzichte van de plaatjes wilt veranderen.
  • Als je regelmatig wat wilt wijzigen of als je meerdere formulieren hebt (met verschillende opmaak) kun je voor elk formulier apart een skin gebruiken. Alle opmaak kun je veranderen door vóór de aanroep van InitCaptchA() de bestaande opmaak te overschrijven.
    Je maakt daarvoor een .js-bestand dat de nieuwe waarden van de opmaakvariabelen bevat en je laadt dat NA captcha-120.js. Zie ook de code onderaan deze bladzijde.
    Een voorbeeld van een skin ('Black') vind je in de downloadfile.
  • Bij gebruik van een skin hoef je in captcha-120.js geen aanpassingen in de opmaakvariabelen te doen.
  
  Onderstaande tabel geeft een overzicht van de variabelen die je kunt aanpassen.
   
  

  Naam:	Type:	Betekenis:
  Questions	Array	Aanwijzingen bij de plaatjes 0 t.m.4.
  WhyCaptchA	String	Tekst van de link naar de helptekst.
  CaptchAOK	String	Verschijnt als de captcha de juiste respons heeft gekregen. De plaatjes 0 t.m. 4 worden vervangen door plaatje -.
  CaptchANotOK	String	Verschijnt als geprobeerd wordt het formulier te verzenden zonder dat een juiste respons op de captcha is gegeven.
  CaptchAStyle	Array	Informatie voor de opmaak van de captcha. De array bevat achtereenvolgens: [0]: CSS attributen van de (buitenste) <div>-tag met id="CaptchaFormStuff". [1]: CSS attributen van de <table>-tag waarmee de captcha wordt opgebouwd. [2]: CSS attributen van de <td>-tag waarin de aanwijzing verschijnt. [3]: CSS attributen van de <td>-tag waarin de captcha-plaatjes verschijnen. [4]: CSS attributen van de <img>-tag waarmee de captcha wordt opgebouwd. [5]: CSS attributen van de <td>-tag waarin de link naar de helptekst verschijnt, tekstopmaak. [6]: CSS attributen van de <td>-tag waarin de link naar de helptekst verschijnt, positionering van de link in de tabel-cel.
  CaptchAHelp	Array	Tekst en opmaak van de helptekst. De array bevat achtereenvolgens: [0]: CSS attributen voor de positie en de opmaak van de popup. [1]: De helptekst, in één lange string. Mag geen <p>...</p>-tags bevatten. Witregels maak je met behulp van <br>&nbsp;<br>. [2]: CSS attributen voor de kleur van de helptekst. [3]: CSS attributen voor de opmaak van de link om de popup te sluiten. [4]: Tekst van de link waarmee de popup wordt gesloten.
  ImageData	Array	Informatie over de plaatjes waarmee de captcha wordt opgebouwd. Voor de filenamen geldt:   ImageData[1]xx.ImageData[2],   waarbij xx loopt van 0 t.m. 4. De array bevat achtereenvolgens: [0]: Relatief path naar de map waar de plaatjes staan. Als de plaatjes zich bevinden in dezelfde map waarin de HTML-code van het formulier staat, moet dit een lege string zijn. In het voorbeeld op deze site: "../images/" (Let op de slash ( / ) aan het einde van de string, deze is echt nodig!). In de downloadfile is ImageData[0] leeg gelaten. [1]: Prefix van de namen van de plaatjes. In het voorbeeld: "cpt". [2]: Suffix van de namen van de plaatjes, zonder de punt. Dit moet de suffix zijn van een geldig grafisch formaat, te weten: GIF, JPG, PNG, enz. In het voorbeeld: "jpg".

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>)
Als je geen skin gebruikt is de code:

<script src="captcha-120.js"></script>

Als je wel een skin gebruikt (bijvoorbeeld captcha-skin.js) wordt de code:

<script src="captcha-120.js"></script>
<script src="captcha-skin.js"></script>

(Zet dit in de <BODY>, op de plaats in de <FORM>-tag
waar de captcha moet verschijnen).

<script >InitCaptchA()</script>

Neem het attribuut onSubmit op in de <FORM>-tag:

<form action="......" method="post" name="formulier"
onSubmit="return GoCaptchA()">

Dit is de code voor de knoppen:

<input type="submit" value="      Versturen      " style="color: #000099;
    font-weight: bold;" accesskey="V" id="StuurButton">
<input type="button" value="  Opnieuw beginnen  " accesskey="O"
    onclick="DoReset()" id="ResetButton">

Downloaden:
 
Druk op de knop:  File: voorb290.zip, 12 802 bytes.

Opmerking:
 
Behalve met een captcha vormt ook een sterk wachtwoord een goede bescherming tegen misbruik van je site. Zie het item Over de sterkte van wachtwoorden voor aanwijzingen voor het maken van sterke wachtwoorden.
 
Ik raad aan om de code in de file captcha-120.js te comprimeren versleutelen met de methode die is beschreven in het item Over het comprimeren van JavaScript-code.