Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Galerie] Réalisation de CAPTCHAs

On veut les votres

    29 août 2009 à 9:59:16

    C'est pour cela que mon captcha, je l'ai fait juste pour m'amuser ( et pour vous le montrer ) ^^

    Normalement il est réalisé pour que les lettres ne dépassent pas l'image, mais c'est assez pénible à gérer ( j'ai fait des calculs avec cos et sin etc.. )
    Je viens de re-tester, et même la version "light" ( juste le texte avec fond noir ) est très long à charger ! ( dans les 10-12 secondes )

    EDIT : j'ai le droit de copier le captcha du SDZ pour mon site ? j'vais m'amuser à faire le même maintenant :p
    • Partager sur Facebook
    • Partager sur Twitter
      29 août 2009 à 12:07:14

      Bonjour,

      Dites je me pose une question... ok les captchas, si quelqu'un veut le craker il va finir par y arriver... bon ok... mais je suppose que les bots ils récupèrent le code source de la page (php, C, phyton, ...) et l'analyse pour récupéré l'image et enfin tenter d'identifier les caractères.

      Pourquoi ne pas tenter de se concentrer sur le fait de les empêcher de récupéré l'image ?

      Car d'après ce que je sache les bots ont jusqu'à présent pas mal de difficulté avec le javascript... par conséquent si l'on chargeait l'image avec de l'ajax... bah fatalement cela deviendrai plus compliquer pour le bot non ?
      • Partager sur Facebook
      • Partager sur Twitter
        29 août 2009 à 13:15:49

        Lorsque je disais le code source je pensais bien évidement au code généré ^^

        D'accord lorsque l'image est chargée en JS elle atterri également dans le cache donc récupérable... mais l'intérêt du Js c'est que les bots navigue seul... donc pas avec un navigateur sous la main, ils naviguent eux même avec des fonctions disponible comme curl pour php... et généralement ils sont fait sans possibilité d'interpréter le JS et donc finalement ils ne sauront pas voir le capchat...
        • Partager sur Facebook
        • Partager sur Twitter
          29 août 2009 à 13:29:24

          Moi je penserais a un fichier image.php, qui contiendrait le code de l'image avec quelque grain de sel par-ci par la, et grâce à l'ajax récupérer le fichier image.php, en js supprimer ce qu'il y a en trop et afficher ensuite l'image, c'est faisable et sécurisé ça non ?

          EDIT: on peut même crypter l'image et la décrypter pour l'affichage en JS non ?
          • Partager sur Facebook
          • Partager sur Twitter
            29 août 2009 à 13:39:30

            @Day: bof... si tu fait avec de l'ajax cela deviens beaucoup plus compliquer de savoir ce que l'on attend, d'autant plus si le traitement js est lui même appeler avec l'ajax... tu mes simplement un script qui gère l'ajax, qui lui va appeler une page de traitement, qui se chargera de vérifier que c'est bien ajax qui demande la page, tu lui envoie le reste du code js a traiter... tu execute ce code qui ira rechercher une image et qui enfin l'affichera...

            Bon je sais c'est floue mais je défie d'aller récupéré directement l'image de cette façon xD (hormis cache et screen, mais pour le cache suffi de charger 2-3 images... et donc si plusieurs image en cache sa va devenir plus difficile de savoir la quel est la bonne)
            • Partager sur Facebook
            • Partager sur Twitter
              29 août 2009 à 13:48:41

              mon idée revient a ce que dit La source : charger l'image grâce à Ajax
              • Partager sur Facebook
              • Partager sur Twitter
                29 août 2009 à 14:34:30

                oops! j'ai pas vu qu'il y avait un concour de captcha... :euh: C'est trop tard pour poster le mien?
                • Partager sur Facebook
                • Partager sur Twitter
                  29 août 2009 à 15:10:50

                  Bonjour,
                  Un bot n'utilise pas de cache, ce n'est pas un navigateur...
                  Et on ne peux pas l'empêcher de récuperer l'image sans empêcher les "vrais" visiteurs de la voir...

                  Sinon j'avais une idée : quand vous affichez l'image de fond de commentcamarche.net (par exemple), vous voyez ceci (toutes les images utilisées sont regroupées en une seule.
                  Même si je trouve ça bizarre de faire compliqué quand on peux faire simple ça pourrait nous servir : vous avez une image avec des lettres dans le désordre, et au moment de l'afficher on recolle les morceaux dans l'ordre...

                  Citation : css de comment ça marche

                  background/* */:#8a8a8a url(/img/sprite_ccm2.png) no-repeat 50% 13px;



                  Qu'en pensez-vous ?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    29 août 2009 à 15:17:29

                    Thulium : ca s'appel du css sprites, en gros, tu as ton image, et avec le css, tu affiches l'image, et la partie que tu veux

                    exemple :

                    background:url(../images/img.png) no-repeat right bottom;


                    le problème, c'est que d'un simple trait il récupère l'image qui contient toutes les lettres et n'a plus qu'à faire une comparaison...

                    et sinon, concernant le cache, je ne comprends pas, il fait vraiment un screenshot de la page ???
                    • Partager sur Facebook
                    • Partager sur Twitter
                      29 août 2009 à 15:24:42

                      le but c'était de mélanger l'ordre sur l'image d'origine pour le tromper ; de toute façon il peut retrouver dans le css (mais c'est une précaution qui peut s'avérer utile).

                      Pour le cache, ça n'est pas un navigateur avec un cache : c'est un programme qui télécharge la page et qui l'analyse directement.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        29 août 2009 à 16:05:59

                        Il est vrai que dans l'absolu... a partir du moment ou nous on arrive a afficher quelque chose à l'écrant... il y aura toujours moyen de récupéré ce que l'on voi... même si au final le bot devait plus ressemblé à un navigateur qu'autre chose il arriverait a voir ce qui est afficher (ou n'est pas afficher).

                        Donc il est vrai que dans le fond cela ne sert a rien de s'amuser à trouver un moyen compliquer pour ne pas intercepter le captchat.

                        Le mieux serai encore d'avoir une immense base de donnnées d'énnigme simple du genre "quel est la couleur du cheval blanc de napoléon ?"...
                        • Partager sur Facebook
                        • Partager sur Twitter
                          29 août 2009 à 17:54:41

                          Thulium, c'est bien cela que je ne comprends pas justement...

                          tiens regarde cette page

                          http://mgkday.biz/sdz/

                          image que c'et un captcha à la place. que peu faire le bot ? peut il lire directement l'image en elle même alors qu'elle na pas de lien directe, ni n'est stockée dans le cache ou autre ?

                          • Partager sur Facebook
                          • Partager sur Twitter
                            29 août 2009 à 19:11:45

                            Sauf que avec firefox en faisant Outils->Information sur la page->Média... j'ai accès à l'image
                            • Partager sur Facebook
                            • Partager sur Twitter
                              29 août 2009 à 19:24:16

                              La source : oui je viens de voir cela

                              non mais c'est pas ultra ultra infaillible hein, d'ailleurs suffit d'envoyer le bon referer pour contourner la chose en allant sur loader.php, mais ca complique un peu la chose

                              bon on oublie ca pour le captcha :D

                              • Partager sur Facebook
                              • Partager sur Twitter
                                29 août 2009 à 19:31:03

                                Oep malheureusement... comme on l'a dis... tous ce qui arrive à l'écran peut être capturer...

                                Les seuls protection plus efficace que les autres sont le chronométrage, le fait d'empêcher de poster plus de 5 fois par heure sous la même ip (les chiffres c'est des exemple). Bien que sa n'empêchera pas le bot de passé sa le ralentira...
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  31 août 2009 à 19:37:06

                                  Citation : maxima


                                  Résultat :
                                  Premier résultat ( simple et pas très long à charger ) : Image utilisateur

                                  Second résultat : Image utilisateur

                                  Version finale : Image utilisateur



                                  J'ai décidé de vous montrer le code ^^
                                  Tout d'abord il faut savoir que ce script utilise cette librairie PEAR :
                                  http://pear.php.net/package/Image_3D

                                  <?php
                                  set_time_limit(0);
                                  
                                  function randChar($nombre = 6)
                                  {
                                  	return substr(str_shuffle("ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789"), 0, $nombre);
                                  }
                                  
                                  // Configuration
                                  define('DISPLAY', true);
                                  define('FILE_OUTPUT', 'Image.png');
                                  
                                  define('DISPLAY_REPERE', false);
                                  
                                  // Lettre
                                  define('KEY_LENGHT', 4);
                                  define('PATH_LETTRE', 'lettre/');
                                  
                                  define('MIN_COLOR_LETTRE', 100);
                                  define('MIN_COLOR_LETTRE_TOTAL_MINIMUM', 200);
                                  
                                  define('ROTATION_VARIATION_MAX', 30);
                                  
                                  define('ROTATION_VARIATION_MAX_X', 50);
                                  define('ROTATION_VARIATION_MAX_Y', 50);
                                  define('ROTATION_VARIATION_MAX_Z', 30);
                                  
                                  define('MIN_TAILLE_LETTRE', 50);
                                  define('MAX_TAILLE_LETTRE', 80);
                                  
                                  define('MIN_DEPLACEMENT_VERTICAL', -2);
                                  define('MAX_DEPLACEMENT_VERTICAL', 6);
                                  
                                  // Fond
                                  define('ACTIVE_FOND', false);
                                  
                                  if(ACTIVE_FOND)
                                  {
                                  	define('LIGNE_NUMBER', 20);
                                  	define('CUBE_NUMBER', mt_rand(1,5));
                                  	define('SPHERE_NUMBER', mt_rand(1,5));
                                  }
                                  else
                                  {
                                  	define('LIGNE_NUMBER', 0);
                                  	define('CUBE_NUMBER', 0);
                                  	define('SPHERE_NUMBER', 0);
                                  }
                                  
                                  // Ligne
                                  define('LIGNE_BORDER_Y', 200); // max & min
                                  define('LIGNE_MIN_COLOR', 100);
                                  
                                  // Cube
                                  define('CUBE_SIZE_MIN', 5);
                                  define('CUBE_SIZE_MAX', 20);
                                  define('CUBE_MIN_COLOR', 100);
                                  define('CUBE_ROTATION_MAX', 180);
                                  define('CUBE_BORDER_X', 120);
                                  define('CUBE_BORDER_Y', 50);
                                  define('CUBE_Z', 10);
                                  
                                  // Sphere
                                  define('SPHERE_DETAIL', 5);
                                  define('SPHERE_MIN_RADIUS', 1);
                                  define('SPHERE_MAX_RADIUS', 10);
                                  define('SPHERE_MIN_COLOR', 100);
                                  define('SPHERE_BORDER_X', 120);
                                  define('SPHERE_BORDER_Y', 50);
                                  define('SPHERE_Z', 10);
                                  
                                  $keyRendered = randChar(KEY_LENGHT);
                                  
                                  // Librairie 3D
                                  include('Image/3D.php');
                                  
                                  // Création de l'image
                                  $world = new Image_3D();
                                  $world->setColor(new Image_3D_Color(10, 10, 10));
                                  
                                  // Ligne de fond
                                  function createLigne($y1, $y2, $color)
                                  {
                                  	global $world;
                                  	
                                  	$ligne = $world->createObject('Polygon', array(
                                  	new Image_3D_Point(-400,$y1,0),
                                  	new Image_3D_Point(400,$y2,0),
                                  	new Image_3D_Point(400,$y2+1,0),
                                  	new Image_3D_Point(-400,$y1+1,0),
                                  	));
                                  	$ligne->setColor($color); 
                                  }
                                  
                                  for($i = 0; $i < LIGNE_NUMBER; $i++)
                                  {
                                  	createLigne(mt_rand(-LIGNE_BORDER_Y,LIGNE_BORDER_Y), mt_rand(-LIGNE_BORDER_Y,LIGNE_BORDER_Y), new Image_3D_Color(mt_rand(LIGNE_MIN_COLOR,255), mt_rand(LIGNE_MIN_COLOR,255), mt_rand(LIGNE_MIN_COLOR,255)));
                                  }
                                  	
                                  	
                                  // Cube de Fond
                                  for($i = 0; $i < CUBE_NUMBER; $i++)
                                  {
                                  	$size = mt_rand(CUBE_SIZE_MIN, CUBE_SIZE_MAX);
                                  	$cube = $world->createObject('cube', array($size, $size, $size));
                                  	$cube->setColor(new Image_3D_Color(mt_rand(CUBE_MIN_COLOR,255), mt_rand(CUBE_MIN_COLOR,255), mt_rand(CUBE_MIN_COLOR,255))); 
                                  	$cube->transform($world->createMatrix('Rotation', array(mt_rand(0,CUBE_ROTATION_MAX), mt_rand(0,CUBE_ROTATION_MAX), mt_rand(0,CUBE_ROTATION_MAX))));
                                  	$cube->transform($world->createMatrix('Move', array(mt_rand(-CUBE_BORDER_X,CUBE_BORDER_X), mt_rand(-CUBE_BORDER_Y,CUBE_BORDER_Y), CUBE_Z)));
                                  }
                                  
                                  // Sphere
                                  for($i = 0; $i < SPHERE_NUMBER; $i++)
                                  {
                                  	$sphere = $world->createObject('Sphere', array('r' => mt_rand(SPHERE_MIN_RADIUS, SPHERE_MAX_RADIUS) , 'detail' => SPHERE_DETAIL));
                                  	$sphere->setColor(new Image_3D_Color(mt_rand(SPHERE_MIN_COLOR,255), mt_rand(SPHERE_MIN_COLOR,255), mt_rand(SPHERE_MIN_COLOR,255))); 
                                  	$sphere->transform($world->createMatrix('Move', array(mt_rand(-SPHERE_BORDER_X,CUBE_BORDER_X), mt_rand(-SPHERE_BORDER_Y,SPHERE_BORDER_Y), SPHERE_Z)));
                                  }
                                  
                                  // Lettre
                                  for($i = 0; $i < KEY_LENGHT; $i++)
                                  {
                                  	$text = $world->createObject('3ds', PATH_LETTRE . $keyRendered{$i} .'.3ds');
                                  
                                  	$color = array(mt_rand(MIN_COLOR_LETTRE, 255), mt_rand(MIN_COLOR_LETTRE, 255), mt_rand(MIN_COLOR_LETTRE, 255));
                                  	
                                  	if($color[0] < MIN_COLOR_LETTRE_TOTAL_MINIMUM && $color[1] < MIN_COLOR_LETTRE_TOTAL_MINIMUM && $color[2] < MIN_COLOR_LETTRE_TOTAL_MINIMUM)
                                  		$color[mt_rand(0,2)] = mt_rand(MIN_COLOR_LETTRE_TOTAL_MINIMUM, 255);
                                  	
                                  	// Position de la lettre en x
                                  	$x = $i - 1.5;
                                  	
                                  	// Calcul pour que, apres la rotation selon Z, la lettre soit a sa position initial dans son repere ( X=0, Y=0 )
                                  	$angle_z = mt_rand(-ROTATION_VARIATION_MAX_Z, ROTATION_VARIATION_MAX_Z);
                                  	$deplacement_y = round(sin(deg2rad((float)$angle_z))*$x, 1);
                                  	
                                  	$deplacement_x = round((1.0-cos(deg2rad((float)$angle_z)))*$x, 1);
                                  	
                                  	// Deplacement Horizontal
                                  	$deplacement_y -= mt_rand(MIN_DEPLACEMENT_VERTICAL, MAX_DEPLACEMENT_VERTICAL)/10;	
                                  	
                                  	
                                  	$text->transform($world->createMatrix('Move', array($x - $deplacement_x, $deplacement_y, 0)));
                                  	
                                  	
                                  	// Transformation : on tourne la lettre aléatoirement
                                  	$text->transform($world->createMatrix('Rotation', array(180, 0, 0)));
                                  	$text->transform($world->createMatrix('Rotation', array(mt_rand(-ROTATION_VARIATION_MAX_X,ROTATION_VARIATION_MAX_X), mt_rand(-ROTATION_VARIATION_MAX_Y, ROTATION_VARIATION_MAX_Y), $angle_z)));
                                  	
                                  	// Taille aléatoire aussi
                                  	$scale = mt_rand(MIN_TAILLE_LETTRE, MAX_TAILLE_LETTRE);
                                  	$text->transform($world->createMatrix('Scale', array($scale, $scale, $scale)));
                                  	
                                  	// Dans une couleur aussi aléatoire
                                  	$text->setColor(new Image_3D_Color($color[0], $color[1], $color[2])); 
                                  
                                  	// Image /!\ Fait a la va vite..pas cherché à comprendre le fonctionnement /!\
                                  	$light1 = $world->createLight('Light', array(200,200,200));
                                  	$light1->setColor(new Image_3D_Color(255, 255, 255));
                                  }
                                  
                                  if(DISPLAY_REPERE) // Debugage : Affichage du repere
                                  {
                                  	// Y = rouge
                                  	$cube = $world->createObject('cube', array(2, 500, 2));
                                  	$cube->setColor(new Image_3D_Color(255, 0, 0)); 
                                  	// X = bleu
                                  	$cube = $world->createObject('cube', array(500, 2, 2));
                                  	$cube->setColor(new Image_3D_Color(0, 0, 255)); 
                                  	// Z = vert
                                  	$cube = $world->createObject('cube', array(2, 2, 500));
                                  	$cube->setColor(new Image_3D_Color(0, 255, 0)); 	
                                  }
                                  
                                  $world->setOption(Image_3D::IMAGE_3D_OPTION_BF_CULLING, true);
                                  $world->setOption(Image_3D::IMAGE_3D_OPTION_FILLED, true);
                                  
                                  // rendu
                                  $world->createRenderer('perspectively');
                                  $world->createDriver('GD');
                                  $world->render(300, 100, FILE_OUTPUT);
                                  
                                  // affichage
                                  if(DISPLAY)
                                  {
                                  	header("Content-type: image/bmp");
                                  	readfile(FILE_OUTPUT);
                                  }
                                  
                                  ?>
                                  


                                  Et oui comme vous le voyez le script importe des fichiers .3ds, ce qui explique sa lenteur ! En effet , la librairie nous propose un objet "lettre" mais celles-ci sont vraiment moches ! ( composé d'un ensemble de petit cube tout laid :p )

                                  Vous pouvez obtenir les fichiers lettre .3ds à cette adresse :
                                  http://ns3.freeheberg.com/~maxima/captcha/lettre/

                                  Et l'adresse de mon captcha ( en mode light pour le pauvre serveur de freeheberg xD ) :
                                  http://ns3.freeheberg.com/~maxima/captcha/captcha.php

                                  PS : si quelqu'un apporte une apporte une amélioration, j'aimerais bien en être informé !
                                  PS 2 : n'hesitez pas à critiquer le code :p
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    30 septembre 2009 à 22:54:08

                                    Je remonte un peut ce topic très intéressante car j'aimerais avoir votre avis sur un captcha que je viens de faire.
                                    il est relativement simple il suffit de trouver les lettres et chiffres coloré.
                                    Il y a plusieurs fonts différentes, une rotation, une position et une couleur tous ça de façon aléatoire, le nombre de caractères a trouver varie également.
                                    Image utilisateur

                                    Donc voila que vaut il a votre avis ?
                                    Avez vous des remarques, améliorations ou suggestions a me proposé ?
                                    Merci d'avance pour vos commentaires.
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Anonyme
                                      1 octobre 2009 à 3:53:19

                                      Citation : Jeremie78

                                      Illisible ...


                                      Un peu fort quand même.. ça se lis plutôt bien... et il est graphiquement simpa.
                                      Après je ne pense pas qu'il soit très efficace.
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Anonyme
                                        1 octobre 2009 à 17:09:17

                                        La lisibilité dépend de la police mais globalement c'est sympa.
                                        Par contre niveau efficacité je suis pas sûr car le robot n'a qu'à trouver les lettres colorées, le reste n'est que gris ou blanc...
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          1 octobre 2009 à 22:28:44

                                          Vous me conseiller de modifier quoi pour augmenter l'efficacité sans trop diminuer la lisibilité.

                                          Coloré les lettres du fond ?
                                          Image utilisateur
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                          Anonyme
                                            2 octobre 2009 à 17:56:09

                                            le point positif c'est que tu as des polices assez différente, l'idéal est à mon avis de créer soi-même ses polices afin que ça soit le moins répandus.
                                            Par contre une des protection très efficace est d'ajouter des traits de la même couleur que les lettres afin que le robot essaye de lire le trait comme une lettre.
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              2 octobre 2009 à 18:54:48

                                              Alors pour les traits j'ai tester et finalement je trouve que ça diminue beaucoup la lisibilité et d'après tous ce que j'ai lu notamment dans ce topic ça ne gêne pas beaucoup les bots.

                                              Je suis entrain d'étudier pour animer les lettres mais je pense que je l'ajouterais plus tard c'est pas ma priorité.
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                2 octobre 2009 à 22:58:05

                                                Et ton code source est accessible? car il m'intéresse vraiment, car mine de rien je le trouve très jolie comme captcha.
                                                Sinon pour un petit site, il reste efficace :)
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  3 octobre 2009 à 13:44:25

                                                  Très sympa lunariel, je le trouve très beau, tu peux nous faire partager ton code ?
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Président de DealerDeSons.com.

                                                  [Galerie] Réalisation de CAPTCHAs

                                                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                  • Editeur
                                                  • Markdown