Scott V. Kissinger

I'm the founder of Serial Comma LLC, a lawyer by trade, and a techie at heart.

Password Protecting Static Sites

20 Sep 2020 » tech, jekyll
screen shot of ID and password login screen

Login Screen

This post describes a simple way to password protect a static website. This is not new information; I’m posting it here to remind my future self when the need arises.

This protection scheme is neither bulletproof nor scalable, but if you need a quick way to limit access to a website or a folder or file on a website, this may be the solution for you. It relies on the authorization functionality of the Apache HTTP server. If your website is not hosted on an Apache server, this may not work for you.

To take advantage of this Apache functionality, you will need to create two simple text files: .htpasswd and .htaccess. (The ‘ . ’ at the beginning of the file name is required and signifies that it is a system file normally hidden from view. To see the files in Mac’s Finder after you create them, press Shift + Command + {the . key}. The ‘ht’ in the file name stands for hypertext and tells Apache the file contains Apache-related information.)

The .htpasswd File

The .htpasswd file contains a list of IDs and passwords that will permit users to access the protected areas of the site. The IDs are in clear text; the passwords are cryptographic hashes of the actual passwords. Here is a sample .htpasswd file:

user_name_1:b8b1Ni0Hr/cqA
user_name_2:FcHlrhMfLKgIg
user_name_3:XMgoIbj9niZ/s

The passwords can be hashed using Apache’s crypt() function (as above), SHA-1, MD5, or bcrypt. You can easily generate the ID:password strings for the .htpasswd file using the Alterlinks password generator page, which lets you choose among the first three supported algorithms. The Aspirine site offers even more options.

Note that SHA-1 and MD5 are no longer considered secure algorithms, so it would be best to avoid them unless your hosting platform doesn’t support the more secure alternatives. The crypt() function uses SHA-2 algorithms (either SHA-256 or SHA-512) and bcrypt is based on Blowfish. Both are more secure than SHA-1 and MD5 and are considered adequately secure in today’s computing environment, but the relative merits of crypt() versus bcrypt are beyond the scope of this post.

The .htaccess File

The .htaccess file tells the Apache server which part of the website to protect and where to find the .htpasswd file. Here is a sample .htaccess file:

AuthType Basic  
AuthName "Access is Restricted"  
AuthUserFile /home/users/web/b9076/mysite/.htpasswd  
Require valid-user

The AuthType directive tells Apache to use the Basic authentication method. That method sends the password entered by the user to the server in clear text, so if greater security is required SSL should be implemented. Apache’s more secure alternative to Basic turned out not to be secure enough, so Basic is really the only choice here.

The AuthName directive tells Apache to identify the ‘realm’ to be protected as “Access is Restricted”. The realm name can be anything. Some web browsers display the realm name when prompting for the ID and password (hence the descriptive text in this example); the browser used for the example at the top of this post (Safari) does not. Other protected areas of the site with the same realm name will look to see if the user is already authenticated and, if so, will not require the user to re-enter their ID and password.

The AuthUserFile directive tells Apache where to look for the .htpasswd file. The path to the file must begin at the root of the host computer. If the site is hosted on a shared hosting service, the root of the host computer will not be the root of the site. In the example above, the .htpasswd file is in the root of the site; /home/users/web/b9076/mysite/ is the path to the root of the site. The path information was provided by the hosting provider.

Best practice is to put the .htpasswd file in a location that cannot be accessed by a web browser. If you are using a shared hosting service, you may be able to do this using the file manager accessible through the control panel provided by the hosting provider.

The Require directive tells Apache that only persons authenticated via the .htpasswd file may access the protected realm.

So what is the protected realm? There is no directive for that in the .htaccess file. Simple — the protected realm is the folder the .htaccess file is stored in and all the subfolders of that folder. To protect the entire site, place the .htaccess file in the root folder of the site.

If you want to protect only a file or certain files, you would place the Require valid-user directive inside the <Files> directive, like this:

<Files secret_file.pdf>
  Require valid-user
</Files>

Instead of a single file name, you can also use wildcards like *.pdf or even regular expressions. See the Apache documentation for more information.

A Final Note About Security

This method of password protection provides only rudimentary security. You should not use it to protect any content that is truly valuable, nor should IDs and passwords be used that are also used in other contexts (it is never a good idea to reuse passwords, but especially not in this case).

For Further Reading

Apache Documentation: htpasswd - Manage user files for basic authentication

Apache Documentation: <Files> Directive