Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créez votre propre système anti-flood

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par Stefbuet

Vous avez un blog, ou tout simplement un système d’inscription sur votre site internet ? Bien, mais n’avez-vous jamais été la cible de ces floodeurs dont les seuls buts sont d’embêter le monde pour ne pas employer de termes vulgaire, et de surcharger votre site ?

Nous allons ici étudier puis mettre en pratique des techniques permettant d’éviter au maximum les actes de flooding sur vos sites web via une application Flash en AS3. Nous verrons tout d’abord les méthodes que l’on peut utiliser, puis nous les mettrons en pratique. Pour finir nous verrons quelles améliorations vous pourriez apporter à ce système.

Note : Vous devez posséder un minimum de connaissances sur l’AS3 et la programmation orienté objet, c'est-à-dire la notion de class, document class, l’organisation des packages AS3 et la POO.

Notions abordées :

  • Document class
  • TextField & TextFormat classes
  • Bitmap & BitmapData classes
  • Liaison PHP-Flash
  • Filters classes

Sommaire :

I. Présentation de l’animation

 1) Les méthodes que nous allons utiliser

II. Les bases de l’application

1) Génération et récupération d’un code
2) Affichage du code simplement

III. Vérifier les données de l’utilisateur

IV. Compliquer la vie aux floodeurs et leurs bots

1) Un format de texte unique
2) L’utilisation de filtres de rendu

V. Améliorations possibles

 1) Utilisation de BitmapData
 2) Les autres méthodes existantes
    a. Les opérations
    b. L’animation
    c. Les sons
3) Une sécurité supplémentaire via PHP & BdD

VI. Conclusion

A la fin de ce tutorial, vous obtiendrez une animation comme celle-ci-dessous capable d’éviter aux flooders de pourrir votre site internet. Pour ceux qui n’auraient pas suivit le tutorial jusqu’au bout, un fichier ZIP contenant les sources (fla & as & swf) est téléchargeable à la fin de l’article.

Animation finale :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

I. Présentation de l’animation

1) Les méthodes que nous allons utiliser

Avant de chercher une méthode pour déjouer les flooders, il faut bien savoir de quoi il s’agit, et comment les flooders agissent. Les flooders sont des personnes qui à l’aide d’un ordinateur et d’une connexion internet vont grâce à un moyen ou un autre essayer et parfois réussir à bombarder votre site internet dans des espaces tel qu’un forum, espace de commentaires ou autre de messages en grand nombre, ce qui est désagréable, surcharge votre site… Bref les flooders ne sont pas nos amis.

Pour envoyer un grand nombre de messages (des milliers) vous pouvez vous douter que les flooders ne vont pas poster chaque message un part un. Pour cela ils utilisent des programmes faits par eux même ou un tiers qui postera automatiquement des messages sur la page souhaitée.

Pour éviter de se faire attaquer par ce genre de programme nous allons créer un système anti flood qui consistera à demander à l’utilisateur de valider son message en recopiant un code affiché à l’écran. Ce code sera unique à chaque nouveau message avec des tailles et couleurs différentes, ce qui le rendra non analysable par le programme de flooding, et vous permettra de garder votre site propre.

Nous allons dans le tutorial qui suit utiliser des techniques basique de création d’un code unique en variant la couleur, taille de la police et en appliquant des filtres de rendu sur celle-ci, et à la fin nous aborderons d’autres techniques plus ou moins sophistiquées permettant aussi de lutter contre le flooding.

II. Les bases de l’application

Nous allons travailler sous l’IDE Flash CS3 via le langage AS3. Créez donc un nouveau document Flash AS3 et enregistrez ce document sous ‘Main.fla’ dans le répertoire de votre choix. Bien qu’ici cela soit peu important, n’oubliez pas d’augmenter le taux de rafraichissement de l’animation (images/s) par exemple à 48fps (frames per seconds).

Nous allons travailler directement via une Document Class pour la gestion du système mais aussi la création des éléments graphiques sachant que ceux-ci seront peu nombreux, et que l’intérêt de ce tutorial est tout d’abord la création en AS3 d’un system anti flood.

Pour notre Document Class, créez donc un nouveau fichier ‘Main.as’ et codez la class Main basique vide de la scène qui héritera de l’objet Sprite :

 
/////////////////////
package {
 
	import flash.display.Sprite;
 
	public class Main extends Sprite {
 
		public function Main() {
 
		}
 
	}
 
}
 
////////////////////////

1) Génération et récupération d’un code

Nous allons créer un code de 5 caractères contenant des chiffes et des lettres, pas de majuscules pour éviter les confusions chez les utilisateurs et l’attribuer à une variable pour tester ce que va envoyer l’utilisateur plus tard. Créons donc une fonction qui nous permettra de récupérer un code unique à chaque fois. Nous allons créer un tableau (Array) qui contiendra tous les caractères disponibles pour le code (ici les lettres & chiffres) puis pour chaque nouveau caractère du code nous choisirons une case du tableau au hasard. Puis on retournera simplement le code sous forme de String. La fonction prendra en paramètre la longueur totale du code que nous voulons.

/////////////////////
 
package {
 
	import flash.display.Sprite;
 
	public class Main extends Sprite {
 
		//variable pour stocker toutes les valeurs du code possibles
		private var codeArray:Array;
 
		public function Main() {
 
			//on met ici tous les caracteres disponibles (qui pourront apparaitre dans le code)
			codeArray=new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");
 
		}
 
		private function getNewCode(length:uint):String {
			//param lenght = nombre de caractere du code à retourner
 
			//on initialise le code que l'on retournera
			var code:String="";
 
			for(var i:int; i<length; i++) { //pour chaque caractere du code
 
				//on prend un caractere au hazard parmis ceux stocké dans l'Array créé precedement
				code+=codeArray[Math.round(Math.random()*(codeArray.length-1))];
 
			}
 
			//pour finir on retourner le code final :
			return(code);
 
		}
 
 
	}
 
}
 
/////////////////////

Vous pouvez tester la fonction plusieurs fois de suite, le code sera toujours unique.

/////////////////////
 
//dans le constructeur de la class (fonction Main) juste après l'initialisation de l'Array de caracteres :
 
for(var i:int=0; i<10; i++) {
	trace(getNewCode(10));
}
 
//////////////////////

2) Affichage du code simplement

Ici nous allons simplement afficher le code dans un TextField Dans cette partie nous allons aussi créer un bouton de rechargement de l’affichage (et du code)

Commençons donc par créer un nouvel objet TextField et plaçons-le sur la scène. Nous devons faire cela via le code pour lui appliquer par la suite des effets sympathiques plus facilement et proprement via le code.

//////////////////////
 
// dans la package avant la déclaration de la class Main, on import la class TextField :
import flash.text.TextField;
 
//dans la class Main juste avant la function Main, on créer la variable qui contiendra notre TextField :
private var codeText:TextField;
 
//dans la fonction Main à la fin, on initialise ce TextField et on le place sur la scene :
codeText=new TextField();
codeText.selectable=false;
addChild(codeText);
 
///////////////////////

Maintenant nous allons créer une fonction newCode qui va récupérer un code unique à chaque fois, puis le mettre dans le champ de texte dynamique que nous venons de créer. Cette fonction va aussi centrer le TextField en fonction de sa largeur de texte sur la scene.

/////////////////////
 
private function newCode(e:MouseEvent=null):void {
	//param e:MouseEvent car appelé par un evenement de clic sourie. =null car appellé 1 fois dans le constructeur au tout debut
 
	codeText.text=getNewCode(6);
	codeText.x=stage.stageWidth/2-codeText.textWidth/2;
 
}
 
////////////////////

Pour finir nous allons créer un bouton de rechargement qui appellera cette fonction pour mettre à jour l’affichage de la scène. Dessinez donc un bouton sur votre scène et donnez-lui comme nom d’occurrence « update_bnt ». Ensuite dans la classe principale, dans le constucteur, attribuez un écouteur d’évenement sur le bouton à MOUSE_DOWN (flash.events.MouseEvent) qui appelera la fonction newCode que nous venons de créer :

//////////////////////
 
//on doit importer les class suivante :
import flash.display.SimpleButton; //car on va utiliser un bouton créé via l'IDE
import flash.events.MouseEvent; //pour gérer le clic sur ce bouton
 
//au debut du constructeur après l'initialisation du TextField on lance une premier fois la function newCode :
newCode();
 
//à la fin du constructeur on ajoute un écouteur d'evenement au bouton en question:
update_bnt.addEventListener(MouseEvent.MOUSE_DOWN, newCode);
 
/////////////////////////

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Maintenant on à un code nouveau qui s’affiche à chaque fois !

III. Vérifier les données de l’utilisateur

Etape très simple de ce tutorial. Il suffit pour cela de placer un champ de texte de saisie sur votre scène (possible de le faire via le code dans le constructeur de votre classe principale [Mais ici nous le placerons directement dans l’IDE de Flash CS3]) et donnez lui comme nom d’occurrence « user_txt ». Attention à bien mettre ce champs de saisie en mode 1 ligne et non pas multiligne sinon cela ne marchera pas !

Il nous faudra aussi un bouton sur lequel l’utilisateur cliquera pour valider. Créez donc un bouton pour cela avec « confirm_bnt » comme nom d’occurrence.

Il suffit maintenant d’écouter l’événement de clique (MOUSE_DOWN) sur le bouton et d’analyser le code de l’utilisateur /généré par le programme, lorsque celui-ci ce déclenche. Ensuite en fonction du résultat soit vous redirigez votre user, soit vous le refusez. Pour l’exemple j’afficherais juste le résultat dans un TextField à coté (cela sera dans le Fla final téléchargeable à la fin de l’article)

//////////////////////
//à la fin du constructeur (fonction Main) on ajouter un écouteur d'evenement au bonton de confirmation :
confirm_bnt.addEventListener(MouseEvent.MOUSE_DOWN, verif);
 
//on créer une fonction qui va vérifier si l'user à taper le bon code
 
private function verif(e:MouseEvent):void {
 
	if(String(user_txt.text)==String(codeText.text)) {
		trace("ok");
	}
	else {
		trace("non!");
	}
 
}
 
//vous pouvez mettre ce que vous voulez à la place des deux actions traces :
//trace("non"); -> Ici le code est faux, vous pouvez ne rien faire ou l'anoncer à l'utilisateur
//trace("ok"); ->le code est bon, vous pourriez a ce mpoment rediriger votre utilisateur la ou vosu le voulez
//par exemple avec : navigateToURL(new URLRequest(myURL));
 
//personnelement, j'ai créé un champs de texte dynamique avec "result_txt" comme nom d'occurence
//et ma fonction devient :
 
/*
private function verif(e:MouseEvent):void {
 
	if(String(user_txt.text)==String(codeText.text)) {
		result_txt.text="Code bon! Vous pouvez raffraichir le code et réessayer!";
	}
	else {
		result_txt.text="Code faux! Merci de réessayer.";
	}
 
}
*/
 
/////////////////////////

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

IV. Compliquer la vie aux floodeurs et leurs bots

Certes on peut maintenant vérifier un peu les utilisateurs qui utilisent notre système, mais laissé comme cela, ce même système n’est pas très performant, en effet le texte sans aucun traitement peut être analysé facilement graphiquement par des bots. Nous allons donc ici appliquer toutes sortes de modifications sur ce texte !

1) Un format de texte unique

Nous pouvons appliquer un format de texte unique à chaque code en utilisant l’objet TextFormat. Nous allons ici faire varier les propriétés size, color et font aléatoirement histoire de fausser les analyses des bots ! Créons donc une fonction pour créer un TextFormat unique, puis à chaque création d’un nouveau code via la fonction newCode, appelons cette fonction et attribuons au TextField créé le TextFormat récupéré. Le TextFormat sera différant pour chaque caractère du code.

Au besoin vous pouvez augmenter la taille du TextField du code à 150 pixels de large.

///////////////////////
 
//tout d'abord on import la class TextFormat :
import flash.text.TextFormat;
 
//ensuite on créer une variable pour contenir notre TextFormat juste avant la fonction Main :
private var codeTextFormat:TextFormat;
 
//dans le constructeur, on initialise ce textFormat, juste après la création de l'Array de caracteres (codeArray):
codeTextFormat=new TextFormat();
 
//maintenant la partie la plus interescente :
//dans la fonction newCode, juste après l'obtention d'un nouveau code, on va parcourir chaque caractere du code:
for(var i:int=0; i<codeText.text.length; i++) {
	//trouver une couleur au hazard
	codeTextFormat.color=Math.random()*0xffffff;
	//une taille de police au hazard
	codeTextFormat.size=Math.random()*40+20;
	//et on l'applique au caractere en cour :
	codeText.setTextFormat(codeTextFormat, i, i+1);
}
 
 
//en gros votre fonction newCode devrait maintenant ressembler à cela :
/*
private function newCode(e:MouseEvent=null):void {
 
	codeText.text=getNewCode(6);
 
	for(var i:int=0; i<codeText.text.length; i++) {
		codeTextFormat.color=Math.random()*0xffffff;
		codeTextFormat.size=Math.random()*40+20;
		codeText.setTextFormat(codeTextFormat, i, i+1);
	}
 
	codeText.x=stage.stageWidth/2-codeText.textWidth/2;
 
}
*/
 
////////////////////////

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

2) L’utilisation de filtres de rendu

Encore plus fort que la modification du TextFormat du code, nous pouvons appliquer des filtres de rendu sur le TextField car il hérite da class DisplayObject. Nous pouvons donc utiliser tous les filtres tel que le flou, ombres portées, biseau, etc…

Pour l’exemple nous allons ajouter un filtre de biseau à couleur aléatoire. On créer une variable pour le filtre, puis à chaque création de TextFormat on va modifier les couleurs du filtre aléatoirement. Comme d’habitude on applique le filtre sur le texte dans la fonction newCode.

/////////////////////
 
//on import la class du filtre dont on à besoin : BevelFilter :
import flash.filters.BevelFilter;
 
//on créer juste avant la function Main une variable pour créer notre filtre :
private var codeBevelFilter:BevelFilter;
 
//dans la constructeur de la class Main (fonction Main) on initialise notre filtre juste après l'initialisation du TextFormat :
codeBevelFilter=new BevelFilter();
 
//dans la fonction newCode à la fin, on change les couleurs du filtre aléatoirement :
codeBevelFilter.highlightColor=Math.random()*0xffffff;
codeBevelFilter.shadowColor=Math.random()*0xffffff;
 
//et juste après on applique le filtre à notre texte :
codeText.filters=[codeBevelFilter];
 
///////////////////

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

V. Améliorations possibles

1) Utilisation de BitmapData

L’utilisation d’image bitmap au lieu d’un autre objet d’affichage héritant de DisplayObject tel que le Textfield nous permet d’utiliser un éventail beaucoup plus large d’effets du fait de la disponibilité de la gestion des pixels. Ainsi vous pouvez créer des distordions sur vos images qui rendrons le code encore plus dur à lire aux bots.

Petit astuce : vous pouvez facilement créer des Objets BitmapData contenant votre texte avec son propre TextFormat en utilisant la fonction draw de BitmapData :

myBmpData.draw(myTextField);

2) Les autres méthodes existantes

Nous avons créé un système anti-flood en utilisant du texte statique, mais il existe d’autres techniques similaires ou pas qui permettent de faire la même chose.

a. Les opérations

On peut par exemple proposer à l’utilisateur de calculer une simple opération du type (5*10+5).

Cette méthode peut aussi être combiné avec la notre, mais attention à ne pas faire un système trop lourd visuellement tout de même !

b. L’animation

Vous pouvez animer votre code au fil du temps. Changement de positions, de propriétés des filtres appliquées ou bien de rotation, tout est possible. Pa exemple si vous utilisez une distorsion via un BitmapData (&Bitmap) pourquoi ne pas animer cette transformation pour donner par exemple un effet de drapeau ?

c. Les sons

Généralement on utilise les vérifications par son en parallèle avec un code visuelle. En effet certaines personnes mal voyantes ne peuvent pas décrypter notre code visuel. Pour cette technique on peut par exemple enregistrer toutes les lettres de l’alphabet sous forme de séquence sonore, puis en fonction du code généré dans l’animation, on charge les sons nécessaire puis on les joue chacun à leur tour.

3) Une sécurité supplémentaire via PHP & BD

Le problème des animations Flash (le format SWF), c’est qu’il se décompile facilement via des utilitaires. Ainsi votre méthode de redirection, même bien complexe/caché dans l’animation se verra comme le nez au milieu de la figure et en deux trois mouvement, un utilisateur assez connaisseur trouvera comment vous flooder.

Pour palier à ce problème on peut utiliser en parallèle du PHP avec MySQL comme système de base de donné.

A chaque nouvelle vérification demandé, on stocke l’IP de l’utilisateur et la date de demande dans la base de donné et on la transmet (l’IP) aussi à Flash via le PHP. Lorsque l’user validera son code, Flash enverra l’IP & Date à PHP qui vérifiera si celle-ci existe bien dans la base de donné et que la différance de temps entre les deux date n’est pas trop grande.

V. Conclusion

Dans ce tutorial vous aurez appris à créer un système anti-flood plus ou moins efficace selon les « options » que vous lui rajouterez. Cependant j’aimerais conclure sur une chose importante : lorsque vous créez votre système anti-flood, ne créez pas quelque chose de trop lourd, trop imposant. Plus cela est léger et transparent, rapide à utiliser, plus les utilisateurs resterons sur votre animation. Au contraire si votre interface est trop lourde (son + images + animations + filtres + opérations) alors vos visiteurs partiront tous !

Comme promis, voici les téléchargements des différents fichiers utilisés et créés dans ce tutorial :

Fichier ZIP de la source final (.fla & .swf & .as)
Fichier ZIP de toutes les étapes de code (.as)

Stefbuet