How to validate password with jquery and php? - php

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 "A" in "AJAX" stands for asynchronous.
The code after you call $post will execute before the contents of the $post function. The value of finish will always be a jqXHR object, the result of (input==data) ? true : false will be ignored.
More clearly:
var finish = $.post("pass.php", { request: "opensesame" }, function(data) {
// THIS EXECUTES SECOND, and the return value is discarded
return (input==data) ? true : false;
});
// THIS EXECUTES FIRST, with finish set to a jqXHR object
if(finish){
...
You need to rethink your methods of password checking, or use synchronous postbacks by adding the following before your $.post calls:
$.ajaxSetup({async:false});
Or by using $.ajax and passing async: false:
jQuery.ajax({
type: 'POST',
url: "pass.php",
data: { request: "opensesame" },
success: function(result) { ... },
async: false
});

Answer 2

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);
?>

Answer 3

You have to serialize your input fields to all the data to your script:
$.post("pass.php", { request: $('form').serialize() }, function(data) {
// ...
As long as you are on your own server I don't see much potential dangers, as it sends a POST-request which a normal form would do anyway.

Answer 4

Its quite unsafe to send data like this, anyone can intercept and read the data which you send by ajax and the value returned by ajax using firebug or other such tools. So you should serialize or sanitize the fields and also encrypt the data before sending them.
& the code to alert after checking finish will be executed before the response comes from ajax (note that it is asynchronous) thus you would get an object stored in the finish variable.