How to Password Protect a Web Page (Secure Methods + Simple Scripts)
Need to password protect a web page so only certain people can see it? Back in 2005 we shared two simple JavaScript scripts to do it. They still work as a light privacy screen, but anyone who views the page source can read the password. In 2026 there are much safer and still easy ways. Here’s how to password protect a web page properly, plus the original scripts (updated) if you just need a quick, casual lock.
Quick answer: On WordPress, set the page’s Visibility to Password protected. On a regular website, use your hosting panel’s Password Protect Directories option (or an .htaccess and .htpasswd file), which makes the server ask for a username and password before showing anything. Avoid JavaScript-only passwords for anything private.
Table of Contents
Secure ways to password protect a web page
1. WordPress password protected pages
In the WordPress editor, open the Visibility setting (in the Publish box or the post sidebar), choose Password protected, type a password and update. Visitors see a password form instead of the content. WordPress explains this in its content visibility guide. For stronger control, a membership or private site plugin can require users to log in.
2. Your hosting control panel
Most web hosts can protect a folder without any code. In cPanel look for Directory Privacy; on other panels (including Hostinger’s hPanel) look for Password Protect Directories. Pick the folder, add a username and password, and the server will block everyone else.
3. .htaccess and .htpasswd (Apache and LiteSpeed servers)
This is the classic server-side method, called HTTP Basic Authentication. Create a password file outside your public folder, for example with this command on the server:
htpasswd -c /home/user/.htpasswd yournameThen add this to the .htaccess file in the folder you want to protect:
AuthType Basic
AuthName "Private area"
AuthUserFile /home/user/.htpasswd
Require valid-userThe browser now shows a login box before loading any file in that folder. Always use HTTPS so the password isn’t sent in plain text. If you’re new to .htaccess, see our guide to .htaccess rules for 410 error pages for how the file works.
4. Nginx servers
On Nginx, the same idea uses the auth_basic and auth_basic_user_file settings inside a location block, as described in the Nginx documentation.
5. Cloudflare Access
If your site uses Cloudflare, Cloudflare Access can put a login page (for example, a one-time code sent to approved email addresses) in front of any page or folder. It’s free for small teams and doesn’t need any code on your site.
6. Website builders and static hosts
Many site builders and static hosting services include a page password setting, sometimes only on paid plans. Check your platform’s settings for “password protection” or “private page”.
Simple JavaScript password scripts (not secure)
These are our original 2005 scripts, cleaned up for modern browsers. They’re fine for hiding a fun surprise page or a draft from casual visitors, but remember:
- Anyone can view the page source and read the password.
- The protected page itself isn’t hidden. If someone knows its address, they can open it directly.
- They don’t work if JavaScript is turned off.
Never use them for personal data, client files or anything that must stay private.
Password script 1: username and password form
This shows a small login form. If the username and password match, the visitor is sent to the private page. Replace SECRET_USER, SECRET_PASSWORD and the page address with your own.
<form onsubmit="return checkLogin(this)">
Username: <input name="user" type="text">
Password: <input name="pass" type="password">
<button type="submit">Login</button>
</form>
<script>
function checkLogin(form) {
if (form.user.value === "SECRET_USER" && form.pass.value === "SECRET_PASSWORD") {
window.location.href = "https://YOURDOMAIN.com/private-page.html";
} else {
alert("Wrong username or password");
}
return false;
}
</script>Password script 2: password prompt on page load
Put this in the <head> of the page you want to lock. It asks for a password when the page opens and sends everyone with the wrong password to another page.
<script>
var password = prompt("Enter password");
if (password !== "SECRET_PASSWORD") {
window.location.href = "https://YOURDOMAIN.com/";
}
</script>Frequently asked questions
Can I password protect a web page without a server?
Only weakly. JavaScript passwords run in the visitor’s browser, so they can always be bypassed. For real protection you need the server, WordPress or a service like Cloudflare Access to check the password.
Is a password protected page hidden from Google?
Pages behind server-side or WordPress passwords can’t be read by Google, so their content won’t appear in search. Pages “protected” only by JavaScript can still be found and indexed.
How do I password protect a page on Google Sites or Blogger?
Neither offers per-page passwords. Instead, share the whole site or blog only with chosen Google accounts in its sharing or permissions settings.
I have inserted the script and when page loads I do get the password box, however, if I click ok on empty input box or cancel or type anything in the box, the page still loads. Any ideas?
I got the first one working – many thanks.
I cant seem to get any of the 2 codes working with my Blog this is the error that appears
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.
Anyone got any ideas
Does this only work on html editors like Dreamweaver or free website editors too?
Hi guys – I have it working.
Open your web page in a TEXT EDITOR. Within the first few lines there should be a line
html
(in triangular brackets) and then
head
(also in triangular brackets) and after a bit
/head
(and again) In between the lines containing and paste all of script 2, and DELETE the Triangular Bracket Exclamation Mark — from the 2nd line and the — Triangular Bracket from the 6th line. To change the website you go to if you get the wrong password, change https://www.quickonlinetips.com/ to what you want. To change the password, change secretpassword too what you want.
This is not a secure password, but works for sites that you would prefer to be private, e.g. space for family/friends etc.
RE: Comment by Manik | 6/10/08 #
As was stated,
“Hey guys just to tell you if you use this script anyone can get in no matter what password or username you use because if you view the page source you can see everything.I don’t want to be rude to the person you made this script, but I felt like warning you..”
The above should be a REAL concern to all and not to be disregarded. I know, most web crawlers don’t know about the Page Source routine, but all it takes is for someone “in the know” to tell someone who’s “ignorant” of it and your password is broken.
I hope you have better suggestions for password protection, like maybe a scrambling technique or something else.
Hey Fledermaus
all javascript code can be placed in a separate *.js file and link to html page by using (script language=javascript src=”yourjavapswdcode.js”)
hope this clears up your concern
hey, I can’t seem to get the code to work.
I tried both,
I put it in between the HEAD area,
but it doesn’t show
Does it have anything to do with the fact that my HEAD area stretches all the way to the end of my blogskin’s HTML code?
please reply by email and not by here.
Thank you. (=
Hey guys just to tell you if you use this script anyone can get in no matter what password or username you use because if you view the page source you can see everything….I don’t want to be rude to the person you made this script, but I felt like warning you..
Hey, i tried everything. I tried the username:password:. thing & it still doesn’t work. Could you please post up step by step plus screenshots. Thanks ;D
Hi! Thanks for this blog entry. I’m using the second code with blogger, but it’s making me enter the password even when I’m editing the page. Do you know what’s wrong?
To make this clearer – nothing shows up on the page except for the last half of the code:
Username: Password:
Thanks
Hello,
I love the idea of your scripting here – it’s exactly what I’ve been searching for for weeks! I needed something simple to grant access to client account pages…nothing crazy. The only problem is I tried the second code – nothing happened. So I tried the first one and all it shows is the info I want to password protect along with this at the top:
Username: Password:
Please help!
Thanks in advance!
Kate
Ok, every time I click Login, it says error on page.
HELP!
Username:Password:. This code works!
Try this code. Username:Password:. It worked for me. I hope this helps!
You can try filling in the gap between the “<” and the “input name” so it looks like this; Username:Password:. Hope it helps!
Hello. Nosle doesn’t work for me, I think it’s so difficult to understand and navigate through that site.
With regards to this post, I have tried BOTH codes and pasted them both as they are and they have not worked. All I get are some of the html coding appearing at the top of my page.
Is there anyone out there who can help me, please?
Thanks in advance.
Give nosle a shot. http://www.nosle.com/
You can protect any webpage or blog by adding 3 lines of code. No programming experience is required. It also provides a management console on its site where you can control access for your users. Javascript is required, which is the case for 99.99% of all websites today.
Hello! I have inserted the 2nd script as well in between the head tags, but when I view my site, the password prompt does not come up at all.
Help? I’m also using this for a Blogger blog.
Thanks – I’ve been searching online for a script like this, and yours is BY FAR the simplest one. :)
Looking forward to hearing back from you!
Just to be clear, the scripts above will work on a basic blogspot.com account? Meaning that if we send the URL to family/friends it will prompt them for a password before they are able to view the contents of the blog? Thank you!
Erm a little help here.. im currently using blogspot.. im not exactly tech savvy.. so could someone please detail alittle where im supposed to put in the html for this? i’ve tried in between the and .
thanks in advance.
Erm a little help here.. im currently using blogspot.. im not exactly tech savvy.. so could someone please detail alittle where im supposed to put in the html for this? i’ve tried in between the and .
hello. I’m using xanga, but I tried and it cannot really work. Can you reply to my email? thanks alot
hi i’ve a problem i inserted the second script on my blogger account in between the head tags as it is. but it still doesn’t show up. any clue what to do?
SORRY please ignore above comment as I have worked out what was going wrong. However, is there any way the password can appear as asterisks when people type it??
I have used the second version and it is working fine – thanks. The only thing I am struggling with is that unless you enter the correct password it is impossible to get back onto the website without without having to close and re-open the browser. In case any genuine users have forgotten the password and want to come back to the password-protected area later but surf the rest of the website in the meantime, can you provide code for an additional message such as ‘you have entered an incorrect password, please re-enter here or continue to browse the website here’?
just like justme. i have tried both scripts. deleted the _, put it between the head tags. yet, they’re not working! any clue?
I have tried BOTH scripts, modified without _ , and put right after Head tags, and they are not working!
When you say insert it between the head tags, where are these head tags? I don’t know which ones they are, can you make a screen shot possibly? Defining the exact location of where to input the HTML? Thank you.
where is “in between the HEAD tags of your webpage”
i tried using de java scrpiy, but it does not seem to work,
it jus keep appearin at de top of de blog..
plz help on where to put..
thanks
thanks, been looking for a simple password protect that you can put on the page itself. works like a charm.
for the second script, you need to take out the , as well as _ before both SCRIPTs.
in BlogSpot, yeah, put it between the head tags in the Edit HTML part.
sure, any decently experienced person can hit view source, and anyone using Opera can just check the ‘disable javascript’ checkbox on the prompt, but it keeps out the masses.
thanks!
I just cant get it to work..it become text on the top..and then my blog will come out..I need help..I dont understand!!
I couldn’t get any in-template tags to work, but I did get a password working by altering the tag:
Also, I added this to the styles in the :
body {visibility:hidden}
This way, when the page loads, all my blog content is hidden, so if they get redirected they never see anything, but if the password is correct, the body is set to be visible.
Can I add more than one username and password?
if someone has javasript disabled, and hits “view source”, he can see the url pointed to, and later continue into the “secret data” with litle or no effort (he can see the pass too, since it’s in clear text, inside the page).
this is no substitute for a decent ldap, or server side security system, shich is a must when data is really private.
also if you want your data be even safer, you mst use SSL for the transmisison as well.
let’s just hope this doesn’t get used wide spread.
just in case you WANT to use this script, just make shure you dont make the password “null”
Insert the code between the HEAD tags. Otherwise it will not work and will display on the page.
where should i put my script one?
I want to password block this because i have friends who want to gain access and i need help because words keep croping up and i can’t telll them to go away
it only appears on top of the screen. help?
i’m sorry but i still don’t get it. Can you please show me an example? Thanks alot
Please see that the all code inbetween the script tags of the code is inserted between the HEAD tags of your page. Maybe that is why the text is showing on your blog.
Hi;
I’m really keen to use these scripts, I’ve tried both html codes but I can’t seem to get the passwords to work. I would be really grateful. I’m mostly just getting the text appear at the top of my blog. Thanks heaps – awesome website!
I just have a basic blogger blog – do I enter the codes into the ‘Template’ section? If so, where in the Template html do I enter it? I’ve tried to enter it into the ‘head’ section and the password isn’t coming up…
Thanks for your help!
Works for me too. Thanks for the script. I have one question though. I noticed that the password prompt only appears when I type my Blogspot address exactly as it’s shown to me when I log in and go under Settings and then Publishing (ie. without the ‘World Wide Web’ part of the address). Is there a way to get the prompt to show up even with different variations of my address? By typing in my address starting with ‘www’, people can still access my blog without the password. Thanks in advance. I’m not very computer savvy. Any help would be appreciated.
I’ve been thinking… (I don’t know the Java language) how about using some one-way coding algorithm, so it could be more secure (the page storing the encoded form of the pw). something like this
works for me. nice post. simple, and stops the average person. i used the 2nd script.
thanks — mark
How would I insert something like this into wordpad?
I did what you said and it still doesn’t work
u have to remove the comments….so u remove the 2nd and the 2nd last line
I just see the scripts (Both) printed in my blog instead of implemented. Why doesn’t it work?
Any idea why I can’t get any of those scripts to work on my blog??? Could it be blogger blocking it? Please help!!! THANK YOU!
when creating a page or post click on the HTML tab and put it in there.