MVC3 sending hashed password with ajax - ajax

Question

I am creating a loginform like this:
#using (Ajax.BeginForm("Login", new AjaxOptions()
{
HttpMethod = "POST",
OnComplete = "onComplete"
}))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.Username, "Username")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Username)
#Html.ValidationMessageFor(model => model.Username)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password, "Wachtwoord")
</div>
<div class="editor-field">
#Html.PasswordFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Remember, "Remember me")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Remember)
#Html.ValidationMessageFor(model => model.Remember)
</div>
<p>
<input type="submit" value="Inloggen" />
</p>
</fieldset>
}
Now the password is send unhashed over the internet for validation to the model, which is not safe. I want to make sure the password is always hashed going over the line and preventing man in the middle sniffers.
The onBegin won't work because the elements cannot be modified anymore after this, any other ideas?

Answer 1

You can do it without ajax by catching the submit event and hash the password before posting the form
#using (Html.BeginForm("LogOn","Login",FormMethod.Post,new {id = "loginForm"})) {
<div>
<fieldset>
<legend>Account information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password, new {id = "password"})
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Connect" id="submit"/>
</p>
</fieldset>
</div>}
For example with this javascript code :
$(function () {
$("#loginForm").on("submit",function (e) {
var form = $(this);
var pass = $("#password").val();
$("#password").val(MD5(token + MD5(pass)));
form.submit();
});
});