Unable to decypt password field in php using AES after successful encryption on client side using jquery cryptojs

Question

I am able to successfully encrypt password field in my form field using jquery cryptojs library. I am using AES algorithm for that library. However, I am unable to decrypt it in php. I am attempting to use mcrypt_decrypt. I have looked for solutions online on various forums but haven't been able to figure whats going wrong.

Here is my html form:-

  <form id="userDetailsForm" action="/scripts/usernameTest.php" method="post">
<div class="clear"></div> <div class="clear"></div>
<p>Add User</p>
<div class="clear"></div>
<label for="usr">Username</label>
<input type="text" name="usr" id="usr">
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd">
<button id="create" class="create" type="submit">Create</button>
</form>

Here is my jquery part:-

$("#create").click(function(){

    var passwordForNewUser=CryptoJS.AES.encrypt($("#pwd").val(),key).toString();
   // var decryptedPassword=CryptoJS.AES.decrypt(passwordForNewUser,key).toString(CryptoJS.enc.Utf8);
   // console.log("decrypted password: "+decryptedPassword);
    console.log("create clicked");
    formdata = {
        usr: $("#usr").val(),
        pwd: passwordForNewUser,
    };

    var userNamePresentInTable=$("#usr").val();
    var password=CryptoJS.AES.encrypt($("#pwd").val(),key).toString();
    if($("td:contains('" + formdata.usr + "')").text() === formdata.usr){
        $("#userErrorDiv").html("User already exists. Please enter another one").css("color","red");
        duplicateUser=true;
    }else{
        duplicateUser=false;

        /*before adding to table save it in localStorage*/
       /* myLocalStorage.setItem(formdata.usr,formdata.pwd);*/

        $("#userErrorDiv").html("");
        var tr=$('<tr></tr>');
        var enteredVal=$("#usr").val();

        var td_username=$('<td></td>',{
            text:  $("#usr").val()
        }).addClass("editableFields").appendTo(tr);

        var td_level=$('<td></td>', {
            text: "User"
        }).appendTo(tr);

        var td_buttons=$('<td></td>',{
            html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
        }).appendTo(tr);

        $(tr).find("button").button();
        $(".userTable").append(tr);

        //$("#userDetailsForm").submit();
    }
});

$('#userDetailsForm').on("submit",function(){

    var currentObj=$(this), url=currentObj.attr('action'),type=currentObj.attr('method');
    var data={};

    currentObj.find('[name]').each(function(index,value){
       var currentObj=$(this), name=currentObj.attr('name'), value=currentObj.val();
        data[name]=value;
        console.log(index+" "+data[name]);
    });

    $.ajax({
        url:url,
        type:type,
        data:data,
        success: function(response){
            console.log(response);
        }
    });
    return false;
});

And this is the php side:-

<?php
if(isset($_POST['usr'],$_POST['pwd'] )) {
    $username=$_POST['usr'];
    $password=$_POST['pwd'];
    $key="encyrptedPasswor";
    $decrypted_password=mcrypt_decrypt(MCRYPT_RIJNDAEL_128,$key,$password,MCRYPT_MODE_ECB,'');
     echo nl2br("Username recieved:".$_POST["usr"]."<br/>"."Encrypted password recieved: ".$password."<br/>"."Decypted password recieved: ".$decrypted_password);
      }
    ?>

The issue is that even after im trying to echo decrypted password I still get the encrypted one as a response.

Answer 1

I know this isn't an answer, and I know I'm writing it as an answer but I wanted to make this as clear as possible!

DO NOT ENCRYPT PASSWORDS.... HASH THEM and then compare the hashes when needed!

Encrypting the password means that the data (or password in this case) is still contained within, which means someone can extract it, given knowledge, time and effort.

And like Hendrik said, use BCrypt not MD5 for reasons stated...