Strange issue with AJAX login form......

[doni49]

I've been trying to figure out why my login page isn't working so I've been watching it in the debugger (MS Edge on Win10).  Come to find out the server side portion correctly returns true or false.  But when I step through the code, I see it output my test statement to the add_err div.  Then it loops through AGAIN and hides the div again.

 

This is what my javascript code looks like.  The php page returns 'true' if I entered the correct login info and 'false' if not.

<?php $prefix = isset($_GET['mode']) ? $_GET['mode'] : "Desktop"; ?>
$(document).ready(function(){
  $("#add_err").css('display', 'none', 'important');
  $("#Login").submit(function(){
    var formData = $( this ).serialize();
    $.post("login.inc.php", formData, function(data){
      //$("#add_err").html(data);
      $("#add_err").css('display', 'inline', 'important');
      if(data == 'false'){
        $("#add_err").html("Username & Password combination does not match our records.");
      }else{
        $("#add_err").css('display', 'inline', 'important');
        $("#add_err").html("ok");
//        $("#MainContent").load("./<?php echo $prefix . 'Home.html'; ?>");
      }
    });//post
  });//submit
});//ready

This is the form portion of my login page.

<script type="text/javascript" src="js/login_js.inc.php?mode=<?php echo $prefix; ?>"></script>
<form id="Login" method="post" action="./">
<table>
<tr><td colspan="2"><div class="err" id="add_err"></div></td></tr>
  <tr><td>Username: </td><td><input type="text" name="user" id="user" required></td></tr>
  <tr><td>Password: </td><td><input type="password" name="pass" id="pass" required></td></tr>
  <tr><td>Automatic Login: </td><td><input type="checkbox" name="autoLogin"></td></tr>
  <tr><td>Allow Offline Mode: </td><td><input type="checkbox" name="allowOffline"<?php if(isset($_COOKIE['allowOffline'])){echo " checked";}?>></td></tr>
  <tr><td colspan = 2 align="center"><span style="font-size:small;">Note:  Do not set either option on a shared device.</span></td></tr>
  <tr><td colspan = 2 align="center"><input type="Submit" name="loginSubmit" id="loginSubmit" value="Submit">  <input type="reset"></td></tr>
</table>
</form>

Can anyone offer any suggestions?  Ultimately once I know this is working, I want the form to be replaced by the contents of "DesktopHome.html".

[Jacques1]

Shouldn't there be something like event.preventDefault(); to prevent the form from actually being submitted?

 

Your code is also wide open to cross-site scripting attacks, because you take $_GET['mode'] and happily drop it into the script element, allowing anybody to inject arbitrary code. Never insert user input into a JavaScript context. Use a whitelist of valid prefixes and only allow the user to choose one of those. Even better: Put the PHP value into a hidden element and read it from there instead of directly echoing it into the JavaScript code:

<?php

function html_escape($raw_input, $encoding)
{
    return htmlspecialchars($raw_input, ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML5, $encoding);
}

const MODES = [
    'Desktop' => null,
    'Foo' => null,
    'Bar' => null,
];

if (isset($_GET['mode']) && array_key_exists($_GET['mode'], MODES))
{
    $mode = $_GET['mode'];
}
else
{
    $mode = 'Desktop';
}

$data = [
    'mode' => $mode,
];

?>
<div id="data" class="hidden"><?= html_escape(json_encode($data), 'UTF-8') ?></div>
<script>
    var data = $.parseJSON($('#data').text());
    alert('The mode is: ' + data.mode);
</script>

This reliably prevents any code injections.

[doni49]

Thanks good point about the get. This project is in the beginning stages and (hopefully at least) I think I would've caught that down the road. I'll address that tonight.

 

But that still doesn't do any good for the problem I actually asked about.

 

Why does it set the add_err div to show the text and then run through and disable it again?

[Jacques1]

Did you read the whole reply? When you don't call event.preventDefault(), then the form is actually submitted in addition to your Ajax request. So you'll see the error message for a short time, and then the page is reloaded with an empty message box.

 

Or are you talking about a different problem? Then you'll have to be more specific.

[doni49]

Did you read the whole reply? When you don't call event.preventDefault(), then the form is actually submitted in addition to your Ajax request. So you'll see the error message for a short time, and then the page is reloaded with an empty message box.

 

Or are you talking about a different problem? Then you'll have to be more specific.

 

I've read a lot of examples of how to do this but this is the first time I've seen this PreventDefault method.  Now that I added that, the login actually shows the correct info. 

 

As to the question about reading the whole reply, yes I did read the entire thing but I didn't understand what this method was supposed to do --  I thought maybe it was somehow related to the issue of possible code injection.  I greatly appreciate the assistance.