Password Protect Your Web Page

Hosmer23 0 861 Views

A handy code that brings up a password window to keep others off of the web pages you choose.

<script language="JavaScript">
var password;
var pass1="PASSWORD-HERE";
password=prompt('Whats The Magic Word?',' ');
if (password==pass1) alert('That Is Correct!');
else {
  window.location="SITE-LINK";
}
</script>

Dani AI

Generated

The prompt-based snippet posted by is a client-side trick, not real protection — anyone can read the page source, disable JavaScript, or alter the client to bypass it (as suspected). Client-side checks are useful only for UX, never for access control. OWASP Authentication Cheat Sheet. (cheatsheetseries.owasp.org)

Use server-side authentication and proper password storage instead. Store only a salted, slow hash (Argon2id / bcrypt) and verify on the server; do not rely on MD5 or SHA-1. Keep auth state in server-side sessions and issue cookies with Secure, HttpOnly and SameSite attributes. See the OWASP guidance on password storage and session management for recommended algorithms and cookie/session hardening. OWASP Password Storage Cheat Sheet • OWASP Session Management Cheat Sheet. (cheatsheetseries.owasp.org)

Minimal PHP pattern (illustrates server-side flow; adapt for frameworks and DB-backed users):

// before session_start()
session_set_cookie_params([
  'lifetime'=>0,'path'=>'/','secure'=>true,'httponly'=>true,'samesite'=>'Strict'
]);
session_start();

// verify (login handler)
$hashFromDb = '$2y$12$...'; // create with password_hash('Secret', PASSWORD_DEFAULT)
if (password_verify($_POST['password'] ?? '', $hashFromDb)) {
  session_regenerate_id(true);
  $_SESSION['auth'] = true;
  header('Location: /protected.php');
  exit;
}
// protect page (top of protected.php)
if (empty($_SESSION['auth'])) { header('HTTP/1.1 403 Forbidden'); exit; }

Use built-in helpers (PHP's password_hash/password_verify or equivalent libraries) rather than inventing your own crypto. PHP password hashing docs. (php.net)

Quick checklist: enforce HTTPS (Basic auth without TLS is unsafe), test the site with JavaScript disabled, avoid hardcoding passwords into pages or scripts, and prefer battle-tested framework auth or server-level protections for simple admin-only folders. For plain hosting with very few users, webserver auth (.htpasswd) is an option mentioned earlier, but still requires TLS for safety. MDN: HTTP authentication. (mdn2.netlify.app)

Member Avatar for Randy Epperson
Randy Epperson 0 Newbie Poster

I'm really new to Javascript so please pardon this naive question - if the value of the password is posted in line 3 and anyone can view the source of a page, how is the password protected?

Thanks

Member Avatar for Mohan0704
Mohan0704 0 Newbie Poster

You can make a new .js/.jse file and make variables containing the password. Still, you can get into it. Try to make it as secure as you can. But it wouldn't be worth it for just 1 web page...

Member Avatar for Mohan0704
Mohan0704 0 Newbie Poster

You can make a new .js/.jse file and make variables containing the password. Still, you can get into it. Try to make it as secure as you can. But it wouldn't be worth it for just 1 web page...

Member Avatar for Mohan0704
Mohan0704 0 Newbie Poster

sorry for the last post, my browser was laggy/not responding

Member Avatar for auvi1
auvi1 0 Newbie Poster

It does not work

Member Avatar for DealthRune
DealthRune 2 Light Poster

Try encrypting the password...

Member Avatar for DealthRune
DealthRune 2 Light Poster

Also, try this script

<html>
<head>
<script type="text/javascript">


var pass1='password';
var password=prompt("What's the magic word?","");
if (password==pass1)
  {
  document.write("Correct!");
  }else{
  document.write('Incorrect!')
  }

</script>
</head>
<body>

</body>
</html>
Member Avatar for jpdude11
jpdude11 0 Newbie Poster

help me please i do not know javascript well; how would you do multiple passwords its for a project

Member Avatar for dlannetts
dlannetts 0 Junior Poster in Training

hey ummm, can't you right click and "view source", read through and just get the password, or havee l missed the point?

Member Avatar for Hanabusa
Hanabusa 0 Newbie Poster

I need help too , I yes dont one no one to see my page only people i one them too see it

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

if you must use javascript, javascript security is a joke
hash the password, and only put the hash in your file
then hash the entered password and compare the hashes
it is more difficult to work an md5 or sha1 backwards to get the text

security is usually configured at the server
an ajax call to verify the password, or submitting the page for server verification is preferred to anything clientside

Member Avatar for Hanabusa
Hanabusa 0 Newbie Poster

So easily got it now

Member Avatar for EvolutionFallen
EvolutionFallen 107 Junior Poster

Personally if you're using Apache I'd just use htpasswd with .htaccess

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

.htaccess .htpassword is less efficient than per user access control through settings stored in the database with the user details.
The reason why all access controlled sites use this method instead of .htpassword.
What we do personally, becomes irrelevant when the site is not personal, still use .htpassword to further lock admin-only folders, belt and braces approach

Member Avatar for EvolutionFallen
EvolutionFallen 107 Junior Poster

If I'm understanding you correctly, bob, I completely agree with you that htpasswd is less efficient with more users. However if you're going to store a single pw in the code why not use htpasswd instead?

Member Avatar for NeakUp
NeakUp 0 Newbie Poster

So im using the code at the top of the page and it works great in every browser but internet explorer. It just auto redirects like you type the incorrect password in. Any help would be much appreciated.


I figured it out. I had to add it to a trusted list so that my computer trusted the site. I wonder if there is another work around on that.

Edited by NeakUp because: n/a
Member Avatar for stjhess
stjhess 0 Newbie Poster

is there any way to embed the window in the page?

Member Avatar for StephenHarry
StephenHarry 0 Newbie Poster

Can we use this code in any language , means is this code is compatible to other languages or not.

Edited by StephenHarry because: n/a
Member Avatar for MidiMagic
MidiMagic 579 Nearly a Senior Poster

You certainly can. That is as secure as having a guard snail on duty.

Member Avatar for bsemekanik
bsemekanik 0 Newbie Poster

thank you

Member Avatar for bob ★
bob ★ 0 Newbie Poster

hi codes work :) ★★★★★ go daniweb! ©2011 bob★ ★☆★☆★☆★☆

Edited by bob ★ because: n/a
Member Avatar for teedoff
teedoff 3 Posting Pro

Also, I dont recommend using javascript ONLY for any page protection/security.

Page security should be left up to server-side languages that are "stripped out" before the browser renders the html. Just my opinion though.

Member Avatar for alexispreatori
alexispreatori 0 Newbie Poster

What good can it do by putting a password at the very start of your website? Anyway this can help, it's from


<

HEAD>
<SCRIPT language="JavaScript">
<!--hide

var password;

var pass1="cool";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
  alert('Password Correct! Click OK to enter!');
else
   {
    window.location="http://www.pageresource.com/jscript/jpass.htm";
    }

//-->
</SCRIPT>
</HEAD>
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Member Avatar for cssMFCpro
cssMFCpro 0 Newbie Poster

As a reply for those who does't have any knowledge of html/css and programing language (php e.g) "if/else" are php base functions AND WILL NOT WORK ON simple basic html/css web pages (certanly not on Blogger free platform)

 <script language="javascript">
 function pasuser(form) { 
 if (form.id.value=="secname") {
if (form.pass.value=="secpassword") { location="urlhere" } 
 else { alert("Wrong Password") } } else { alert("Wrong Username") } }
 </script>
 <form name="login">
 Username: <input name="id" size="16" type="text">
 Password: <input name="pass" size="16" type="password"><input value="Login" onclick="pasuser(this.form)" type="button">
 </form>

Change secname and secpassword with what you want. This will work on individual webpages. urlhere? add your link webpage http address

Member Avatar for MidiMagic
MidiMagic 579 Nearly a Senior Poster

What happens if the user turns off Javascript? He gets into the page with no password.

Member Avatar for pixelsoul
pixelsoul 272 Red Pill

This is like "pretending" a screendoor is secure. You should never rely on Javascript for security.

Member Avatar for vickers_81
vickers_81 0 Newbie Poster

with reference to

As a reply for those who does't have any knowledge of html/css and programing language (php e.g) "if/else" are php base functions AND WILL NOT WORK ON simple basic html/css web pages (certanly not on Blogger free platform)

>  <script language="javascript">
>  function pasuser(form) { 
>  if (form.id.value=="secname") {
> if (form.pass.value=="secpassword") { location="urlhere" } 
>  else { alert("Wrong Password") } } else { alert("Wrong Username") } }
>  </script>
>  <form name="login">
>  Username: <input name="id" size="16" type="text">
>  Password: <input name="pass" size="16" type="password"><input value="Login" onclick="pasuser(this.form)" type="button">
>  </form>

Change secname and secpassword with what you want. This will work on individual webpages. urlhere? add your link webpage http address

how do i add additional users?

Member Avatar for chriswelborn
chriswelborn 63 ...

Please don't use this on anything that is truly important, or high risk. There are frameworks, tools, and other methods available to help you protect your site with very little effort. I'm not sure how you would do this safely in pure JavaScript, but on my site the couple passwords I need are either hashed or encrypted, and contained in a private file or database. I'm not saying that makes the site hack-proof, but its certainly better than storing them, and sending them over the wire, in plain-text. It's just like MidiMagic said.

Member Avatar for dasabel100
dasabel100 0 Newbie Poster

dlannets,
You cannot view the source of the page by right clicking, but you can view it in any other way.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview