jQuery: how to submit a form with edited user inpu

Question

So for example I have a simple HTML form:

      <h3>
            <a href="#">Login</a>
        </h3>
        <div id="tabs-login">
            <form method="get" action="./dev.html">
                <fieldset>
                    <legend>
                        Email:
                    </legend>
                    <input type="text" class="required email" name="login" />
                </fieldset>
                <fieldset>
                    <legend>
                        Password:
                    </legend>
                    <input type="password" class="required" name="pass" />
                </fieldset>
                <input type="submit" value="Submit" />
            </form>
        </div>

And I use jQuery to validte it:

    <script>
      $(document).ready(function() { $("form").validate(); });
    </script>

I want on form submition to take user inputed password value and take SHA256 from it via this jQuery plugin and submit email=user-inputed-value and pass=sha-value. How to access validated values via jQuery and change them and send to original form destination?

Answer 1

First -- I want to point out that I don't think this is a good idea. It's generally a bad idea to implement password hashing on the client side. Instead, the pass should be sent in plain text (over HTTPS) to the server, where it is then hashed using your preferred algorithm before storage. This has the added benefit of not advertising to potential attackers which hashing method is used, since that code exists only on the server.

That said: you're going to want to calculate that SHA value prior to form submit.

You could bind an event handler to the password field's blur event to update a hidden field's value with the new hash. Or you could add the update logic to the validation code.

Regardless of where the extra code goes, it will be much easier for you to prepare the hash prior to the form submit than it will be to send a second submission chasing after the first.

E.g.

<!-- add this to the form -->
<input type="hidden" name="sha_pass" value="" />

// add this to the document ready handler
$('[name=pass]').blur(function() {
    $('[name=sha_pass]').val($.sha256($(this).val());
});