2 Simple Scripts to Password Protect Web Pages

Here are some simple password protection scripts to password protect webpages. Some web pages are best kept private. The javascript below are simple ways to protect using a password your webpage.

LIMITATIONS

password protection scripts

  • These scripts are very simple javascript. They are the first line to protect privacy of webpages. Someone who can access the HTML page source code can easily find the username and password and enter the page. Anyone with a little idea about HTML and computers can see the source code.
  • The script will NOT work in Javascript disabled browsers or older browser versions not supporting javascript. So it is basically to stop routine surfers from accessing your pages.

So if you have something IMPORTANT that you really want to password protect and not allow any access at all, DO NOT USE these and try alternative means. Use the WordPress Password Protected post feature for example if you use WordPress, or if you have a static HTML webpages, use FTP to block directories or folders.

USAGE – Insert the code in between the HEAD html  tags of your webpage. Remember to replace our url ‘YOURDOMAIN.com’ with the url of your webpage.

Password Protection Script 1

The javascript displays a form to enter the Username and Password. If either is wrong, it will display and alert screen like ‘Wrong Username’ or ‘Wrong Password’.

The username is set to ‘SECRET_USER‘ and the password is ‘SECRET_PASSWORD‘ – both can be set as you like. If both are right, then you are taken to the next URL, which is currently set to this YOURDOMAIN.com.

<script language="javascript">
function pasuser(form) { 
if (form.id.value=="SECRET_USER") { 
if (form.pass.value=="SECRET_PASSWORD") { location="http://YOURDOMAIN.com/" } 
else { alert("Wrong Password") } 
} 
else { alert("Wrong Username") } 
} 
</script>
<form name="login">
Username: < input name="id" size="6" type="text">
Password: < input name="pass" size="6" type="password">
<input value="Login" onclick="pasuser(this.form)" type="button">
</form>

Password Protection Script 2

Insert this code in the ‘HEAD’ tags of the HTML of the web page. When you enter the page, it will ask for a password, currently set to ‘SECRET_PASSWORD‘ (You need to change this to what you want). If the password is correct, you will be allowed to enter the page. Otherwise you can set it to redirect to any other page, currently it is set to YOURDOMAIN.com

<SCRIPT language="JavaScript">
var password; 
var pass1="SECRET_PASSWORD"; 
password=prompt('Enter Password',' '); 
if (password==pass1) 
alert('Correct Password! Click OK to Enter!'); 
else { window.location="http://YOURDOMAIN.com/"; 
} 
</SCRIPT>

Insert these scripts into your HTML code for simple password protection of your pages. But remember the warning as mentioned before.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.