1

I am trying to encrypt a password when submit button is pressed.

I don't understand why the value of password input is not changed, the ecryption is done correctly.

<script>
    function cript(){
        var pass = CryptoJS.SHA1("<?php echo $_POST["password"]; ?>");

        var passString = pass.toString();

        console.log(passString);
        document.getElementById('inputPassword').value = passString;
    }
</script>

and on HTML Form:

<input type="submit" class="btn btn-primary" value="Proceed" onclick="cript()">

Can anyone tell me the solution?

captainsac
  • 2,484
  • 3
  • 27
  • 48
Marian Pavel
  • 2,726
  • 8
  • 29
  • 65
  • 3
    you need to take the value of the password input through javascript, not after you've already posted it.. – Pogrindis May 19 '15 at 10:25
  • 1
    well here is the JS way : https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById another helpful lib is jQuery but not compulsory. – Pogrindis May 19 '15 at 10:26
  • 1
    Have a read through this : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript – Pogrindis May 19 '15 at 10:27
  • 1
    Stop. Really really stop. SHA1 is not encryption. If you want to encrypt data between the client and server, use SSL. If you want to hash passwords, use something that isn't as weak as SHA1 and do it on the server. – Quentin May 19 '15 at 10:34
  • @MiroslavSaracevic — Security nightmares do not make for good learning exercises and I'd question the obviousness of this not being intended for use in live code as well. – Quentin May 19 '15 at 10:50
  • There is no encryption happening here. You are HASHING. Similar, but very much different. Here's my explanation of the difference on a different question: http://stackoverflow.com/questions/26299639/multiple-encryption-technique-in-java/26300872#26300872 – Russell Uhl May 19 '15 at 12:54

3 Answers3

6

JavaScript executes in the browser. PHP executes on the server. The code you've written doesn't work because it tries to execute them both in the browser.

  1. "<?php echo $_POST["password"]; ?>" executes first, while the page is constructed on the server. At this point in time, the password probably doesn't exist on the server, so the value in the javascript is most likely blank.

    "<?php echo $_POST["password"]; ?>" becomes ""

  2. When the javascript loads in the browser, it is effectively var pass = CryptoJS.SHA1("");. You can verify this with a debugger like firebug or with a proxy like ZED or just by viewing the source of the page from within the browser. When this executes, it's hashing nothing, and so storing nothing in the password field.

  3. When you post, the password field is empty, because of #2. Your server gets nothing, so your password doesn't change.

By the way,

  • don't hash the password on the client. This implies a security flaw where you are probably hashing the password as part of the login process. It may seem like you're protecting data from being sent insecurely to the server, but you're really just making the password hash into the password. When the password hash is stolen off the wire, the attacker will be able to replay it just like they were able to replay the original password.
  • you're forgetting to include a salt in your password, which makes you vulnerable to rainbow tables.
  • don't use sha1 for hashing passwords. It's somewhat weak and expected to fall literally any day. Use bcrypt or pbkdf2
  • don't call it 'encrypt the password' but 'hash the password'. While hashing is technically a cryptographic technology, using the words inexactly both belies your inexperience and communicates a different message that you intend, making people who understand crypto have to work that much harder to understand your question to help you.
    • Use 'encrypt', and 'decrypt' to refer to reversible encryption.
    • Use 'crypt' to refer to the old weak unix algorithm that nobody should be using any more.
    • Use 'hash', or 'digital fingerprint' to refer to hashes.
atk
  • 9,244
  • 3
  • 32
  • 32
  • your point about not hashing on the client is interesting but stealing a hash is as useful as stealing the password itself, no? additionally, if a hackers steals a hash, it will be useful only at the site in question but if he steal the actual password, he can try that in other places. so the answer is https no? – ekkis Apr 21 '16 at 04:20
1

The form posts before cript gets called.

Call the cript function in the form's onsubmit event:

<form onsubmit="cript()">
Russell Uhl
  • 4,181
  • 2
  • 18
  • 28
user3227295
  • 2,168
  • 1
  • 11
  • 17
1

Your PHP code can't execute on click. It can only be executed by server when you load the file, since you are waiting for user to input the password and then call the function it is not going to work.

Your javascript var pass is empty since you don't have POST at that point in time.

Flow that can work is: execute PHP -> deliver html + javascript -> user input -> do crypt -> submit

So you can not rely on PHP to give you data in this case. You need to go with different approach here.

Try

<script>
    function cript(){
        var pass = CryptoJS.SHA1(document.getElementById('inputPassword').value);

        var passString = pass.toString();

        console.log(passString);
        document.getElementById('inputPassword').value = passString;
    }
</script>

This only takes care of problem related with trying to pass PHP variable to javascript variable. Security issues about SHA1 are another topic and if this is school project or fiddling around to learn javascript then it is ok. This example for learning purposes how to use javascript to access values in elements is ok. However if this code is ever going to be put on server and be used, then SHA1 should definitely be avoided

Miroslav Saracevic
  • 1,446
  • 1
  • 13
  • 32
  • Just to add it looks like he will need to add `id="inputPassword"` to his password input field. – Pogrindis May 19 '15 at 10:34
  • I'm assuming he has it already, but yea, would be usefulll to get whole form in original question, not just the submit button. – Miroslav Saracevic May 19 '15 at 10:35
  • Thank you for the answer, also moving onclick before submit helped me too I don't know why. – Marian Pavel May 19 '15 at 10:38
  • Because the form submit is loading new page. So in general you always wanna do stuff before actual submit happens. On click can work if you are changing something else then the current DOM, like for example doing something with cookies or similiar. – Miroslav Saracevic May 19 '15 at 10:44