Encrypt forms' passwords before submitting with jquery.



Download

Source:

<?php 
  function sha256_check($str) 
  {
    $sha256_regex = "/^[0-9a-f]{64}$/";
    if(preg_match($sha256_regex, $str)) 
    {
      return TRUE; 
    } else { 
      return FALSE; 
    }
  }
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser/Client side password encryption example</title>
<style type="text/css">
label { width: 6em; float: left; text-align:right; margin-right:.5em; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
input { margin-bottom: 1em; }
#form_submit { margin-left: 8em; }
</style>
<script language="javascript" src="./js/jquery.js" ></script>
<script language="javascript" src="./js/jquery.sha256.js" ></script>
<script language="javascript" src="./js/jquery.validate.js" ></script>
<script type="application/javascript">
  $(document).ready(function(){
    var validator = $("#form_pass_enc").validate({
      rules: {
        name: "required",
        password: "required"
      } 
    });
    
    $("#form_submit").click(function() {
      if($("#form_pass_enc").valid()) {
        // Optionally you can uncomment this to see if encrypted before we leave the page.
        //alert($.sha256($('#password').val()));
        $('#password').val($.sha256($('#password').val()));
        $('#form_pass_enc').submit();
      }
    });
  });
</script>
</head>
<body>

<?php 
if(!empty($_POST)) { 
  if(sha256_check($_POST['password'])) {
    echo sprintf("<p>Hello %s, <br/>Your password was encrypted to %s before it traveled through any internet tubes.</p>", $_POST['name'], $_POST['password']);
  } else { 
    echo "<p>That's not quite right...</p>"; 
  }
}
?>

<h1>Encrypt forms' passwords before submitting with jquery.</h1>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="form_pass_enc" id="form_pass_enc">
  <label for="name">Name:</label>
  <input type="input" name="name" id="name" />
  <br/>
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
  <br/>
  <input type="button" name="form_submit" id="form_submit" value="Submit" />
</form>

</body>
</html>