How to secure my login page

Question

I have a login.html webpage that lets user enter his username and password. When he clicks on submit I collect the entered value using Javascript and then make a Ajax POST Call to the php file and send the username and password.

My concern here is that is this a safe way of sending username and password ? If not how can i secure this transaction of sending data from html file to php running the backend?

The php file then connects to the MySql Db and checks if the user exits and if the password is correct If Yes it simply sends a Valid text back to the ajax calls to the javascript function if not I determine it is an invalid user ?

I am not quite happy with this logic ? Is there a better way to implement this process ? Since i am putting my code to production I want to secure it as much as possible.

The below code works fine i just need tips to secure it.

login.html

<div>
    <h3>Login information</h3>

    <input type="text" name="user" id="usrnm" placeholder="Username/Email">
    <input type="password" name="pswdlogin" id="pswdlogin" placeholder="Password">
    <input type="checkbox" name="keepmeloggedin" id="keepmeloggedin" value="1" data-mini="true">
    <input type="submit" data-inline="false" onclick="logmein()" value="Log in">
    <div id="loginstatus">    </div>
 </div>

logmein.js

function logmein() {

  var usrnm = document.getElementById("usrnm").value;
  var pswdlogin = document.getElementById("pswdlogin").value;

  $.post("http://xyz/mobile/php/logmein.php",
    {
      usrnm: usrnm,
      pswdlogin: pswdlogin
    },
    function(data, status) {

      if (data == 'Valid') {

        window.open("http://xyz/mobile/home.html?email=" + usrnm + "", "_parent");

      } else {
        alert(data);
        document.getElementById("loginstatus").innerHTML = data;
      }
    });
}

logmein.php

<?php

$usrnm_original = $_POST['usrnm'];
$pswdlogin_original = $_POST['pswdlogin'];

$con = mysqli_connect("localhost", "cSDEqLj", "4GFU7vT", "dbname", "3306");

if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

mysqli_select_db($con, "dbname");
$usrnm = mysqli_real_escape_string($con, $usrnm_original);
$pswdlogin = mysqli_real_escape_string($con, $pswdlogin_original);

$result = mysqli_query($con, "SELECT * FROM registration WHERE email = '" . $usrnm . "' AND password='" . $pswdlogin . "' ");
$rows = mysqli_num_rows($result);

if ($rows == 1)
    {
    echo "Valid";
    }
  else
    {
    echo "In Valid Credentials Entered";
    }

mysqli_close($con);
?>

Answer 1

This really belongs on codereview.stackexchange.com, but I'll give it a shot anyway.

Firstly, I'd add a csrf token to your form to stop those types of attacks.

//the most simple type of csrf token
if (!isset($_SESSION['token'])):
    $token = md5(uniqid(rand(), TRUE));
    $_SESSION['token'] = $token;
else:
    $token = $_SESSION['token'];
endif;

Then in your form, include a hidden input field:

<input type="hidden" name="token" id="token" value="<?php echo $token; ?>"/>

Then in your ajax, add the token.

var usrnm = $('#usrnm').val();
var pswdlogin = $('#pswdlogin').val();
var token = $('#token').val();

{
    usrnm: usrnm,
    pswdlogin: pswdlogin,
    token: token
}

Then in your php, let's stop the undefined index errors on access of that page directly.

$usrnm_original = isset($_POST['usrnm'])?$_POST['usrnm']:false;
$pswdlogin_original = isset($_POST['pswdlogin'])?$_POST['pswdlogin']:false;
$token = isset($_POST['token'])$_POST['token']:false;

Then we need to check if the token that was passed is the same as our token

if(!$_SESSION['token'] == $token):
    die('CSRF Attacks are not allowed.');
endif;

Then we need to stop using mysqli_query when accepting user data, even if sanitizing with mysqli_real_escape_string and instead use prepared statements. Also, procedural style code makes me cry, so we'll be changing that. Furthermore, let's return an array with a status and a message, so it's easier to handle the error and success reporting.

$ret = array();
$mysqli = new mysqli("localhost", "cSDEqLj", "4GFU7vT", "dbname");

if($sql = $mysqli->prepare('SELECT * FROM registration WHERE email = ? and password = ?')):
    $sql->bind_param('ss', $usrnm_original, $pswd_original);

    if($sql->execute()):

        $sql->fetch();

        if($sql->num_rows > 0):
            $ret['status'] = true;
            $ret['msg'] = 'You have successfully logged in! Redirecting you now';
        else:
            $ret['status'] = false;
            $ret['msg'] = 'The credentials supplied were incorrect. Please try again';
        endif;
    endif;
    $sql->close();
    return json_encode($ret);
endif;

Now we need to modify your post function.

$.post("http://xyz/mobile/php/logmein.php",
{
  usrnm: usrnm,
  pswdlogin: pswdlogin,
  token:token
},
function(data) {

  if (data.status == true) {

    window.open("http://xyz/mobile/home.html?email=" + usrnm + "", "_parent");

  } else {
    alert(data.msg);
    $('#loginstatus').text(data.msg);
  }
}, 'json');

Finally, and most importantly, you have a plain text method of passwords being used, which makes no sense from a security perspective. This is precisely how you get hacked. Instead, you should be using at least the sha256 hashing method. Change how the passwords are stored in the database to use sha256 then make a comparison by passing that into the SQL selector, example:

$pswdlogin_original = isset($_POST['pswdlogin'])? hash('sha256', $_POST['pswdlogin']):false;

And when saved in the database, the password will look like fcec91509759ad995c2cd14bcb26b2720993faf61c29d379b270d442d92290eb for instance.

My answer has been for clarity sake, but in reality, you shouldn't even be reinventing things. There's plenty of applications and framework's out there that have placed countless hours into securing their authentication systems. I would recommend having a look into all of these, as they'll help build your core programming skills and teach fundamental OOP practices

• Lararvel 4.x
• Zend 2
• Phalcon
• Yi

Hopefully this has been helpful.

Answer 2

First of all, if you want "top" security you should use HTTPS with a valid certificate, otherwise any attacker may be able to create a Man in the middle attack and intercept your data (I guess this is your main concern). Doing the HTTPS on the login page only is meaningless as the same attacker could do a Session Hijacking attack and impersonate other users without knowing the password.

Be aware that there is no difference of using AJAX or an HTML form, the data is sent though the wire in the same way.

If you don't want to spent more resources (usually HTTPS cerficates costs money), you can go the "not that good route": pass a hashed version of the password , but this has its downsides too (if you don't hash at server side, then the password becomes the hash itself...)

As adviced, don't try to reinvent the wheel, try using a well known framework like Laravel, or one smaller like Slim or Silex, it might be easier to migrate your code to them.

At the end you must ask yourself, what is the worst case scenario if some user gets access to another account? If you're deploying a trivial app with no personal data, maybe your current solution is good enough on the other hand if you're dealing with sensitive information you must pay good attention securing your website.

Further reading:

• About session hijacking
• About Man In the Middle
• Storing passwords "the good way" (TM)