Login system with Client Hash

Question

I am trying to make a simple login system that allows users to register/login, but want to hash the password on the client side before sending it over to the server. I know this isn't standard practice but trying to get it to work. Was hoping I could get some insight of where I am going wrong.

Here is my code so far:

<?php
include_once('connect.php');


$username = $_POST['username'];
$sql = "SELECT salt FROM users WHERE username = '$username';";
$result = $conn->query($sql);
$row = mysqli_fetch_assoc($result);
echo $row['salt'];


$variable = $_GET['tmp'];
$getPass = "SELECT passwordhash FROM users WHERE username = '$username' AND passwordhash =         '$variable ';";
//Run the sql and either set tmp variable of isValid to 1 or 0 and then echo it below or see how many rows are returned?
?>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="sha256.js"> </script>
        <script>
            function changeFormLogin() {
                var pass = document.getElementById('getPass').value;
                var username  = document.getElementById('username').value;
                var getSalt = <?php echo $row['salt']; ?>

                var hashpass = SHA256(pass+pass);
                var tmp = validateLogin(hashpass);
                if(tmp ==1){
                    //Welcome the user back, and load new form
                }
                else{
                    //Tell them to try again, notify them.
                }

                document.getElementById("demo").innerHTML = getSalt; //Used for testing
                return true;

            }

        function validateLogin(hashPass){

        }
    </script>

</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Log In Here</h2>
        <form action="#" onsubmit ="return changeFormLogin()">
            <p>Email</p>
            <input id="username" type="email" name="username" placeholder="Enter Email" required>
            <p>Password</p>
            <input id="getPass" type="password" name="password" placeholder="••••••" required>
            <input type="submit" name="login" value="Sign In">
            <p id="demo"></p>
        </form>

        <a href="index.php"><input type="submit" name="login" value="Return home"></a>

    </div>

Or if there is a way to simplify this I am all for it!

Check out the answer here: https://stackoverflow.com/questions/18338890/are-there-any-sha-256-javascript-implementations-that-are-generally-considered-t — Drew Delano, Sep 24 '19 at 05:31
You're on the right track (if you really, really, really want to hash on the client side), but if you're going to have some problems (if you're salting per user [and you should] then how do you get the username from the client to the server to look up their salt?) To do communication back and forth like that you'll wind up needing to use AJAX. Also, if you're not familiar with "SQL Injection Attacks" please, please, please go look them up. — Drew Delano, Sep 24 '19 at 05:36
Yeah, our teacher is wanting us to do the hashing on the client side, no idea why.. Guess learn something from 2012 we wont use again? Idk learn quiet a bit from it tho. — h.man96, Sep 24 '19 at 05:42
your code is wide open to **SQL injection attacks** - use parameterised statements, or consider all your data leaked. — Franz Gleichmann, Sep 24 '19 at 05:44

Parth · Answer 1 · 2019-09-24T05:53:58.337

You are allowing form to submit to server and it prevents javascript to execute.

I'm not sure if You are using https://cdnjs.com/libraries/js-sha256 library or similar to it but, It needs sha256 in lowercase instead of uppercase like you have typed.

Here is the working code,

function changeFormLogin() {
    var pass = document.getElementById('getPass').value;
    var username  = document.getElementById('username').value;
    var getSalt = 123566 //your salt

    var hashpass = sha256(pass+pass);
    console.log(hashpass);
    var tmp = validateLogin(hashpass);
    if(tmp ==1){
        //Welcome the user back, and load new form
    }
    else{
        //Tell them to try again, notify them.
    }

    document.getElementById("demo").innerHTML = getSalt; //Used for testing
    return true;

}

function validateLogin(hashPass){

}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js" ></script>
        
       

</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Log In Here</h2>
        <form action="javascript:;" onsubmit="return changeFormLogin()">
            <p>Email</p>
            <input id="username" type="email" name="username" placeholder="Enter Email" required>
            <p>Password</p>
            <input id="getPass" type="password" name="password" placeholder="••••••" required>
            <input type="submit" name="login" value="Sign In">
            <p id="demo"></p>
        </form>

        <a href="index.php"><input type="submit" name="login" value="Return home"></a>
        
    </div>
</body>
</html>

Something which you can do , Doesn't mean you should do, You are using GET to get the hashed string which is bad practice. Also you should never do operations on client side which should be done at server side, such as hashing the passwords.

NEVER use anything like this for production purpose and like others said in comments, Please have a look what SQL injection is and never trust what your user types in input fields.

Login system with Client Hash

1 Answers1