Aan het begin van elke dag liep ik met een plastic zakje om mijn hand door mijn mailbox om alle poep van de spambots op te ruimen. Dat was ik allang zat, maar een hek om mijn mailveldje plaatsen, daar kwam het niet van. Tot ik toevallig iets las over verborgen invoervelden, honingpotten en invultijden. Dat werkt. Ik kan weer met blote handen in mijn inbox graaien. Stop misbruik van je contactformulier! (Foto hierboven: Mathyas op Unsplash.)

Spambots: dol op contactformulieren

Als je na het invullen van mijn contactformulier op verzenden klikt, wordt het verwerkt door een eenvoudig PHP-script. Dat haalt alle velden op, filtert de kwaadaardige code eruit en stuurt vervolgens jouw bericht naar mijn e-mailadres. Helaas zijn spambots dol op contactformulieren. In razend tempo vullen ze elk veld in dat ze tegenkomen en sturen het de wijde wereld in.

In de vorige zin staan de twee eigenschappen waarmee je de spambot ontmaskert: razend tempo en elk veld.

Aan het formulier heb ik twee extra invoervelden toegevoegd. Het eerste veld is verborgen met type="hidden" en kan niet worden ingevuld dankzij het attribuut readonly. Dat veld krijgt met JavaScript een tijdstempel van het moment waarop de formulierpagina wordt geopend. Daarvoor voeg je onderaan de pagina (voor de sluittag </body>) in in een <script>-tag een stukje JavaScript toe:

document.querySelector('[readonly]').value = Math.floor(Date.now() / 1000);

De code selecteert het (enige) element op de pagina met het attribuut readonly en geeft dat de waarde van de huidige tijd. De berekening is nodig om de JavaScript-tijd (milliseconden sinds 1 januari 1970) ) aan te passen aan de PHP-tijd (seconden sinds 1 januari 1970).

Het tweede veld is ook verborgen voor menselijke ogen, maar de spambot kan het wel invullen; en doet dat ook.

Verbeterd PHP-script

Ik heb het PHP-mailscript uitgebreid met drie tests:

• Hoe laat is het nu? Is dat minder dan 5 seconden later dan het moment waarop het formulier werd geopend?
• Is het verborgen veld ingevuld?
• Is het tijdstempel niet leeg? Blijkbaar vullen (sommige) bots het formulier in zonder dat het wordt geopend.

Voor de tests zijn een paar variabelen nodig:

define("MIN_TIJD_VOOR_INVULLEN", 5); // 5 seconden
$honeymail = $_POST['mail']; //het verborgen invulveld
$invultijdstip =  $_POST['tijdstip']; //de omgerekende JavaScript-tijdcode
$tijdnu = time(); //de PHP-tijdcode
$verschil = $tijdnu - $invultijdstip; //moet 5 of groter zijn

De tests zelf zien er zo uit:

if (!empty($honeymail) || empty($invultijdstip)) {
  die(header('location: /404.html'));
}
if ($verschil < MIN_TIJD_VOOR_INVULLEN) {
  die(header('location: /404.html'));
}

De eerste if test of het verborgen invulveld niet leeg is OF dat het invultijdstip wel leeg is.

De tweede if test of de invultijd korter is dan 5 seconden.

Is het antwoord op een van de vragen ja, dan wordt het formulier niet verzonden en wordt de pagina omgeleid naar een 404 Niet gevonden. Geen mens kan binnen 5 seconden het formulier invullen. Kun jij dat wel, dan hierbij excuus dat je nooit iets van me hoort, maar ik zou je toch niet kunnen bijhouden.

Let op, dit is geen compleet spamfilter. Je houdt hiermee alleen de spam tegen die via je contactformulier wordt verstuurd.

Deze antispamtechniek is niet nieuw. Ik had er gewoon nog nooit iets over gelezen.  Misschien heb jij er ook iets aan.

Van alle technieken voor het maken van webpagina’s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML geen webpagina’s en zonder CSS blijft het een kale boel. In deze vijfde, bijgewerkte editie van het Handboek HTML5 en CSS3 leer je omgaan met beide webtalen. Je leert eerst hoe je de content markeert met HTML zodat de paginastructuur klopt. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.