Password Hashing in Client Side

Password security is most important concern in web development. Most of the web applications developed now a days secure user password by hashing it in server side before storing it in database. But still there is possibility of exposing user password in client side if not handled properly.

Let’s take Laravel framework as an example to move ahead. Laravel framework can be installed following their official page installation guide.
After laravel installation we can get it’s default authentication using the following command:

php artisan make:auth

This command creates login and registration views along with the routes needed for user authentication.

Here, our application is ready for user registration and login.

sha256_login

Once user is registered and login to the application we see that password is being exposed in network panel of chrome dev tools or firebug.

sha256_network_panel_highlight

sha256_network_panel_crop

Laravel provides Bcrypt hashing for storing user password on server side. To make user password more secure we can use password hashing in client side before sending it to server. There are different algorithms that can be used for password hashing but let’s use here SHA-256 algorithm. To see the output of SHA-256 password hashing please check this url.

To implement password hashing we need to add sha256 js file in the project which can be downloaded from here. After adding this file to the project we need to hash password in client side before user register or login to the application. This client side password hashing is essential if the project is related to financial transactions.

    // On login button click hash password if it is having some value
    $('#btn_login').click(function() {
        if($('input[name="password"]').val().length) {

            // Hash password using sha256 before sending it over HTTP
            $('input[name="password').val(sha256($('input[name="password').val()));
        }
    });

    // On register button click hash password if it is having length >= 6
    $('#btn_register').click(function() {
    	// Provide minimum password length here
        var password_length = 6;

        if($('input[name="password"]').val().length >= password_length &&
        	$('input[name="password_confirmation"]').val().length >= password_length) {

            // Hash password & confirm password using sha256 before sending it over HTTP
            $('input[name="password').val(sha256($('input[name="password').val()));
            $('input[name="password_confirmation').val(sha256($('input[name="password_confirmation').val()));
        }
    });

After password hashing is done now only hashed password will be visible in network panel of chrome dev tools.

sha256_network_panel_hash

The complete source code using laravel framework is available on github.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s