Alternative ai Captcha tradizionali con css e html

Con il termine Captcha si indica la principale metodologia utilizzata nei form dei siti per proteggersi con input massivi da parte di bot programmati per rintracciare ed inserire spam attraverso form lasciati privi di controllo.

Questa soluzione propone all’utente un’immagine con caratteri distorti e chiede di inserire il testo all’interno di un campo input per verificare che sia effettivamente un essere umano a digitare l’input.

Negli ultimi anni si è discusso molto sull’utilizzo dei Captcha nei form e della loro scarsa accessibilità per gli utenti. Questi infatti non sono del tutto infallibi in quanto alcuni bot sono in grado di leggere i caratteri presenti nell’immagine (per questo vengono distorti) e soprattutto sono di difficile se non impossibile lettura per l’utente.Bisogna anche aggiungere che esistono Captcha che offrono il testo in formato audio e propongono un altro testo di controllo nel caso quello proposto non sia leggibile.

Oltre alle classiche soluzioni esistono altri metodi per contenere lo spam massivo, un sistema molto semplice è quello di chiedere all’utente il risultato di una semplice operazione matematica.

<label for="controllo">Quanto fa 2+1 ?</label>
<input type="text" id="controllo" name="controllo"/>

Verificando il valore immesso avremo la certezza che l’utente sia un essere umano in grado di contatto e non un bot che riempe in maniera casuale i campi del form. La maggior parte dei bot infatti non si curerà di risolvere la semplice operazione ma immetterà un input di spam.

Esiste un’ulteriore alternativa che consente di evitare un input da parte degli utenti. In generale i bot quando rintracciano un form riempiono ogni input con valori casuali di spam secondo determinati criteri per superare i controlli. Su questa base si sviluppa una soluzione che implica l’utilizzo di un campo input nascosto.

<input type="hidden" name="controllo"/>

Un campo di tipo hidden non risulta visibile all’utente e viene normalmente utilizzato per passare valori di cui si è già in possesso ad uno script. Essendo questo campo di default vuoto non posterà nessun valore allo script nel caso di un utente umano mentre il bot vedendo l’input inserirà un valore. A questo punto è sufficiente porre un controllo che verifichi che il campo nascosto non abbia alcun valore inserito.

E’ inoltre utile valutare una piccola modifica a questa soluzione, essendo i bot dediti allo spam in continua evoluzione e continuo miglioramento per aggirare i controlli potrebbe essere rintracciato un controllo sul campo nascosto. In questo caso ci vengono in aiuto i css che ci permettono di nascondere un campo di testo tradizionale.

<label style="display:none;" for="controllo">Non compilare questo campo</label>
<input type="text" id="controllo" name="controllo" style="display:none;"/>

In questo modo il campo input sarà visto come un normale campo di testo e non potrà essere aggirato, nel caso di un browser testuale il testo contenuto nell’elemento <label> avvertirà l’utente di non compilare il campo di controllo.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con , . Contrassegna il permalink.

Una risposta a Alternative ai Captcha tradizionali con css e html

  1. vrde scrive:

    molto molto interessante il secondo metodo, grazie! :)

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>