Mes amis les SPAMS de commentaires

• Publié le 26 Janvier 2009
• 10 commentaire(s)
• Catégorie : Technologies Web

Après une légère attaque de SPAMS dans les commentaires de certains billets (gros succès sur le billet des smileys, avec quelques 150 SPAMS en 3 jours...), il m'a fallu désactiver les commentaires quelques jours, le temps de trouver une alternative "rapide" de fabrication. Cela m'a permis de faire le tour des possibilités, sans pour autant toutes les expérimenter...

J'ai pu cependant obtenir un bon compromis, permettant de limiter l'action des SPAMS par une double validation (POST), tout en conservant un site accessible et un bon confort pour les contributeurs par un mécanisme en AJAX.

Mes précédents commentaires

Précédemment, le formulaire d'ajout de commentaires se présentait directement dans la page, avec un jolie effet Mootools de Slide. J'aimais bien le principe, mais j'ai fait preuve de naïveté en me croyant protégé des SPAMS par je ne sais quelle raison mystique !

eZ Publish ne permet pas ce mécanisme de façon native, j'avais donc déployé l'extension Powercontent qui permet de publier directement un objet de contenu à un emplacement donné, sur un seul POST... Un jolie boulevard pour les SPAMS en tout genre qui n'ont eu aucun problème pour combiner les différents types de champs et pour générer des emails et des URL valides.

Les alternatives : Les Captcha

Il est quand même incroyable que l'on soit obligé d'inventer des systèmes aussi complexes, pour lutter contre quelques poignées de pollueurs du Web... Je déteste utiliser les Captcha pour plusieurs raisons, dont le manque d'accessibilité du mécanisme, et surtout le processus très pénible et très dissuasif de concentration visuelle...

Il existe pour les courageux 2 extensions intéressantes pour eZ Publish :

• eZ Human Captcha, extension très configurable et puissante. Voici un exemple sur un site célèbre : http://www.01informatique.fr/newsletter/register
• reCaptcha : Cette extension possède au moins la vertu de rendre utile les nombreux efforts des internautes pour traduire les caractères graphiques. En effet, le projet reCaptcha a pour vocation d'exploiter les milliers de contributions des internautes afin de faire évoluer la capacité des OCR, notamment pour la numérisation de Internet Archives et du New York Times. Pour en savoir plus sur ce projet reCaptcha.

Pour ma part, hors de question d'exploiter un Captcha sur mon Blog.

Les alternatives : La double case à cocher

Cette technique optimiste est apparu depuis quelques temps sur le principe suivant :

• Le formulaire propose une case à cocher visible pour les humaines : "Êtes vous un humaine ?"
• Le formulaire propose une autre case à cocher visible uniquement pour les robots : "Êtes vous un robot ?"

A chaque validation d'un commentaire, le système vérifie que les 2 cases à cocher sont correctement renseignées, à savoir respectivement "Vrai" et "Faux". Tout le système repose sur une hypothèse qui ne fera à mon avis pas long feu, à savoir "Les robots sont idiots et cochent ou décochent tout, sans jamais combiner les possibilités".

Pour ma part, hors de question d'exploiter un système si peu pérenne sur mon Blog.

Les alternatives : La double validation

Cette technique est vieille comme le monde est fonctionne toujours très bien. Il s'agit par ailleurs du mécanisme par défaut sur eZ Publish (peut être un effet de bord positif ?), à savoir :

• Un bouton "Ajouter un commentaire" effectue un premier POST "/content/action" vers la page du formulaire de commentaire
• Le formulaire de commentaire propose un bouton "Valider", qui effectue un deuxième et dernier POST "/content/edit/[...]"

Le mécanisme est un peu complexe, et les robots ne vont visiblement pas aussi loin dans leurs algorithmes. C'est également un peu plus laborieux pour les internautes qui se voient proposer des rafraîchissements de pages. Ce principe est parfois décliné sur un mécanisme de prévisualisation avant publication (ce qui revient au même). Il faut par contre se soucier de la gestion des brouillons pour ne pas polluer sa base de données.

Cette article résume la technique pour eZ Publish : http://www.luxpopuli.fr/eZ-publish/Configuration/eZ-Publish-ajouter-et-configurer-les-commentaires-imbriques

Pour ma part, c'est le mécanisme sur lequel je suis revenu, mais que je souhaite doubler avec un chargement en AJAX

Ma solution : La double validation, complété en AJAX

Après avoir implémenté la double validation classique (par le "/content/action", et le "/content/edit/"), il me fallait absolument doubler le mécanisme par un chargement en AJAX dynamique (toujours avec Mootools), c'est une question d'honneur...

Le mécanisme est le suivant :

• Si JavaScript est désactivé (pour les robots, ou pour les contextes d'accessibilités), la double validation POST se déroule de façon classique
• Si JavaScript est activé, les internautes (à priori pas les robots) se voient proposer le formulaire directement dans la page

Il est difficile de décrire tout le mécanisme, en voici l'essentiel :

Création d'un layout AJAX

eZ Publish ne permet pas de surcharger le "content/edit" avec un paramètre permettant de distinguer une vue AJAX d'une vue classique, il faut donc s'y prendre autrement, par exemple en exploitant le module "layout". Ce module permet de forcer la surcharge du "pagelayout.tpl" par un autre layout, comme par exemple "ajax_pagelayout.tpl". La syntaxe est ensuite la suivante : "/layout/set/ajax/[urlclassique]"

<?php /* #?ini charset="utf-8"?
 
[ajax]
PageLayout=ajax_pagelayout.tpl
ContentType=text/xml
#UseAccessPass=false
 
*/ ?>
 

A noter : La redéfinition d'un Layout réécrit toutes les URL de la sorte : "/layout/set/ajax/[urlclassique]", ce qui est nécessaire pour la navigation AJAX entre les pages, mais problématique pour poster un contenu vers l'URL classique. Le paramètres "UseAccessPass=false" prévu à cet effet ne peut pas être exploité dans le cadre d'un double POST ("/layout/set/ajax/content/action" doit rediriger vers "/layout/set/ajax/content/edit/[...]" et non pas "/content/edit/[...]"). Il faut s'y prendre autrement pour masquer la racine des URLs "/layout/set/ajax/", par exemple en JavaScript (on y reviendra).

Le template "extension/[monextension]/design/[monsiteaccess]/templates/ajax_pagelayout.tpl" :

{if $module_result.ui_context|eq('edit')}
 {$module_result.content}
{/if}
<!--<!--DEBUG_REPORT-->-->
 
 

Je fais simple pour l'exemple, mais il est conseillé de définir dans un fichier de configuration la liste des conditions de surcharge du "pagelayout.tpl", afin d'éviter les possibilités de navigations alternatives avec un autre layout. Le commentaire sur le DEBUG_REPORT est indispensable si le DEBUG est activé. Sans ce bricolage, le debug contrarie la validité du XML et ne permet pas le chargement AJAX du contenu (très pénible en version de développement).

Chargement en AJAX via Mootools

String.prototype.replaceAll = function(strTarget, strSubString)
{
 var strText = this;
 var intIndexOfMatch = strText.indexOf( strTarget );
 
 while (intIndexOfMatch != -1)
 {
  strText = strText.replace( strTarget, strSubString )
  intIndexOfMatch = strText.indexOf( strTarget );
 }
 
 return( strText );
}
 
/* Comment */
var _COMMENT_FORM_ACTION = 'form_content_action';
var _COMMENT_DIV_ACTION = 'add_comments';
 
/* Ajax */
var _AJAX_LAYOUT = '/layout/set/ajax';
 
if ($(_COMMENT_FORM_ACTION)) {
  var myform = $(_COMMENT_FORM_ACTION);
  myform.addEvent( 'submit', function(evt) {
    new Event(evt).stop();
    new Request({
     method: myform.get('method'),
     url: _AJAX_LAYOUT+myform.get('action'),
     
     onRequest: function() {
      $(_COMMENT_DIV_ACTION).set('html', '<div id="ajax-loader"><h1>Chargement en cours...</h1><img src='+images_url+'ajax-loader.gif'+'></div>');
     },
     
     onSuccess: function(responseText, responseXML) {
      $(_COMMENT_DIV_ACTION).set('html', responseText.replaceAll(_AJAX_LAYOUT, ''));
      addCommentEvents();
     }
    }).send(this.toQueryString());
  });
 }
 

Ce exemple de code exploite d'autres fonctions et constantes définies par ailleurs (que j'ai tenté de compiler dans cet extrait). Il est cependant suffisamment simple pour ne pas mériter de commentaires, en dehors peut être de quelques subtilités :

• La suppression à la volée de la fameuse racine "/layout/set/ajax/" par simple replaceAll
• La définition de la méthode replaceAll par extension du prototype de l'objet String. En effet, la méthode replace de JavaScript ne remplace que la première occurence de la chaine de caractère cible...

A noter : un site propose la génération de GIF (et pas de PNG, dommage) pour le chargement AJAX : http://www.ajaxload.info/

• Tags :
• SPAM
• AJAX
• eZ Publish
• mootools