html form field transformation

Question

Given a form in HTML5

<form action="/login/password" method="post">
  <section>
    <label for="username">Username</label>
    <input id="username" name="username" type="text" autocomplete="username" required autofocus>
  </section>
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="password" required>
  </section>
  <button type="submit">Sign in</button>
</form>

When clicking the submit button, how can the password field be transformed. For example, rather than send the password field as is, submit hash(password) instead (where hash() function is given)

See this [answer](https://stackoverflow.com/a/21716654/2813224). — zer00ne, Jun 10 '23 at 20:11
@zer00ne Thanks for the reference. That's exactly what I am trying to achieve. That is, sending the hash value of the password and not the password itself. Any idea how to do that? — Mr., Jun 10 '23 at 20:20
@Mr. what's the point? If the attacker gets that hash and send it to the server it won't help. — Cody Tookode, Jun 10 '23 at 21:09
@AlPo In case the server will be hacked and the database will be leaked, still there won't be any passwords in it. — Mr., Jun 10 '23 at 21:14
@Mr. No offense, but please read a password management 101 article somewhere. Keywords: Password hash and salt — vzwick, Jun 10 '23 at 21:18

imhvost · Accepted Answer · 2023-06-10T21:21:15.843

On the onsubmit event, you can do anything with the <input> fields values:

document.forms[0].onsubmit = function() {
  this.password.value = hash(this.password.value);
  console.log( [... new FormData(this)] );
  return false; // prevent sent form for example
}

function hash(value) {
  return btoa(value);
}

<form action="/login/password" method="post">
  <section>
    <label for="username">Username</label>
    <input id="username" name="username" type="text" autocomplete="username" required autofocus>
  </section>
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="password" required>
  </section>
  <button type="submit">Sign in</button>
</form>

P.S. Password hashing should be done on the server side, not on the front end.

html form field transformation

1 Answers1