Simple login form using jquery

jquery

Solution

A login form is normally used to prevent unauthorized users from accessing informations or actions that should be accessible/allowed only to specific people. So, in order for a login form to do it's job properly, it MUST be secure (as much as possible, at least). If a login form is not secure, it may give the illusion of protecting your data, but skilled people will be able to bypass it without you even knowing it... and this is BAD!

Now, this is the problem I see with a jQuery only login form. The fact that you have the password in plain text in your page code, is just BAD! It is super easy to bypass it! Everyone who will give a look at your page code, will know your admin password. Even if you use good hash algorithms (such as SHA-2) to "hide" the password, it would be almost as bad, since it would give a possible attacker a good hint where to start from to guess your password (using rainbow tables or brute force).

So, my suggestion is to use a server-side application along with your jQuery script, that may be called through jQuery to check the password and then allow the user in. It is not yet the very best solution (it would be much better to send a password on an https connection), but it is still an improvement!

Your code, in order to do that, should be something like this:

    $(document).ready(function(){
    // on click Sign In Button checks with the remote server that username =='admin' and password == 'password'
        $("#login").click(function(){
            $.ajax({
                url: 'http://www.mywebsite.com/checklogin?user='+encodeURIComponent($("#loginusername").val())+'&pass='+encodeURIComponent($("#loginpassword").val()),
                success:function(data){
                    if(data == "OK")
                    {
                        $("#first").hide();
                        $("#second").append("<p>Hello, admin</p> <br/><input type='button' id='logout' value='Log Out' />");
                    }
                    else
                    {
                        alert("Please try again");
                    }
                }
            });
        });

        $("#logout").click(function() {
            $("form")[0].reset();
            $("#first").show();
            $("#second").hide();
        });
    });

You could also change the code to make it send the request through post method (which is slightly better). On the server side you could have, just to start, a simple script that receives the two get parameters (user and pass), checks if they correspond to the expected values ('admin' and 'password') and prints to screen an `OK` in case of success or a `KO` otherwise. For a simple start you could make a PHP application that does that, like the following (it's a very simple and improvable one, but it's a good starting point):

<?php

$user = (array_key_exists("user",$_GET))?$_GET["user"]:""; //Checks if the user parameter has been passed through the get method, if not, sets the $user variable to an empty string
$pass = (array_key_exists("pass",$_GET))?$_GET["pass"]:""; //Checks if the pass parameter has been passed through the get method, if not, sets the $pass variable to an empty string

if($user == "user" and $pass == "pass")
    echo "OK";
else
    echo "KO";

Problem

Original source