When developing new websites I tend to place a sample version online for client to see. The problem is that I don’t want others to see the site or for google to index it, the removal of index pages of a sample site is a nightmare to sort out after the actual site goes live.
This can be avoided by simply password protecting the folder using a .htaccess and a .htpasswd file.
While this tutorial will not be an in depth discussion on how this works or the basics on how to protect against all kinds of attacks, it will help you when trying to stop prying eyes or bots from indexing the folder/site.
This solution requires two files to be created, one is the .htaccess file (if you do not already have one) and the other is the .htpasswd file. The .htaccess file will contain details about the authentication like the response of the popup box and the location of the .htpasswd file. The .htpasswd file contains the username and password (MD5 hashed) for authentication.
Lets go ahead and create the .htpasswd file, while the completed file has nothing but 1 line consisting of username:password, the password has to be encrypted. You can do this by creating a PHP script to encrypt the password for you or you can go ahead and do what I do, use an online .htpasswd file generator. I quite like the one available on htaccesstools.com.
The .htpasswd file usually looks something like this
You can also have more than one user, one user per line, like this
Once you have created your .htpasswd file go ahead and upload it to the directory you wish to protect. Now we can create the .htaccess file and point to the .htpasswd file.
In most cases, especially a WordPress based website, if you have enabled permalinks on your site WordPress would have created a .htaccess file in the root directory. Download this file to your PC/Mac so you can open it for editing, If you’re not using permalinks or you’re not using Wordress then you can simply create the file on your PC.
NOTE: Some ftp programs do not show .htaccess files as it does not register as a file due to the fact that nothing precedes the “.” before htaccess. I’m using FileZilla to get around this.
On a Windows based computer you can use notepad to create the file and then save it named as .htaccess and by “Save as type” select “All Files”.
In the .htaccess file paste the following
AuthType Basic AuthName "Password Protected Area" AuthUserFile /relative/path/to/.htpasswd Require valid-user
The AuthName is what to display in the response of the popup box, the AuthUserFile should point to the .htpasswd file you uploaded earlier on, make sure you the relative path for this. It will usually look something like this “usr/www/users/hostingaccount/.htpasswd “. Getting this dir path correct usually takes the most time when getting this right.
Upload the .htaccess file and refresh the page, if you have the path correct you should be presented with the “Authentication Required” alert box.
Hope this helps, Nathaniel.