<TAG>Simple HTML& Javascripting Tricks & Tips

 

JavaScript: Deliver Password Protected Content

Jack Donnell,
jack@JackDonnell.com



This is super simple. DO NOT RELY ON IT FOR TOTAL SECURITY!!!

The file password.html uses a call to an external Javascript. Based on the user password
(or you could use it as a simple keyword search, too) dynamic content is delivered to the page.
The cool thing is if you reload it.. you have to put the password in the prompt field.

(Check out External JavaScripting.)

You can just cut and paste it to two files one with htm or html extensions and the other with .js
extension.Play around with it. You can change the if statements to whatever 'password'
or 'keyword' you want.

Use the document.write to build the page for you. The external javascript keeps folks from
saving the page or right clicking to get to get it the info(passwords).

I'm sure someone knows how to get the info from an external file(SAY ..http://jackdonnell.com/articles/dpass.js
and when prompted..save file to disk 'to view source of the external script), but this is a good client-side protection method.
You could hide it in an include file or another js file to mask to information or run it server side.

 

BLAH..BLAH.. I know...Hush Up and Give you the code. Here it is.

Return to JackDonnell.com


SOURCE CODE

Password.html

<html>
<head>
<title> PASSWORD PROTECTION with Javascript</title>

<!--CALLS EXTERNAL JAVASCRIPT //-->
<script language="JavaScript" SRC="./dpass.js"></script>
</head>

<body bgcolor="WHITE" >
</body>
</html>

 

Now the external javascript file  dpass.js

var password=prompt("Enter in the password\n HIT CANCEL FOR PASSWORD LIST","Enter Password Here");

if (password == "sos") {

document.write('<CENTER><H1>sos PASSWORD PAGE GENERATED</H1></CENTER> ');

document.write('<p align=center><a href=./password.htm>Return to PASSWORD.HTM</a></p> ');

document.write('<CENTER><BR><BR> THE URL LINKS and CONTENTS OF THIS PAGE ARE GENERATED<BR> FROM THE USER RESPONSE TO A PROMPT <BR>SET-UP BY THE EXTERNAL JAVASCRIPT DPASS.HTM</CENTER> ');

document.write('<CENTER><BR><BR> FOR <B>sos</B> PASSWORD</CENTER> ');

document.write('<CENTER><BR><BR> Using IF..else if..else loops .. <br>you can set-up as many passwords as you like. Also, you can have each unique password<BR>dynamically generate HTML code.<br>Remember.. Javascript is case sensitive.</CENTER> ');

document.write('<CENTER><BR><BR> Password List:<BR><B>sos, music1234, jackd and JACKD</B></CENTER> ');

}

else if (password == "music1234") {

document.write('<CENTER><H1>music1234 PAGE GENERATED</H1></CENTER> ');

document.write('<p align=center><a href=./password.htm>Return to PASSWORD.HTM</a></p> ');

document.write('<CENTER><BR><BR> THE URL LINKS and CONTENTS OF THIS PAGE ARE GENERATED<BR> FROM THE USER RESPONSE TO A PROMPT <BR>SET-UP BY THE EXTERNAL JAVASCRIPT DPASS.HTM</CENTER> ');

document.write('<CENTER><BR><BR> FOR <b>music1234</B> PASSWORD</CENTER> ');

document.write('<CENTER><BR><BR> Using IF..else if..else loops .. <br>you can set-up as many passwords as you like. Also, you can have each unique password<BR>dynamically generate HTML code.<br>Remember.. Javascript is case sensitive.</CENTER> ');

document.write('<CENTER>Password List:<BR><B>sos, music1234, jackd and JACKD</B><br>Passwords are Case Sensitive!!!!</</CENTER> ');

}

else if (password == "jackd") {

document.write('<CENTER><H1>jackd PASSWORD PAGE GENERATED</H1></CENTER> ');

document.write('<p align=center><a href=./password.htm>Return to PASSWORD.HTM</a></p> ');

document.write('<CENTER><BR><BR> THE URL LINKS and CONTENTS OF THIS PAGE ARE GENERATED<BR> FROM THE USER RESPONSE TO A PROMPT <BR>SET-UP BY THE EXTERNAL JAVASCRIPT DPASS.HTM</CENTER> ');

document.write('<CENTER><BR><BR> FOR <B>jackd</B> PASSWORD</CENTER> ');

document.write('<CENTER><BR><BR> Using IF..else if..else loops .. <br>you can set-up as many passwords as you like. Also, you can have each unique password<BR>dynamically generate HTML code.<br>Remember.. Javascript is case sensitive.</CENTER> ');

document.write('<CENTER>Password List:<BR><B>sos, music1234, jackd and JACKD</B><br>Passwords are Case Sensitive!!!!</</CENTER> ');

}

else if (password == "JACKD") {

document.write('<CENTER><H1>JACKD PASSWORD PAGE GENERATED</H1></CENTER> ');

document.write('<p align=center><a href=./password.htm>Return to PASSWORD.HTM</a></p> ');

document.write('<CENTER><BR><BR> THE URL LINKS and CONTENTS OF THIS PAGE ARE GENERATED<BR> FROM THE USER RESPONSE TO A PROMPT <BR>SET-UP BY THE EXTERNAL JAVASCRIPT DPASS.HTM</CENTER> ');

document.write('<CENTER><BR><BR> FOR <b>JACKD</b> PASSWORD</CENTER> ');

document.write('<CENTER><BR><BR> Using IF..else if..else loops .. <br>you can set-up as many passwords as you like. Also, you can have each unique password<BR>dynamically generate HTML code.<br>Remember.. Javascript is case sensitive.</CENTER> ');

document.write('<CENTER>Password List:<BR><B>sos, music1234, jackd and JACKD</B><br>Passwords are Case Sensitive!!!!</CENTER> ');

}

else {

document.write('<CENTER><H1>PAGE GENERATED IF USER HITS CANCEL<br>OR<BR>INCORRECT PASSWORD</H1></CENTER> ');

document.write('<p align=center><a href=./password.htm>Return to PASSWORD.HTM</a></p> ');

document.write('<CENTER><BR><BR>This is the default response<BR>for incorrect passwords or users hitting the cancel button".</CENTER> ');

document.write('<CENTER>You can add any html links, formatted text,etc.</CENTER> ');

document.write('<CENTER>Password List:<BR><B>sos, music1234, jackd and JACKD</B><br>Passwords are Case Sensitive!!!!</CENTER> ');

}