Formulaire sécurisé ?

mendoz · 04/11/2007, 14h04

Bonjour,

Ayant besoin d'un formulaire de commande, j'ai "bidouiller" 2 scripts pour n'en faire qu'un ; mais avant d'aller plus loin, j'ai un doute sur la sécurité du script.

Je sais que le code n'est pas très académique, mais mes compétences sont très limités.

page avec formulaire de commande

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<form name="form1" Method="POST" >

<div id="formto">
<div id="form01">
		Cuvée<br />
		<br />
		Grenache, rouge<br />
		Carignan, rouge<br />
		Syrah, rouge<br />
		Syrah, rosé<br />

</div>

<div id="form02">
		Prix unitaire<br />
		<br />
	<input type="text" class="col1" name="pu1" value="7.5" onChange="champ_verrouille(this,7.5)"> €<br />
	<input type="text" class="col1" name="pu2" value="9" onChange="champ_verrouille(this,9)"> €<br />
	<input type="text" class="col1" name="pu3" value="13" onChange="champ_verrouille(this,13)"> €<br />
	<input type="text" class="col1" name="pu4" value="3.5" onChange="champ_verrouille(this,3.5)"> €<br />
</div>

<div id="form03">
		&nbsp; &nbsp; &nbsp; &nbsp; Quantité<br />
		<br />
		<input type="text" class="col2" name="q1" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q2" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q3" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q4" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
</div>
<div id="form04">
		Prix total<br />
		<br />
		<input type="text" class="col3" name="p1" readonly> €<br />
		<input type="text" class="col3" name="p2" readonly> €<br />
		<input type="text" class="col3" name="p3" readonly> €<br />
		<input type="text" class="col3" name="p4" readonly> €<br />
</div>

<div id="formfrais">Frais de port<input type="text" class="col1" name="pu8" value="30" onChange="champ_verrouille(this,30)" readonly> €</p></div>
<div id="formtotal">Total TTC<input type="text" class="col4" name="total" readonly> €	</p></div>
	<p class="formsoumettre"><input type="submit" class="formsoumettre" value="Valider" onClick="soumettre_form()"><input class="formsoumettre" type="reset" value="Effacer" ></p>

qui appelle la page script.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* ----------------------------------- commande ------------------------------------*/

  <!--
  
    function test_champ(champ) {
      expr_reg = /^\d*$/ ;
      // Ci-dessus : expression régulière qui match 0,1 ou plusieurs chiffres ;
      // de cette façon on vérifie que l'utilisateur entre bien un nombre entier
      if ( expr_reg.test(champ.value) ) {
        // c'est bien un nombre entier
        calcul_form() ;
      } else {
        // ce n'est pas un nombre entier
        alert ("Ce n'est par un nombre entier !") ;
        document.form1.elements[champ.name].value = "" ;   // on efface la valeur entrée erronée
        calcul_form() ;
      }
    }
    
    function calcul_form() {
      // le with ci-dessous permet d'abréger "document.forms.form1.p1.value" en "p1.value"
      with (document.forms.form1) {
        p1.value = q1.value * pu1.value ;
        p2.value = q2.value * pu2.value ;
        p3.value = q3.value * pu3.value ;
        p4.value = q4.value * pu4.value ;
        total.value = p1.value *1 + p2.value *1 + p3.value *1 + p4.value *1   +30 ;
           // Ai mis les *1 ci-dessus afin que les + fassent une somme arithmétique
           // et non pas une concaténation de chaînes de caractères
      }
    }
  
    function champ_verrouille(champ,valeur) {
           // Remarque : en HTML 4.0, il existe un attribut "read-only" pour la
           //            balise <INPUT TYPE=text> qui interdira de modifier un champ
           //            mais ce que je fais ci-dessous est beaucoup plus sûr !!!
      // alert ("Ce champ de peut pas être modifié !") ;
      document.form1.elements[champ.name].value = valeur ;   // on remet "valeur" initiale dans champ
    }
    
    function soumettre_form() {
      if ( document.forms.form1.total.value == 0 ) {
        alert ("Vous n'avez rien commandé !\n => commande non soumise") ;
        return false ;
      } else {
        // Les 2 lignes ci-dessous devraient être activées pour réellement passer le form. à script CGI
        // document.form1.method = "POST" ;
        // document.form1.action = "http://dgrwww.epfl.ch/cgi-bin/uncgi/mail_form.sh?mailto=Jean-Daniel.Bonjour@epfl.ch" ;
		document.write ("<html><head><title></title>		<link href=\"style/contact.css\" type=\"text/css\" rel=\"stylesheet\"/></head><body><div id=\"contact\"><div id=\"formulaire\"><h3>Resultat de la commande :</h3><form method=\"post\" action=\"03_commande_envoi.php\"><p><textarea name=\"message\" readonly cols=30 rows=5> \n  Grenache, rouge" + 
			document.forms.form1.q1.value + " bouteille(s) ; soit : "+ document.forms.form1.p1.value + " € \n Carignan, rouge	" + 
			document.forms.form1.q2.value + " bouteille(s) ; soit : "+ document.forms.form1.p2.value + " € \n Syrah, rouge " + 
			document.forms.form1.q3.value + " bouteille(s) ; soit : "+ document.forms.form1.p3.value + " € \n Syrah, rosé " + 
			document.forms.form1.q4.value + " bouteille(s) ; soit : "+ document.forms.form1.p4.value + " € \n  " + 
			document.forms.form1.total.value + " € </textarea></p><h4>E-Mail<br /><input type=\"text\" name=\"email\" id=\"email\" size=30><br /></h4><h4>Nom<br /><input type=\"text\" name=\"nom\" id=\"nom\" size=30><br /></h4><h4>Adresse<br /><input type=\"text\" name=\"rue\" id=\"email\"><br />Code postal - Ville<br /><input type=\"text\" name=\"code\" id=\"email\"><br /></h4><h5>Merci d'envoyer un chèque à l'ordre de <br /><h3 class=\"formenvoyer\"><input type=\"submit\" class=\"formenvoyer\" value=\"Envoyer\"></h3></form></div></div></body></html>" ) ;
		document.writeln(" ");
        document.close () ;
        return true ;
      }
    }
        
  // -->

et la dernière page de validation : 03_commande_envoi.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
	<div id="contact">
		<div id="formulaire">
<?php 

$msg .= "E-mail:\t$email\n";
$msg = "Nom:\t$nom\n";
$msg .= "Adresse:\t$rue\n";
$msg .= "Adresse:\t$code\n";
$msg .= "Message:\t$message\n\n";

$recipient = "monmail@aaa.fr";
$subject = "{Commande site web}";

$mailheaders = "From: <> \n";
$mailheaders .= "Reply-To: $CP\n\n";

mail($recipient, $subject, $msg, $mailheaders);

echo "<h1 align=center>Commande envoyée<br /></h1>";
echo "<br />";
echo "<h5>Votre commande à bien été prise en compte ; vous allez recevoir rapidement un mail de confirmation.</h5>";
echo "<br />";
echo "<h3>Elle sera envoyé à la réception de votre chèque.</h3>";
echo "<br />";
echo "<h5>Merci pour votre confiance.</h5>";
echo "<br />";
echo "<br />";
echo "<br />";

?> 
	</div>		
	</div>

Merci d'avance

Deimos_ · 04/11/2007, 15h36

Salut,

On ne peut pas parler de concept de sécurité dans ton formulaire, car lorsque l'on effectue le filtrage des valeurs des champs d'un formulaire avec du JavaScript, il n'y en a justement pas.
Effectivemnet le JavaScript s'exécutant côté client, rien n'empêche quelqu'un de télécharger la page HTML chez lui, de changer ton JavaScript (donc d'enlever les protections readonly / filtrage / etc) et de poster ça pour que ton script PHP reçoive des données fausses (on peut sans problème diminuer le prix des produits, etc : même si tu t'en rendras compte en recevant le mail, ça reste donc inutile et ça demande même une revérification à chaque réception de commande par mail).

Afin de rendre ton script sécurisé, il faudrait que tu fasses tous les contrôles côté serveur. Donc filtrage de variable pour vérifier si c'est des entiers, calcul du prix total, etc => côté serveur.
Rien ne t'empêche de le laisser également côté client, mais ça ne sert en aucun cas de sécurité, mais uniquement ... à but ergonomique / esthétique.

De plus laisser en commentaire ce genre de lien : "http://dgrwww.epfl.ch/cgi-bin/uncgi/mail_form.sh?mailto=Jean-Daniel.Bonjour@epfl.ch" n'est pas très recommandé, surtout si le script CGI qui envoie le mail est tout aussi faillible que le reste ... ce qui pourrait compromettre toute la sécurité du serveur.

Autre remarque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
           // Remarque : en HTML 4.0, il existe un attribut "read-only" pour la
           //            balise <INPUT TYPE=text> qui interdira de modifier un champ
           //            mais ce que je fais ci-dessous est beaucoup plus sûr !!!

C'est totalement faux pour les raisons que j'ai cité avant : on peut modifier côté client le JavaScript, et rien n'interdit de modifier la valeur du champ. Il faut obligatoirement la définir côté serveur.

Dernière remarque : il y a une faille dans le code code PHP qui envoie le mail : il faut vérifier le contenu des variables afin d'éviter qu'il y ai des caractères de retour chariot ou fin de ligne, car ces derniers permettraient une injection d'entêtes SMTP et donc d'envoyer des mails à d'autres destinataires, et ça peut s'avérer très dangereux.

Deimos

mendoz · 04/11/2007, 16h07

Merci de ta réponse Deimos_

Donc si j'ai bien compris il y a 2 choses :
- le problème javascript, où la personne peut modifier les prix
---> bon ca il suffit d'etre attentif et de recalculer chaque commande

- une faille dans le code code PHP qui envoie le mail qui celle la peut etre plus dangereuse
---> j'essai de corriger et poster ça

Merci

Deimos_ · 04/11/2007, 16h14

Salut,

Oui il "suffit" d'être attentif et recalculer, mais si c'est pour toujours tout recalculer, à quoi bon vouloir automatiser la chose en JavaScript plutot qu'en PHP ?

De rien pour la réponse =)

Deimos

mendoz · 27/11/2007, 06h13

Salut

bon j'ai modifié pas mal de choses :

page avec formulaire de commande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
		<div id="formulaire">
  
<form name="form1" action="commande_envoi.php" Method="POST" >

<div id="formto">
<div id="form01">
		Cuvée<br />
		<br />
		Grenache, rouge<br />
		Carignan, rouge<br />
		Syrah, rouge<br />
		Syrah, rosé<br />
		Carignan<br />

</div>

<div id="form02">
		Prix unitaire<br />
		<br />
	<input type="text" class="col1" name="pu1" value="11" onChange="champ_verrouille(this,7.5)"> €<br />
	<input type="text" class="col1" name="pu2" value="12" onChange="champ_verrouille(this,9)"> €<br />
	<input type="text" class="col1" name="pu3" value="13" onChange="champ_verrouille(this,13)"> €<br />
	<input type="text" class="col1" name="pu4" value="16" onChange="champ_verrouille(this,3.5)"> €<br />
	<input type="text" class="col1" name="pu5" value="45" onChange="champ_verrouille(this,3.5)"> €<br />
</div>

<div id="form03">
		&nbsp; &nbsp; &nbsp; &nbsp; Quantité<br />
		<br />
		<input type="text" class="col2" name="q1" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q2" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q3" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q4" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
		<input type="text" class="col2" name="q5" value="0" onFocus="this.value=''" maxlength=2 onBlur="test_champ(this)"> bouteille(s) 
</div>
<div id="form04">
		Prix total<br />
		<br />
		<input type="text" class="col3" name="p1" readonly> €<br />
		<input type="text" class="col3" name="p2" readonly> €<br />
		<input type="text" class="col3" name="p3" readonly> €<br />
		<input type="text" class="col3" name="p4" readonly> €<br />
		<input type="text" class="col3" name="p5" readonly> €<br />
</div>

<div id="formfrais">Frais de port<input type="text" class="col1" name="pu8" value="30" onChange="champ_verrouille(this,30)" readonly> €</p></div>
<div id="formtotal">Total TTC<input type="text" class="col4" name="total" readonly> €	</p></div>
	<p ><input class="formsoumettre"type="submit" name="Submit" value="Valider">   
<input class="formsoumettre" type="reset" value="Effacer" ></p>
</form>
</div>

le fichier commande_envoi.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
		<div id="formulaire">

<?php
$q1 = $_POST['q1'] ;
$q2 = $_POST['q2'] ;
$q3 = $_POST['q3'] ;
$q4 = $_POST['q4'] ;
$q5 = $_POST['q5'] ;
$p1 = $_POST['p1'] ;
$p2 = $_POST['p2'] ;
$p3 = $_POST['p1'] ;
$p4 = $_POST['p4'] ;
$p5 = $_POST['p5'] ;
$total = $_POST['total'] ;
?> 
<form action="commande_ok.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire"  onSubmit="return check();">
 
<!--
sur chaqu'un des champs nous appelons la fonction qui va rétablir la couleur initiale 
--> 

			 <p><label for="nom">Nom</label><input id="nom" name="nom" type="text" onKeyUp="javascript:couleur(this);"> </p>
			 <p><label for="email">Email</label><input id="email" name="mail" type="text" onKeyUp="javascript:couleur(this);" ></p>
			 <p><label for="email">Adresse</label><input id="adresse" name="adresse" type="text" onKeyUp="javascript:couleur(this);"></p>
			 <p><label for="email">Code postal</label><input id="codepostal" name="codepostal" type="text" onKeyUp="javascript:couleur(this);"></p>
			 <p><label for="email">Ville</label><input id="ville" name="ville" type="text" onKeyUp="javascript:couleur(this);"></p>

			 <p><label for="commande">Commande</label><textarea  readonly id="commande" name="commande">
			 
Grenache, rouge : <?php echo($q1) ?> bouteille(s), soit :  <?php echo($p1) ?> €
Carignan, rouge : <?php echo($q2) ?> bouteille(s), soit :  <?php echo($p2) ?> € 
Syrah, rouge : <?php echo($q3) ?> bouteille(s), soit :  <?php echo($p3) ?> € 
Syrah, rosé : <?php echo($q4) ?> bouteille(s), soit :  <?php echo($p4) ?> € 
Carignan : <?php echo($q5) ?> bouteille(s), soit :  <?php echo($p5) ?> € 
Soit total de la commande : <?php echo($total) ?> euros 
			 
			 <?php echo htmlentities(stripslashes($_POST['Message']))?></textarea></p>
<h5>Merci d'envoyer un chèque à l'ordre de <span class="cheque">Domaine XXX </span> à cette adresse : </h5><h3>Ici </h3><h3>75000 Paris </h3><br />
			 
<input class="formsoumettre"type="submit" name="Submit" value="Envoyer">
</form>
</div>

le fichier commande_ok.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
		<div id="formulaire"><p>
 <?php
 $msg = "Nom:\t$nom\n";
 $msg .= "E-Mail:\t$mail\n";
 $msg .= "Code postal : \t$codepostal\n";
 $msg .= "Adresse : \t$adresse\n";
 $msg .= "Ville : \t$ville\n";
 $msg .= "Code postal : \t$codepostal\n";
 $msg .= "Commande : \t$commande\n";

 $recipient = "mail@mail.fr";
 $subject = "{Commande }";

 $mailheaders = "From: {xxx}<> \n";
 $mailheaders .= "Reply-To: $mail\n";
 $mailheaders .= "bcc: <xxx@xxx.fr> \n";

 mail($recipient, $subject, $msg, $mailheaders);



$nom = $_POST['nom'] ;
$prenom = $_POST['prenom'] ;
$mail = $_POST['mail'] ;

echo( "Votre nom: <b>".$nom."</b><br>\n" ) ;
echo( "Votre mail: <b>".$mail."</b><br>\n" ) ;
echo( "Votre adresse: <b>".$adresse."</b><br>\n" ) ;
echo( "Votre code postal: <b>".$codepostal."</b><br>\n" ) ;
echo( "Votre ville: <b>".$ville."</b><br>\n" ) ;
echo( "Commande: <b>".$commande."</b><br>\n" ) ;
?></p>
</form>

et le javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* ----------------------------------- commande ------------------------------------*/

  <!--
  
    function test_champ(champ) {
      expr_reg = /^\d*$/ ;
      if ( expr_reg.test(champ.value) ) {
        calcul_form() ;
      } else {
        alert ("Ce n'est par un nombre entier !") ;
        document.form1.elements[champ.name].value = "" ;   // on efface la valeur entrée erronée
        calcul_form() ;
      }
    }
    
    function calcul_form() {
      with (document.forms.form1) {
        p1.value = q1.value * pu1.value ;
        p2.value = q2.value * pu2.value ;
        p3.value = q3.value * pu3.value ;
        p4.value = q4.value * pu4.value ;
        p5.value = q5.value * pu5.value ;
        total.value = p1.value *1 + p2.value *1 + p3.value *1 + p4.value *1 + p5.value *1   +30 ;
      }
    }
  
    function champ_verrouille(champ,valeur) {
      document.form1.elements[champ.name].value = valeur ;  
    }

        

function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}

function check() {
	var msg = "";

if (document.formulaire.nom.value == "")	{
		msg += "Veuillez saisir votre nom\n";
		document.formulaire.nom.style.backgroundColor = "#F3C200";
	}
		if (document.formulaire.mail.value != "")	{
		indexAroba = document.formulaire.mail.value.indexOf('@');
		indexPoint = document.formulaire.mail.value.indexOf('.');
		if ((indexAroba < 0) || (indexPoint < 0))		{
		document.formulaire.mail.style.backgroundColor = "#F3C200";
			msg += "Le mail est incorrect\n";
		}
	}
	else	{
		document.formulaire.mail.style.backgroundColor = "#F3C200";
		msg += "Veuillez saisir votre mail.\n";
	}


if (document.formulaire.adresse.value == "")	{
		msg += "Veuillez saisir votre adresse\n";
		document.formulaire.adresse.style.backgroundColor = "#F3C200";
	}

if (document.formulaire.codepostal.value == "")	{
		msg += "Veuillez saisir votre code postal\n";
		document.formulaire.codepostal.style.backgroundColor = "#F3C200";
	}

if (document.formulaire.ville.value == "")	{
		msg += "Veuillez saisir votre ville\n";
		document.formulaire.ville.style.backgroundColor = "#F3C200";
	}

	if (msg == "") return(true);
	else	{
		alert(msg);
		return(false);
	}
}

Ca me convient mieux et je pense que pour l'envoi de mail c'est moins pire
A moins d'en avoir crée une autre faille.

Merci d'avance

04/11/2007, 16h07	#3
mendoz Invité de passage Inscription : novembre 2007 Messages : 5 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 5 Points : 1 Points : 1	Merci de ta réponse Deimos_ Donc si j'ai bien compris il y a 2 choses : - le problème javascript, où la personne peut modifier les prix ---> bon ca il suffit d'etre attentif et de recalculer chaque commande - une faille dans le code code PHP qui envoie le mail qui celle la peut etre plus dangereuse ---> j'essai de corriger et poster ça Merci
	00

04/11/2007, 16h14	#4
Deimos_ Invité régulier Inscription : juillet 2005 Messages : 9 Détails du profil Informations forums : Inscription : juillet 2005 Messages : 9 Points : 9 Points : 9	Salut, Oui il "suffit" d'être attentif et recalculer, mais si c'est pour toujours tout recalculer, à quoi bon vouloir automatiser la chose en JavaScript plutot qu'en PHP ? De rien pour la réponse =) Deimos
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email