Alternativa al Captcha per evitare lo spam dei moduli

Abbiamo notato movimenti sospetti attorno al nostro sito?Sembra che la nostra contact form sia entrata nel mirinodegli spammers? Vediamo come difenderci.

Il metodo più classico è l' utilizzo deiCAPTCHA's (Completely Automated Public Turing Test toTell Computers and Humans Apart), ovvero quel box contenentelettere casuali che vanno lette e riscritte nel relativocampo di testo dall' utente, prima che possa inviare ilsuo messaggio. Spesso efficace, rappresenta però pureuna "scomodità" per gli utenti, che mai comenel XXI secolo sono alla ricerca di velocità epraticità.

Come evitare, dunque, i fastidiosi spammer, senza recarscomodità ai nostri utenti? Lo vedremo in questotutorial, nel quale andremo ad utilizzare jQuery per aggiungere alcune taginformative alla nostra form di contatto. Non appena i datinella form vengono inviati dall' utente useremo delsemplice codice PHP per effettuare alcune verifiche:

  • che ci sia una tag nascosta
  • che il valore della tag corrisponda ad un valore presente in una cookie creata appositamente
  • che la timestamp della tag con sia scaduta

In altre parole, il visitatore avrà a disposizione unlimitato arco di tempo (da definire) per completare la formed inviarla. In questo modo, uno spammer che tenti di inviarein automatico i dati in una form si troverà la stradasbarrata.

Come struttureremo il codice sorgente?

  1. Quando viene caricata la form, effettueremo una chiamata in AJAX ad un file PHP
  2. Il file PHP ricaverà il tempo di ingresso del visitatore nella form (calcolato in base alle info ricevute dal server, non dal browser del visitatore)
  3. Il file PHP combinerà la timestamp ed una parola segreta, generando un hash di 32 caratteri ed immagazzinandolo in una cookie da scrivere sul PC del visitatore
  4. jQuery riceverà le informazioni sulla timestamp grazie alla chiamata AJAX ed immagazzinerà l' hash in una tag nascosta della form
  5. Quando la form viene completata ed inoltrata, il valore della timestamp verrà comparata con l' hash di 32 caratteri salvato nella cookie
  6. Se i due valori non coincidono, o la timestamp è scaduta, l' operazione non verrà portata a termine

Innanzitutto, ci servirà una contact form:

Inseriamo ora il richiamo a jQuery:

Diamo l' avvio alla form con$('document').ready()

Ora rimuoviamo l' avviso "JavaScript required"

Se un utente non ha attivo il JavaScript

Un metodo semplice potrebbe essere l' inserire un avvisoin alto nella form:

Usiamo jQuery per rimuovere l' elemento P contenente ilmessaggio "JavaScript required":

Così facendo, solo i visitatori aventi il JavaScriptdisabilitato riceveranno il messaggio di avviso

Il File PHP

Chiameremo il file "token.php" , e dovràsvolgere queste operazioni:

  1. Ricavare l' orario dal server grazie a mktime()
  2. Combinare l' orario con la parola segreta e creare del tutto un hash in md5 grazie alla funzione md5()
  3. Inserire l' hash in una cookie
  4. Inviare l' orario a jQuery così che possa essere inserito nella form

Chiamata Ajax:

Abbiamo bisogno del JavaScript per effettuare la chiamataalla funzione jQuery's $.get(file, callbackFunction):

jQuery aggiunge l' orario del Server

Dobbiamo ora usare append() per dire a jQuery di aggiungerenella form un input nascosto



Controllare la form

Ci serve ora un file PHP, "test.php" , checontrolli alcuni punti importanti:

  • c'è la cookie?
  • le due stringhe create in precedenza coincidono?
  • quanto tempo è trascorso?

Adattiamoil caching

Vogliamo che il file token.php esegua ciò che deveeseguire in ogni condizione, tanto sotto Internet Explorerquanto sotto Firefox. Per quest' ultimo, problemi non cene sono, mentre invece Internet Explorer richiede l'inserimento di alcuni headers speciali, che andremo dunque adaggiungere:

I vantaggi di questa soluzione

  • grazie all' utilizzo di jQuery è possibile usare questa tecnica in ciascuna form di contatti
  • non c'è bisogno di cambiare l' estensione .htm in .php
  • può essere usata anche in un blog