Q1762 How do I password protect a directory or file using .htaccess in a form and encrypt the password in the address bar?

You are here: irt.org | FAQ | JavaScript | Password | Q1762 [ previous next ]

You do it by getting the values from a form, converting it into hexadecimal format and redirecting it with the following syntax: http://username:encryptedpassword@www.domain.com/directory/

Where directory of course meaning any directory containing files you want to protect. You do, however, have to have .htaccess password protection setup. To find useful information on how to do this visit http://www.soundfeelings.com/free/password.htm

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original:  Jonathan Feaster (support@archreality.com) -->
<!-- Web Site:  http://www.archreality.com/ -->
<!-- Based on: FTP Server Login (Reinout Verkerk) and htaccess Login (Gordon Hudson) -->

<!-- Begin
function Login(form) {
  var username = form.username.value;
  var password = form.password.value;
  var server = form.server.value;
  letters = "abcdefghijklmnopqrstuvwxyz/.1234567890~_:";

  encrypt = new Array(
    "%61","%62","%63","%64","%65","%66",
    "%67","%68","%69","%6a","%6b","%6c",
    "%6d","%6e","%6f","%70","%71","%72",
    "%73","%74","%75","%76","%77","%78",
    "%79","%7a","/",".","%31","%32","%33",
    "%34","%35","%36","%37","%38",
    "%39","%30","~","_","!",":");

  var input = password;

  encpass = "";

  for(var count = 0; count < input.length; count++) {
    daChar = input.charAt(count);
    for (i = 0; i < letters.length; i++) {
      if (daChar == letters.charAt(i)) {
        encpass += encrypt[i];
        break;
      }
    }
  }

  if (username == "" && password == "") {
    alert("Enter your Username and Password!");
    login.username.focus();
    return false;
  }
  if (username == "") {
    alert("Enter your Username!");
    login.username.focus();
    return false;
   }

  if (password == "") {
    alert("Enter your Password!");
    login.password.focus();
    return false;
  }
  else {
    var htsite = "http://" + username + ":" + encpass + "@" + server;
    window.location.href = htsite;
  }
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<!-- The hidden form field "server" needs to be the address of your password protected directory. -->

<div align="center">
  <table width="335" border="0" cellpadding="0">
    <form name="login">
	<input type="hidden" name="server" value="www.domain.com/directory/">
    <tr>
        <td>
          <div align="center">
            Username:
            <input type=text name="username" size=20>
          </div>
        </td>
	</tr>
	<tr>
	    <td>
          <div align="center">Password:
            <input type=password name="password" size=20>
          </div>
        </td>
	</tr>
	<tr>
	    <td>
          <div align="center">
            <input type=button value="Login" onClick="Login(this.form)" name="button">
          </div>
        </td>
 </tr>
 </form>
  </table>
</div>
</BODY>

Submitted by Jonathan Feaster Archreality Design (http://www.archreality.com/)