Question

I’ve never done this before, and I haven’t found much help on Google or StackOverflow yet.

Here’s what I have: A password input:

<input type="text" placeholder="password" name="pass" id="password" />

and some jQuery to check the password:

<script>
$('form').submit(function(){
input = $('#password').val();
var finish = $.post("pass.php", { request: "opensesame" }, function(data) {
   return (input==data) ? true : false;
});
if(finish){
alert('sent');
}else{
alert('not sent');
}
return false;
});
</script>

And a password-dispensing php page (pass.php):

<?php
if(isset($_POST['request'])&&$_POST['request']=="opensesame"){
echo 'graphics';
}
?>

Now, I can get it to alert ‘graphics’, but I can’t get it to match the data with the input value to check if it’s the right password or not.

What am I doing wrong, and what are the potential dangers to authenticating a password in this way?

Answer 1

The first thing to do would be to clean up the code, it’s too obscure, I’m afraid.

I’d write it as follows:

<script>

$('form').submit(function(event){
    event.preventDefault(); // stop the form from submitting
    var passwd = $('#password').val();
    var finish = $.post("pass.php", { request: passwd }, function(data) {
        if(data){
            alert('Success!');
        }else{
            alert('Failure :(');
        }
    });
});

</script>

Things to note here:

• AJAX POST is asynchronous, you can’t check for a variable right after changing it in the callback, you need to process stuff inside the callback.
• You must verify the password on the server, not in javascript!!
• Adding to the previous bullet, don’t write your password inside the javascript!

And on the server:

<?php

    if(isset($_POST['request']) && $_POST['request']=="opensesame"){
        echo 'true';
    }else{
        echo 'false';
    }

?>

Things to note here:

• You used isset() to check for the existence of the variable, good call. Keep doing it.
• jQuery POST expects a javascript value from the server (unless you tell it otherwise).
• This is why my code prints either 'true' or 'false', this translates to a boolean value in javascript.

• I would advise returning an object with error details, such as the one below:

  <?php
      $result = array('success'=>false, 'reason'=>'Unknown error.');
      if(isset($_POST['request'])){
          if(trim($_POST['request'])!=''){
              if($_POST['request']=='opensesame'){
                  $result['success'] = true;
                  $result['reason'] = 'Welcome home!';
              }else $result['reason'] = 'Password is wrong';
          }else $result['reason'] = 'Password must not be empty';
      }else $result['reason'] = 'Expected parameter "request"';
      echo json_encode($result);
  ?>