maandag 23 maart 2015

Weg met de captcha's!

Formulier-spam is al jaren een enorm probleem. Talloze 'robots' speuren het web af naar html-formulieren om die, al of niet voorzien van de nodige links en spamteksen, automatisch te versturen. Webmasters en website-eigenaars hebben er een hekel aan.

Doe je bezoekers geen captcha's aan

Dus gaan webbouwers en programmeurs op zoek naar oplossingen. Heel vaak kiest men dan voor een oplossing zoals een captcha, een methode waarbij de bezoeker op één of andere manier moet aantonen dat hij een echt mens is en geen stukje software. Vaak moet de bezoeker bijvoorbeeld een paar cijfers of letters intoetsen, of een eenvoudig rekensommetje oplossen.

Op zich werkt een captcha prima natuurlijk, maar eigenlijk wil je dat je bezoekers toch niet aandoen? Immers, elke strohalm die je jouw bezoeker in de weg legt om een actie te nemen (in dit geval om een formulier te versturen) is er eentje die de kans vergroot dat de bezoeker afhaakt. En dat is het laatste wat je wil bereiken natuurlijk.

Alternatieve anti-formulierspam zónder de bezoeker lastig te vallen

Ik vond een eenvoudig alternatief voor de captcha. Een anti-spam oplossing waar geen enkele websitebezoeker iets van zal merken. Met een heel klein stukje jQuery zorg je ervoor dat er een automatische 'robot' controle plaats vindt. Het werkt als volgt:

stap 1:
Zorg dat je html-formulier een uniek id krijgt  ( <form id="mijnFormulier" .. )

stap 2:
Voeg dit hele kleine scriptje toe aan je pagina, bijvoorbeeld vlak boven je formulier of in de head van je html-document:

<script>
function pqAntiSpam(){
    jQuery("#formulier").append('<input type="hidden" name="isHuman" value="1"/>');
    return true;
}
</script>

stap 3:
Voeg de volgende onsubmit-opdracht toe aan je form-tag: onsubmit="return pqAntiSpam();"
De html-code van je formulier zou dus kunnen beginnen met:
<form id="mijnFormulier" onsubmit="return pqAntiSpam()" method="post" action="">

stap 4:
De werking van het scriptje is heel simpel: Op het moment dat een menselijke bezoeker het formulier verstuurt wordt er door de jQuery-opdracht een extra (hidden) veld toegevoegd aan het formulier, vlak voordat het formulier wordt verzonden.

stap 5:
Het serverside script (meestal je PHP-script) hoeft nu alleen maar te controleren of de variabele 'isHuman' is ge-POST. Indien de variabele is ge-POST is het formulier dus middels jQuery (javascript) 'behandeld' en dus verstuurd door een mens, en niet door een spam-robot. En vervolgens kan je in je PHP-script dus voorkomen dat het ingevulde formulier wordt verwerkt wanneer het niet door een menselijke actie is verzonden.

--
Ik gebruikte in mijn voorbeeld jQuery code. Uiteraard kan dit ook zonder jQuery worden gerealiseerd, dus puur met javascript. Omdat de jQuery code het kortst is, en vrijwel iedere website tegenwoordig met jQuery 'draait' heb ik voor dit voorbeeld gekozen.


Niet waterdicht, wél een bruikbaar en gebruikersvriendelijk alternatief

Waterdicht? Nee, vast niet. Maar de meeste spammers werken toch écht met robots die geen javascript of jQuery kunnen uitvoeren. Dus ik ga er vanuit dat je hiermee efficiënt veel fornulierspam kunt voorkomen. En je valt je bezoekers er dus helemaal niet mee lastig.

En nog een potentieel nadeel: er zijn gebruikers die javascript op hun computer volledig hebben uitgeschakeld. Ook daar zal het niet zomaar werken. Maar dat zijn er zo weinig dat dat geen probleem zal zijn. En bovendien werken dan de bekende captcha's natuurlijk ook niet..

Nog een laatste opmerking, speciaal voor webmasters en programmeurs: bij veel CMS-systemen (Joomla, WordPress enzovoorts) is het niet heel eenvoudig om in de formulierafhandeling te controleren op de aanwezigheid van de dynamisch toegevoegde POST-variabele. Maar het kán natuurlijk wel, en ik geloof dat je met deze methode een prima oplossing hebt voor de formulierspam, en een in veel gevallen bruikbaar alternatief voor die klant-onvriendelijke captcha's.

 

woensdag 11 februari 2015

case study: warmteklacht.nl

Als PHP-programmeur ben ik breed inzetbaar. Hieronder vindt u een beknopte beschrijving van één van de door mij uitgevoerde opdrachten.

Project: warmteklacht.nl
Opdrachtgever: Lamain Technical Support

Opdracht:
Opdrachtgever wilde een website die als doel heeft te helpen bij het oplossen van storingen aan verwarmingsketels. Moderne verwarmingsketels tonen, wanneer ze in storing zijn gevallen, meestal een specifieke storingscode in het display van de ketel.
Opdrachtgever heeft de meeste van deze storingscodes in kaart gebracht en tevens oplossingen voor de storingen beschreven.
De te bouwen website moest de volgende mogelijkheden bieden:
  • invoeren van een storingscode door de gebruiker, waarna de website direct de oorzaak & oplossing van de storing dient te tonen;
  • Opzoeken van storingscodes door middel van het zoeken door ketelmerken en -types;


Uitvoering:
Ik heb een beheersysteem gebouwd waarin opdrachtgever op een eenvoudige manier merken, keteltypes en storingscodes/oorzaken/oplossingen kan invoeren. Alle gegevens worden in een database opgeslagen.
De front-end van de website biedt op een eenvoudige manier aan de bezoeker de mogelijkheid een storingscode op te zoeken. Wanneer de storing gevonden is ziet de bezoeker de oorzaak en mogelijke oplossing van de storing.
Belangrijk onderdeel van het verdienmodel is het tonen van advertenties op de website. Functionaliteit voor het toevoegen of wijzigen van advertentiecode is daarom ook in het beheersysteem ingebouwd.

Sinds het 'live' gaan in 2013 is onder andere de volgende extra functionaliteit toegevoegd:
  • Er werd een complete webshop gekoppeld aan de website. Deze webshopsoftware is volledig door mij ontwikkeld en aangepast voor deze specifieke opdrachtgever. In die webshop verkoopt opdrachtgever allerlei onderdelen en accessoires op het gebied van (verwarmings-) installatie techniek.
    Indien een gevonden oplossing voor een storing het nodig maakt een onderdeel te vervangen, dan wordt de bezoeker middels een link direct verwezen naar het webshop-artikel om daarmee de storing op te lossen.
  • Wanneer een oplossing van een storing in beeld is, wordt de bezoeker aangeboden om online offerte aan te vragen bij meerdere installateurs in zijn/haar omgeving. Door in een eenvoudig formuliertje enkele gegevens in te vullen ontvangen een geselecteerd aantal installateurs een uitnodiging tot het doen van offerte. Daarbij wordt de installateur al direct op de hoogte gesteld van de aard van de storing zodat hij gericht een aanbieding kan doen.

In een later stadium is een mobiele versie van de website gebouwd die specifiek gericht is op gebruikers van tablets en smartphones.
Bovendien zijn inmiddels een versie voor de Engelse markt en voor de Duitse markt gerealiseerd.

En begin 2015 is een 'overkoepelende' en meertalige website gerealiseer die realtime middels een API gegevens uit de diverse databases opvraagt en presenteert.