[AJAX] Validation de form en ajax : captcha non reconnu

CW76 · 21 Juin 2011

Bonjour à tous,

J'ai un formulaire dont les champs (adresse email et code antispam) sont validés en AJAX. La vérif du champ email se passe très bien...
Le problème est que, même si le code antispam recopié est conforme à l'image captcha affichée, ça me renvoie mon msg d'erreur "code incorrect".

Voilà le code du form :

Code:

<div id="form">
<form method="post" action="" enctype="multipart/form-data" onsubmit="validForm();return false;">
  <fieldset>
    <label for="email">Adresse email :</label>
    <input type="text" name="email" id="email" size="30" /><br />			
    <label for="antispam">Code anti-spam :</label>
    <a onclick="actualiserCaptcha();" title="Si ce code vous parait illisible, cliquez sur l'image pour le changer...">
      <img src="antispam.php" id="img_antispam" />
    </a>
    <input type="text" id="antispam" size="10" />
    <input type="submit" id="confirmation" value="OK" />
</fieldset>
</form>
</div>

Voici le code pour la génération du captcha :

Code:

<?php
session_start();

if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/');

function getCode($length) {
	$chars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ';
	$rand_str = '';
	for ($i=0; $i<$length; $i++) {
		$rand_str .= $chars{ mt_rand( 0, strlen($chars)-1 ) };
	}
	return $rand_str;
}

$theCode = getCode(5);

$_SESSION['antispam'] = md5($theCode);

$char1 = substr($theCode,0,1);
$char2 = substr($theCode,1,1);
$char3 = substr($theCode,2,1);
$char4 = substr($theCode,3,1);
$char5 = substr($theCode,4,1);

$fonts = glob('rssrcs/polices/*.ttf');

$image = imagecreatefrompng('antispam.png');

$colors=array (	imagecolorallocate($image, 200,28,26),
				imagecolorallocate($image, 44,184,193),
				imagecolorallocate($image, 169,11,175),
				imagecolorallocate($image, 252,161,3),
				imagecolorallocate($image, 192,207,11) );

function random($tab) {
	return $tab[array_rand($tab)];
}

imagettftext($image, 16, -10, 5, 25, random($colors), ABSPATH .'/'. random($fonts), $char1);
imagettftext($image, 19, 20, 25, 25, random($colors), ABSPATH .'/'. random($fonts), $char2);
imagettftext($image, 15, -35, 40, 25, random($colors), ABSPATH .'/'. random($fonts), $char3);
imagettftext($image, 17, 25, 60, 25, random($colors), ABSPATH .'/'. random($fonts), $char4);
imagettftext($image, 15, -15, 75, 25, random($colors), ABSPATH .'/'. random($fonts), $char5);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>

Voici la fonction AJAX de validation du form :

Code:

function validForm() {
	var xhr = null;
	var donnees = "";
	xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			reponse = xhr.responseText;
			document.getElementById('div_contenu').innerHTML = reponse;
		}
	}
	xhr.open("POST","verif.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	adr_email = document.getElementById('email').value;
	code_captcha = document.getElementById('antispam').value;
	donnees="adrEmail="+adr_email+"&captcha="+code_captcha;
	xhr.send(donnees);
}

Et enfin le fichier verif.php (appelé par AJAX) :

Code:

<?php
require "mesfonctions.php";

header('Content-Type: text/html; charset=utf-8');
	echo '<div id="form">';
			
	if ( ($_POST['adrEmail']=="") || (is_null($_POST['adrEmail'])) || (empty($_POST['adrEmail'])) ) {
		echo '<h3>OUPS... Vous n\'avez pas saisi votre adresse email !</h3>
			<form method="post" action="" enctype="multipart/form-data" onsubmit="validForm();return false;">
				<fieldset>
					<label for="email">Adresse email :</label><input type="text" name="email" id="email" size="30" onfocus="javascript:this.value=\'\'" value="Votre adresse email" /><br />			
					<label for="antispam">... Code anti-spam :</label><a onclick="actualiserCaptcha();" title="Si ce code vous parait illisible, cliquez sur l\'image pour le changer..."><img src="antispam.php" id="img_antispam" /></a>
					<input type="text" name="antispam" id="antispam" size="10" />
					<input type="submit" name="confirmation" id="confirmation" value="OK" />
				</fieldset>
			</form>';
	}
	else if (!verifEmail($_POST['adrEmail'])) {
		echo '<h3>OUPS... L\'adresse email que vous avez saisie n\'est pas valide !</h3>
			<form method="post" action="" enctype="multipart/form-data" onsubmit="validForm();return false;">
				<fieldset>
					<label for="email">Adresse email :</label><input type="text" name="email" id="email" size="30" onfocus="javascript:this.value=\'\'" value="Votre adresse email" /><br />			
					<label for="antispam">... Code anti-spam :</label><a onclick="actualiserCaptcha();" title="Si ce code vous parait illisible, cliquez sur l\'image pour le changer..."><img src="antispam.php" id="img_antispam" /></a>
					<input type="text" name="antispam" id="antispam" size="10" />
					<input type="submit" name="confirmation" id="confirmation" value="OK" />
				</fieldset>
			</form>';
	}
	else if ( ($_POST['captcha']=="") || (is_null($_POST['captcha'])) || (empty($_POST['captcha'])) ) {
		$rappelEmail = $_POST['adrEmail'];
		echo '<h3>OUPS... Vous n\'avez pas recopié le code anti-spam !</h3>
			<form method="post" action="" enctype="multipart/form-data" onsubmit="validForm();return false;">
				<fieldset>
					<label for="email">Adresse email :</label><input type="text" name="email" id="email" size="30" onfocus="javascript:this.value=\'\'" value="'.$rappelEmail.'" /><br />			
					<label for="antispam">... Code anti-spam :</label><a onclick="actualiserCaptcha();" title="Si ce code vous parait illisible, cliquez sur l\'image pour le changer..."><img src="antispam.php" id="img_antispam" /></a>
					<input type="text" name="antispam" id="antispam" size="10" />
					<input type="submit" name="confirmation" id="confirmation" value="OK" />
				</fieldset>
			</form>';
	}
	else if ( md5(strtoupper($_POST['captcha']))!=$_SESSION['antispam'] ) {
		$rappelEmail = $_POST['adrEmail'];
		echo '<h3>OUPS... Le code anti-spam que vous avez recopié n\'est pas correct ! !</h3>
			<form method="post" action="" enctype="multipart/form-data" onsubmit="validForm();return false;">
				<fieldset>
					<label for="email">Adresse email :</label><input type="text" name="email" id="email" size="30" onfocus="javascript:this.value=\'\'" value="'.$rappelEmail.'" /><br />			
					<label for="antispam">... Code anti-spam :</label><a onclick="actualiserCaptcha();" title="Si ce code vous parait illisible, cliquez sur l\'image pour le changer..."><img src="antispam.php" id="img_antispam" /></a>
					<input type="text" name="antispam" id="antispam" size="10" />
					<input type="submit" name="confirmation" id="confirmation" value="OK" />
				</fieldset>
			</form>';
	}
	else {
		//script de traitement du form validé...

	}
	echo '</div>';
?>

J'ai testé la valeur de $_SESSION['antispam'] mais celle n'est pas définie (!isset). Le pb vient donc de là, mais comment le résoudre, là je patauge complètement...

Merci beaucoup pour votre aide
@+

spout · 21 Juin 2011

CW76 a dit:
Et enfin le fichier verif.php (appelé par AJAX) :

Je ne vois pas de session_start() dans ce fichier ?

Eric 2A · 21 Juin 2011

Salut,

Il y a un autre souci au niveau des variables.

Pour récupérer le code saisie, la variable $_POST['captcha'] est utilisée, alors que l'attribut du champ correspondant est soit absent (dans le formulaire principal) soit égal à "antispam" (dans la page verif.php).

Faire...

Code:

else if ( ($_POST['antispam']=="") || (is_null($_POST['antispam'])) || (empty($_POST['antispam'])) ) {

Code:

<input type="text" name="antispam" id="antispam" size="10" />

ou...

Code:

else if ( ($_POST['captcha']=="") || (is_null($_POST['captcha'])) || (empty($_POST['captcha'])) ) {

Code:

<input type="text" name="captcha" id="captcha" size="10" />

CW76 · 21 Juin 2011

Merci pour votre aide !

Spout : session_start() est lancé au début de mon fichier php qui génère le captcha

Eric 2A : c'est vrai que c'est pas élégant de changer tout le temps de nom de variable, mais je ne crois pas que le souci vienne de là car : $_POST['antispam'] est récupéré sous le nom de variable, 'captcha' dans ma fonction AJAX, laquelle transmet cette variable en paramètre au fichier verif.php sous $_POST['code_captcha']... Je fais exactement la même chose avec le champ Email, et la variable passe impec du début à la fin.

Je continue de patauger ;-(

En tt cas merci
@+

YoyoS · 21 Juin 2011

Sinon tu fais un formulaire construit en javascript only sans captcha. A pas de spam et tu fais pas chier tes visiteurs

C'est ti pas bo ?

MikeR · 22 Juin 2011

Bonsoir,
il me semble que ton AJAX renvoie au serveur :

Code:

code_captcha

qui est égal à

Code:

document.getElementById('antispam').value;

c'est à dire la chaine de cararctère entrée par l'utilisateur.
Et tu fais la comparaison suivante :

Code:

( md5(strtoupper($_POST['captcha']))!=$_SESSION['antispam'] )

alors que on a :

Code:

$_SESSION['antispam'] = md5($theCode);

Moralité : d'un côté le md5 sur la chaine, de l'autre le md5 sur la chaine convertie en majuscules....

Solution : tu rajoutes un "strtoupper" dans le calcul de la référence :

Code:

$_SESSION['antispam'] = md5(strtoupper($theCode));

CW76 · 22 Juin 2011

Merci MikeR, mais non ça ne fonctionne pas plus avec ta suggestion (strtoupper).
Je pensais aussi qu'il y avait une sorte de conflit entre les variables, vu que la session et le champ où on tape le code captcha portaient le même nom "antispam"... C'est pas ça non plus !
J'ai testé l'existence de ma session : if (isset($_SESSION['antispam'])) {echo "true";} else {echo "false";} et ça me renvoie false, donc pas de session.
J'ai oublié de préciser une chose importante : j'ai un petit form rapide dans ma page index.php, dans lequel l'utilisateur entre son adresse email. Quand il soumet ce form, j'ai une fonction JQuery qui teste la syntaxe de l'email saisi, puis injecte mon fameux form email+captcha objet de mes soucis (dont le code html est contenu dans le fichier form_captcha.php) dans une div (ma_div) de ma page index.php :

Code:

$(document).ready(function () {
    $("#bouton_form").click(function() {
        var adresse_email = $('#email').attr('value');
        if (adresse_email == "") {
			alert('Vous n\'avez pas saisi votre adresse email !');
		}
		else if (!verifSyntaxeEmail(adresse_email)) {
			alert('L\'adresse email saisie n\'a pas un format valide !');
		}
		else {
			changeContenu(form_captcha.php?adr='+adresse_email,'ma_div');
		}
		
        return false;
    });
});

Ce second form, une fois soumis, teste le captcha mais aussi teste plus en profondeur la validité de l'adresse (domaine valide etc.), vérification qui nécessite une action côté serveur.
C'est un brin compliqué, mais ça me permet d'avoir un mini-form dans ma page d'accueil (qui ne devait pas tenir trop de place), et si l'utilisateur entre son email, il arrive instantanément, sans rechargement de page, sur ce second form email+captcha qui lui permet de confirmer son action (en l'occurence son abonnement à une newsletter) après avoir vérifié l'email saisi et recopié le code captcha. J'ai fait de même avec le désabonnement : sur le même petit form rapide de la page d'accueil, j'ai aussi un bouton "désabonnement", qui affiche un autre second form qui sert de demande de confirmation de désabonnement.

Je pense donc qu'à cause de cette injection, dans index.php, du second form en JS (donc index.php n'est pas rechargée, mais c'est une contrainte que je dois respecter), ma session n'est pas créée. Par contre je n'ai aucun msg d'erreur quand mon code antispam.php est généré (création du captcha) et qui prévoit un session_start(). J'ai tenté de mettre ce session_start() en tête de mon fichier index.php, mais ça ne fonctionne pas plus...

Voilou...
Merci @+