Comment neutraliser un spambot qui utilise un formulaire web

Un spambot est un logiciel qui permet d'envoyer des pourriels. Il existe plusieurs types de spambots. Certains recherchent des adresses courriel en parcourant des pages web pour ainsi se créer une liste d'adresses et ensuite d'envoyer des pourriels à cette liste. Il en existe également pour les forums, les wikis donc pour les formulaires web en général.

Solution Captcha

Il existe une technologie qui se nomme Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) qui permet d'effectuer une vérification en utilisant la capacité d'analyse d'image ou de son de l'être humain. Les Captcha visuels fournissent des mécanismes d'altération de l'image (déformation légère, points aléatoires, ligne transversale, etc.) afin que les logiciels de reconnaissance optique de caractères ne puissent pas décoder les caractères sur l'image. Malheureusement, les spambots les plus perfectionnés sont en mesure de contourner les Captcha. Certains Captcha sont tellement déformés pour éviter une reconnaissance automatique que même les internautes ne peuvent les reconnaître.

Exemple de Captcha

Solution Honeypot (Pot de miel)

Il existe une façon que je trouve assez intéressante pour régler ce problème. Il s'agit en gros de tendre un piège aux spambots afin de pouvoir les neutraliser. Les spambots ne sont pas capables de distinguer à quoi servent les champs de votre formulaire. Ils sont capables de détecter les types de champs, mais non leurs fonctions. Les spambots ont l'habitude de remplir de données bidon tous les champs du formulaire web (afin de contourner les RequiredValidator) alors grosso modo le truc est d'ajouter un champ bidon (caché en CSS) afin que l'intru y ajoute des données. Ce champ n'étant pas visible aux utilisateurs "normaux", nous pourrons donc déduire que le formulaire a été saisi par un robot si le champ contient des données et par un utilisateur si le champ est vide.

Dans le l'événement OnInit de la page de formulaire, nous allons ajouter le champ texte bidon et lui assigner une classe CSS afin de pouvoir le cacher. La classe CSS aura un nom généré au hasard au format suivant :

trap + nombre aléatoire de 1 à 1000

Le nom de la classe est généré afin que le spambot ne puisse pas détecter l'astuce.

protected override void OnInit(EventArgs e)

        {

            
base.OnInit(e);
            //Add a HoneyPot to block spambots
            //Generate a random class name
            Random random = new Random();

            String honeyPotCssClassName = String.Concat("trap", random.Next(1000).ToString());

            TextBox textHoneyPot = new TextBox()

            {
                
ID = "textHoneyPot",

                CssClass = honeyPotCssClassName
            };

            Form.Controls.Add(textHoneyPot);



            ClientScript.RegisterClientScriptBlock(typeof(Page), "_dynamiccsstrap", String.Concat("<style type=\"text/css\">.",honeyPotCssClassName," { display:none !important; } </style>"), false);
  
        }

Lors que le formulaire est retourné au serveur, on doit s'assurer que le champ textHoneyPot est vide avant de poursuivre le traitement.

 protected void ButtonSend_Click(object sender, EventArgs e)

        {

            
TextBox textHoneyPot = (TextBox)Form.FindControl("textHoneyPot");

            if (Page.IsValid && String.IsNullOrEmpty(textHoneyPot.Text))

            {

//Do stuff
}
}

Voilà, le problème des spambots devrait être réglé, du moins jusqu'à la prochaine percée! ;)

Référencer en CSS 2.0 des éléments sans id ni classe

Un de mes collègues m’a montré un cas assez spécial aujourd’hui dans SharePoint. Il a construit un formulaire de saisie dans SharePoint avec l’objet InputFormSection qui est un Template User Control. Bref en résumé cet objet génère en html un objet avec un tag <tr> et des <td> pour chacune des sections.

Le problème est survenu lorsqu’il a ajouté le contrôle PeoplePicker de SharePoint dans une des sections. Le code html généré par le PeoplePicker crée automatiquement un espace à droite de 10 pixels ainsi qu’une ligne en dessous. Ce qui n’était pas très élégant pour l’affichage du formulaire. Le défi est donc de cacher la cellule de 10 pixels ainsi que la ligne qui a été rajoutée en dessous du contrôle PeoplePicker.

Le PeoplePicker est un WebControl, ce qui veut dire qu’il est compilé dans un assembly, donc pas facilement modifiable.
Après réflexion je ne vois que deux solutions pour cacher ces deux éléments : soit via CSS ou Javascript.

J’ai donc choisi la première solution.

Pour rajouté à la tâche, les deux éléments n’ont aucun ID ni aucune class CSS. Ils sont donc assez difficiles à référencer.
Voici un exemple de code, différent de l’original, mais qui démontre bien la situation.

 <table id="tblMyTable">
        
<tr class="myTrClass">
            
<td class="myTDClass1">Data 1</td>
            <td class="myTDClass1">Data 2</td>
            <td width="10">&nbsp;</td> <%--To be removed--%>
</tr>
<tr> <%--To be removed--%>
            
<td> </td>
            <td><img src="Line.jpg" height="5" width="200"/></td>
            <td> </td>
</tr>
</table>

Je cherchais un moyen de référencer le 3e tag TD afin de lui appliquer le style « Display: none; ». J’ai donc discuté mon collègue Sébastien qui connait bien le CSS. Il m’a donc parlé du symbole « + » en CSS 2.0 qui permet de référencer l’objet qui succède directement à l’élément précédent.
J’ai donc créé le style suivant dans le tag « Head » de la page afin de cacher le tag TD :

<style type="text/css">
    #tblMyTable .myTDClass1 + .myTDClass1 + td
    {
        
display: none;
}
</style>

Le code ci-dessus sélectionne le tag avec la classe « myTDClass1 » dans la table dont le id est « tblMyTable » (1er TD), ensuite il sélectionne l’objet qui lui succède directement et qui a également la classe « myTDClass1 » (2e TD) et ensuite le TD qui lui succède directement c'est-à-dire le 3e TD.

Même principe pour cacher le 2e TR.

<style type="text/css">   
    #tblMyTable .myTrClass + tr
    {
        
display: none;
}
</style>

En résumé, vive le CSS!