Grow your CSS skills. Land your dream job.

Easily Password Protect a Website or Subdirectory

Published by Chris Coyier

Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do.

.htaccess file

AuthType Basic  
AuthName "restricted area"  
AuthUserFile /path/to/the/directory/you/are/protecting/.htpasswd  
require valid-user

The exact path to the file is extremely important here. If you have it wrong, it will still ask for a password but nothing will seem to work. On Media Temple, my path looks like this:

/home/21410/domains/css-tricks.com/html/examples/PasswordProtected/.htpasswd

You should be able to to echo out a phpinfo(); on a page in that directory to scope this directory out.

 

.htpasswd file

css-tricks:csmBH6tTLNZBE

That is what the contents of the .htpasswd file should look like. One username and password per line, separated by a colon. Notice the password is encrypted though. You will need to use a special tool to encrypt your password in this way (MD5). David Walsh has a tool just for this.

In fact, I obviously first learned this from David as pretty much this exact same tip is on his site. Still, I think it's worthy of re-posting because this is an extremely useful tool to have in your toolbox.

See it in action

Live example here. Login/Password is css-tricks/css-tricks

Comments

  1. mikemc
    Permalink to comment#

    kinda of a newbie question, but will this work on any app server or just Apache?

    Thanks…

  2. Thanks for the reference!

  3. Peter
    Permalink to comment#

    I assume you want to educate the average user and you started out well : commented illustrations that are extremely helpful. But then suddenly something went wrong – what to make of this :

    You should be able to to echo out a phpinfo(); on a page in that directory to scope this directory out.

    I’ve absolutely no idea what you’re talking about !

  4. Kyle Kinnaman
    Permalink to comment#

    Peter – check out http://kb.iu.edu/data/abeq.html for more info. Some of it is specific to the university but it’s a decent primer.

  5. Thanks for the nice & simple explanation. I know that a .htaccess file protects all subdirectories under its path, so this looks like a great method.

    Do you know how safe the .htpasswd file is? If it is readable, and the MD5 encryption is reversable, wouldn’t that mean that it can be decrypted?

    Thanks :)

    • Permalink to comment#

      Yes, but you need to know the password in the first place to get to the encrypted password, so if you don’t know it you can’t decrypt it.

  6. Hazem
    Permalink to comment#

    Thanks!

    It gives us ideas for many possibilities

    Thank you

  7. This is an excellent resource, especially when making a beta site that isn’t ready to be revealed yet!

  8. Anton Eicher
    Permalink to comment#

    To Robert Augustin: MD5 is a one-way cryptographic hash function. Therefore it is impossible to decrypt a hashed password to get its original value. The way this authentication method works (I assume) is that the user enters a password, which is hashed and compared to the stored password hash for that username. If the two match, then authentication is successful. This negates the need for storing plain-text or decryptable passwords. MD5 does have its problems, however, and it is possible to find a text string which generates the same hash value as a stored password. To prevent this, a ‘salt’ value should be used when hashing..

  9. Peter
    Permalink to comment#

    @ Kyle – thanks for your quick response & helpful link, it’s much appreciated !

    I’ll make sure to read all with due care & attention, since I don’t want to drop some files in my site’s directory only to find that is has become completely inaccessible ;-)

  10. Anton,
    Thank you. If I understand correctly, that would call for a hash generator that adds salt values before encrypting the string. I don’t know if the above mentioned one (by David Walsh) does that – but I know how this works now :)

  11. Newbie question: How do I save .htpasswd and .htaccess files? I am having trouble saving them from TextMate and when I rename them after I FTP them, they disappear. What am I doing wrong?Also, from 1 to 10, how safe is this? Could I protect real stuff behind this or is this more for beta websites and such?

  12. that graphic guy
    Permalink to comment#

    love this stuff any way you can write more info on this subject with asp in mind? Thanks love the site

  13. @Nate: Some FTP clients don’t show you the .htaccess and .htpasswd files.

  14. In “Transmit” or “Coda” by Panic, there is literally a menu option for “Show Invisible Files”. In OS X, any file that begins with a period is “invisible” so you’ll need that turned on.

  15. I’ve found that some servers show me hidden files and others refuse to. Be aware of that.

  16. Good post. I was trying to find info on this about 6 months ago and had a hell of a time tracking down any good tutorials.

  17. Just to add: The Mac people can easily generate the encrypted passwords in Terminal with htpasswd which is included on every Mac:

    htpasswd -nb username password

  18. Overall a great tip.

    And thanks to kremalicious for his Terminal Tip too. I will be using that one.

    Like some others are asking, how safe is this? Can I use it for access to an admin area of a site that is out of beta and in use?

  19. put the htpaswd file outside of your root folder so it isn’t web accessible like:

    http://www.yourdomain.com/.htpasswd

  20. John
    Permalink to comment#

    MD5 hashes can be cracked with the use of rainbow tables.
    Does the password generator with Apache generate salted hashes ? I don’t think it does.

    As someone else already commented, the password file really should be stored outside of the web accessable tree. And the .htaccess file should be configured (by default in recent Apache) to not be browsable.

  21. JohnDBB
    Permalink to comment#

    Great tip, as usual! Congratulations for this website, my favourite at the moment! I’m not an expert at all, so regarding John comment above, how can I store the file outside of the web accessable tree? And how can I configure .htaccess to not be browsable? Thank you in advance!

  22. mike
    Permalink to comment#

    How do I save the .htaccess file in Windows? I get an error saying, file name required.

  23. Kyle
    Permalink to comment#

    Nice little htaccess tut. You should do a post about making a php login area to secure directories. Even better, each ‘persons’ login would have access to only a certain directory(s).

  24. Very useful, and thanks kremalicious for the mac terminal code.

  25. 20minutes
    Permalink to comment#

    This is a great tip!

    For anyone hosting on GoDaddy, the easiest way to do this is through your account manager. I tried doing it manually for quite a while after reading this tutorial, and I couldn’t get it to work properly. I finally found this article explaining another way to do it (and maybe the only way on GoDaddy) – http://help.godaddy.com/article/4057#protect

  26. Maria
    Permalink to comment#

    Have you ever seen where a browser will require the authentication multiple times before going through? I set up a password protected directory a while back through my host’s admin panel. I have access to the .htaccess file, but from what I can tell, not the .htpasswd. Everything in the .htaccess seems to be the same as you’ve outlined above, except the last line: it reads require user myusernamehere instead of: require valid-user I assume the encrypted password is the only thing in the .htpasswd file. In any case, do you think this could be a browser issue, or something in the way the host sets it up? I’ve tried to replicate the issue on other computers, but it never seems to be consistent.
    I suppose I could scrap the “admin panel way” and create my own files as this post suggests…. :)

  27. Permalink to comment#

    A few points I’d like to add:

    The hash algorithm used in the example .htpasswd in the article doesn’t look like MD5 at all, looks more like crypt() which is the default (except in Windows).
    MD5 is not encryption, it’s a one way hash/digest algorithm. Despite the name, crypt() is not an encryption either.
    Putting .htpasswd in the same directory as .htaccess, increases the chance of exposing the user and password hashes publicly. It’s probably wiser to put it outside of Apache’s DocumentRoot completely. Recent installations of Apache httpd probably has a rule that blocks direct access to .htaccess and .htpasswd files by default, but it’s not always the case.

  28. Permalink to comment#

    I concur with Ronny that the password isn’t hashed with MD5 at all.

    Also, for those on Windows, Notepad will save it if you enclose the filename in quotes (“.htaccess”) and choose “All Files” instead of .txt files. I don’t know is ANSI or UTF-8 encoding makes a difference. I don’t use Notepad for .htaccess files anyhow.

  29. John
    Permalink to comment#

    Before I ask my question, I’d just like to thank you for taking the time to make this website and offering your advice and expertise in the area of CSS. You have caused my knowledge in this area to grow “big time”.

    Now…my question…is there a way to use CSS to make the htaccess/htpasswrd look any way that I want to? Just like I would a regular html page?

    Thank you for your response. I am looking for a way to produce a login page for a website that I am developing. I like the idea of the “ht” method…but I want to make sure that I can control the look and feel of the page.

    Thanks again,

    John

  30. Permalink to comment#

    I love having this ability!

  31. Permalink to comment#

    Just for the record, and to answer the non-answered questions above – this is Apache-only. It will not work on IIS.

  32. Nic Stage
    Permalink to comment#

    It should also be mentioned that this is not the preferred method for securing directories in the case where you have access to Apache’s config (httpd.conf). You should configure directory security from there if you have access.

    As mentioned this won’t work on anything but Apache. Also, it won’t work if the directory you’re attempting to implement it in has: AllowOverride none

  33. Permalink to comment#

    When will people stop using IIS ? It simply sucks

  34. Permalink to comment#

    “When will people stop using IIS ? It simply sucks”

    Thats a supremely stupid comment to make :) IIS is a solid and secure product, hence its increasing market share. IIS 7 is a big leap in functionality too.

  35. Thanks for the tip! This could be very helpful!

  36. Matt
    Permalink to comment#

    How about a folder that you want to protect (not even read only to the public as it may have private code or passwords) but needs to be accessible by the webpages. For instance, a css subfolder, javascript subfolder, or a config subfolder with database username password, etc.

    Should I use folder properties or an htaccess file?

    Thank you for your great site.

  37. ray
    Permalink to comment#

    could i use this to password protect access to my hosts file on my computer?

    also, whenever i try to create the file it tells me I can’t use .htaccess or .htpasswd as a file, how can I fix that?

  38. Permalink to comment#

    I couldn’t get your live example to work.

  39. Mitchell
    Permalink to comment#

    Any idea when I upload all the files, the directory asks for the username and password, it doesn’t accept the password? It just keeps popping the login screen back up again and again. I used htpasswd command in terminal (mac) to generate the passwords. Any ideas?

  40. Thanks for this great tip. But is it possible that every time the user should provide username and password because on chrome while entering once username and password it opens all other times without entering credentials. Please help me out if there is way out.

  41. cheryl
    Permalink to comment#

    works great, but I now have the issue of my apple-touch-icon.png not saving to home screen on my ipad or iphone do you know away around this?

  42. sandeep
    Permalink to comment#

    i need to provied password protection to my web page i bulit it using html code but how to protect it using code & were i need to apply that code can u pls expalin???

  43. Marc Petersn
    Permalink to comment#

    I have the same problem Keshav Gyawali is having. I installed the files on my site, and went to my friend’s house to show him how to log in. He uses MS Internet Explorer (not Chrome, like K.G.) and, once we logged in the first time, just typing in the address took him back to the site, without the need to re-enter the password.

  44. Bryan
    Permalink to comment#

    Hey so I followed this exactly and it just now tells me I am not authorized to view the page, and I am never prompted to enter a username or password? What would the reason for this be?

  45. Kenneth John
    Permalink to comment#

    I wish to know that is it possible that till the user does not enter password he may also may not be able to view the source code by using ctrl + u

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".