jQuery Validate plugin : remote : username exist ?

**Praub** · 30/04/2019, 23h25

Bonsoir,

Je ne suis pas expert en JS et/ou jQuery :

Mais j'utilises le plugin jQuery Validate (validate)

Voici le code du formulaire html/php :

Code HTML :

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
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" id="sign" autocomplete="off">
 
				<!--
				<ul id="progressbar">
					<li class="active">Username</li>
					<li>Social Network</li>
					<li>Account</li>
					<li>Human Check</li>
				</ul>  
				-->    		
 
				<!-- Username Step -->
				<fieldset class="form-group">
				<h2 class="fs-title">Choose your Username *</h2>				
				<h3 class="fs-subtitle">Who will you be ?</h3>
 
 
				<div class="fs-error"></div>
				<input type="text" class="form-control" name="uname" id="uname" placeholder="Username" value="<?php if(isset($_POST['uname'])) echo $_POST['uname'] ?>" required>
				<div id="unameDen"></div>
				<div class="mandatory">(*) mandatory</div>
 
				<button type="button" name="next" id="uname" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- // Username Step -->
 
				<!-- Social Network Step  -->
				<fieldset>
					<h2 class="fs-title">Social Profiles</h2>
					<h3 class="fs-subtitle">Your presence on the social network</h3>
 
					<input type="text" class="form-control" name="tweeturi" placeholder="Twitter Username" value="<?php if(isset($_POST['tweeturi'])) echo $_POST['tweeturi'] ?>">
 
					<input type="text" class="form-control" name="fburi" placeholder="Facebook Username" value="<?php if(isset($_POST['fburi'])) echo $_POST['fburi'] ?>">
 
					<input type="text" class="form-control" name="instauri" placeholder="Instagram Username" value="<?php if(isset($_POST['instauri'])) echo $_POST['instauri'] ?>">
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="button" name="next" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- Social Network Step  -->
 
				<!-- Create account Step  -->
				<fieldset class="form-group">
					<h2 class="fs-title">Create your account *</h2>
					<h3 class="fs-subtitle">Fill in your credentials</h3>
 
					<input type="text" class="form-control" name="mail" id="mail" placeholder="E-mail" value="<?php if(isset($_POST['mail'])) echo $_POST['mail'] ?>" autocomplete="off" required>
 
					<input type="password" class="form-control" name="pass" id="pass" placeholder="Password" autocomplete="off" required>
 
					<input type="date" class="form-control" name="dob" id="dob" value="<?php if(isset($_POST['dob'])) echo $_POST['dob'] ?>" required>
 
					<div class="mandatory">(*) mandatory</div>
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="button" name="next" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- // Create account Step  -->
 
				<!-- Human Check Step -->
				<fieldset class="form-group">
					<h2 class="fs-title">Human Check *</h2>
					<h3 class="fs-subtitle">Are You Human ?</h3>
 
					<input type="text" class="form-control" name="capcode" id="capcode" value="<?php echo captcha() ?>" disabled>
 
					<input type="text" class="form-control" name="captcha" id="captcha" placeholder="CAPTCHA Code" required>
 
					<div class="mandatory">(*) mandatory</div>
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="submit" name="ProcessDataSign" id="submitbutton" class="submit action-button" value="Submit">sign up</button>
				</fieldset>
				<!-- // Human Check Step -->
				</form><!-- /form-->

Le code JS/jQuery qui check les inputs :

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
// validating form
  $('#sign').validate({
    rules :{
      uname : {
        required : true,
        remote : {url : 'checkuname.php', type : 'post'},
        minlength : 3,
        maxlength : 25,
        pattern : /^[a-zA-Z0-9-_]+$/, 
      }, // rules uname
      fburi : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules fburi
      tweeturi : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules tweeturi
      instauri : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules instauri
      mail : {
        required : true,
        email : true,
      }, // rules email
      pass : {
        required : true,
        minlength : 5,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules password
      dob : {
        required : true,
      }, // rules dob
      captcha : {
        required : true,
        remote : 'dynamic/antiBot.php',
      }, // rules dob
    }, // rules
    messages : {
      uname : {
        required : 'A Username is Required !',
        minlength : 'Username need at least min. 3 characters',
        maxlength : 'Username need at least max. 25 characters',
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
        remote : 'testing',
      }, // msg uname
      fburi :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg fburi
      tweeturi :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg tweeturi
      instauri :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg tweeturi
      mail :{
        required : 'Your e-mail address is Required',
        email : 'The e-mail address looks invali'
      }, // msg email
      pass :{
        required : 'A password is Required',
        minlength : 'Password need at least min. 5 characters',
        pattern : 'Pass : Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg password
      dob : {
        required : 'A Date of birth i Required',
      }, // msg dob
      captcha : {
        required : 'Field a correct CAPTCHA Code',
        remote : 'test',
      }, // rules dob
    }, // messages
 
    onfocusout: function(element) {
        // "eager" validation
        this.element(element);  
    }
  }); // validate function

aussi le code JS/jQuery car le formulaire et multi-step :

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
80
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
 
$(".next").click(function(){
  if(animating) return false;
  animating = true;
 
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
 
  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 
  //show the next fieldset
  next_fs.show(); 
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = (now * 50)+"%";
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
      next_fs.css({'left': left, 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
  });
});
 
$(".previous").click(function(){
  if(animating) return false;
  animating = true;
 
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
 
  //de-activate current step on progressbar
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
 
  //show the previous fieldset
  previous_fs.show(); 
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = ((1-now) * 50)+"%";
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
  });
});
 
	$("submit").click(function(){
	  return false;
	});

et le code PHP qui est sensé effectuer la requête sql pour voir si le username existe déjà ou pas ?

Code PHP :

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
if(!empty($_POST['uname'])){
 
	$uname = $_POST['uname'];
 
	try{
		$connect = new PDO("mysql:host=$servername;dbname=$dataname;charset=utf8", $user, $mdp);
 
		$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
		$query = $connect -> prepare ("SELECT uname FROM userlist WHERE userpn = '$uname' LIMIT 1");
 
		$query -> execute();
 
		if($query -> fetch() == 0){
			$output = true;
		}else{
			$output = false;
		}
		echo json_encode($output);
	}
 
	catch(PDOException $log){
		$query . "<br>" . $log->getMessage();
	}
 
	 $connect = null; 
}

mon problème se situe au niveau de la rules remote de uname

Quand je teste la règle remote rien ne se passe, mais je n'ai aucun soucis "a priori" avec les autres règles !

Pourriez-vous me dire au se situerai le problème ?

**Watilin** · 01/05/2019, 15h22

Bonjour,

je n’ai pas trouvé de piste dans ton code qui permettrait de remonter au problème. Je te conseille d’utiliser la console F12 et son onglet réseau (networking) pour voir les données envoyées et reçues par la requête remote.

Sinon, j’ai quelques petites remarques :

Attention avec "PHP_SELF", il ne fait pas exactement ce que tu penses. Je te conseille d’utiliser "SCRIPT_NAME" à la place. Voici une petite page de test que j’ai faite il y a quelques temps :

Code php :

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
<?php
ini_set('html_errors', 'Off');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>$_SERVER['PHP_SELF'] et similaires</title>
</head>
<body>
 
<ul>
  <li> <a href="<?= $_SERVER['SCRIPT_NAME'] ?>">@</a> </li>
  <li> <a href="<?= $_SERVER['SCRIPT_NAME'] ?>/bidule">…/bidule</a> (<a href="./bidule/bidule">rajouter une couche</a>)</li>
  <li> <a href="?reponse=42">?reponse=42</a> </li>
</ul>
 
<pre>__FILE__ = <?= __FILE__ ?></pre>
<pre>$_SERVER = <?php print_r(array_intersect_key($_SERVER, array_flip([
  'SCRIPT_FILENAME',
  'QUERY_STRING',
  'REQUEST_URI',
  'SCRIPT_NAME',
  'PATH_INFO',
  'PATH_TRANSLATED',
  'PHP_SELF',
]))); ?></pre>
 
<?php /*
<pre>$_SERVER = <?php print_r($_SERVER) ?></pre>
*/ ?>
 
</body>
</html>

Le charset utf8 de MySQL est incomplet, il n’utilise que 3 octets. Ça peut causer des pertes de données dans certains cas, et ça peut servir de vecteur d’attaque avec certains CMS pas à jour. Je te conseille d’utiliser utf8mb4 à la place.

Et puisqu’on parle d’attaque :

Code php :

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

1
2
3
$uname = $_POST['uname'];
...
$query = $connect -> prepare ("SELECT uname FROM userlist WHERE userpn = '$uname' LIMIT 1");

Tu utilises une donnée POST directement dans ta requête SQL : c’est une vulnérabilité. Si, en utilisant ma console, je fabrique une requête POST pour envoyer ' OR TRUE; --, ça va me permettre de récupérer la liste de tous les userpn, c’est donc une fuite de données. Et ce n’est que la plus simple des injections.

Ce n’est pas parce que tu utilises prepare() que tu es automatiquement protégé, encore faut-il le faire de la bonne façon. Utilise un marqueur comme ceci :

Code php :

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

1
2
$query = $connect -> prepare ("SELECT uname FROM userlist WHERE userpn = ? LIMIT 1");
$query -> execute([ $uname ]);

**Praub** · 01/05/2019, 16h52

Bonjour Watilin,

merci pour tes indications

Test avec la console, Etat = 404 pour le fichier PHP (checkuname.php) en charge de la requête sur le username :

J' ai fait une correction :

code initiale dans le fichier JS :

Code :

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

remote :{url : 'checkuname.php', type : 'post'},

correction :

Code :

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

remote :{url : 'dossier/checkuname.php', type : 'post'},

Résultat : Etat 200

Ensuite dans les détails :

Etat => 200
paramètre => uname : test
Réponse => il me donne tout le formulaire

jQuery Validate plugin : remote : username exist ? [Plugin]

jQuery

Discussions similaires

Partager

Partager