.htaccess.htaccess file can do many powerful things. Some of its functions include redirection, password protection, restricting access based on certain conditions, and more. This post will look at how to setup an .htaccess file and implement a couple of its most common uses.
Initial Notes and Setup
.htaccess is commonly known as a “dot file”, due to it starting with a period or dot. Dot files are almost always some form of configuration file. Dot files can be for an operating system or a piece of software. By default, an operating system hides dot files in finder windows or any sort of system file manager. You typically have to select a “Show hidden files” option from your operating system’s preferences. Or you can use the ls -a command to display all files on the command line.
You can have multiple .htaccess files on a server, and each file always works recursively. This means that each file will effect the directory its located in, as well as all files and subdirectories.
If you’re using FTP to transfer your .htaccess file to a server, you must transfer via ASCII mode. By default, most FTP clients will transfer data via BINARY mode, which is ineffective for transferring dot files. There should be an option to set the transfer mode in your FTP client.
Once you have the file on your server, test to see that it’s doing what it’s supposed to be. If for some reason it seems that no changes have taken effect, it may be due to incorrect file permissions. File permissions for .htaccess should be set to 755. There should be a “File Permissions” option in your FTP client. Alternatively, you can run the command chmod 755 .htaccess in the terminal.
Custom Error Pages
The use of the .htaccess file allows for setting up custom error pages. This allows for more useful messages, in the advent a visitor encounters an error message. (Click to Tweet this Tip) The common “404 File Not Found”, “401 Unauthorized Access” or “500 Internal Server Error” messages can be fairly alarming. Having a way for the user to get back to where they intended to go can be helpful.
You can create your own custom HTML pages for each of the common error types. Additionally, you should place each of them in a directory called error_pages in your root directory. You should name each of the error pages only using its error code (i.e. 401, 404, etc.), followed by the .html extension.
To implement these error pages into your site, add the following code to your .htaccess file:
ErrorDocument 401 /error_pages/401.html ErrorDocument 404 /error_pages/404.html ErrorDocument 500 /error_pages/500.html
Page Redirection
Another common use of .htaccess is for page redirects. You can direct from any relative path within your site director. You can also redirect to either an absolute path on your site, or somewhere else entirely on the Internet. The basic syntax to use in your .htaccess file is:
Redirect /directory_to_redirect_from/ https://mysite.com/new_directory/index.html
You should always use a relative path as the source directory. An absolute path should be the directory to re-direct to.
htaccess file: Adding password protection
You can add password protection either to your entire site, or only to specific directories. A protected site or pathway will require a username and password to access. Once landing on a password-protected page, a pop-up from the browser will appear. Additionally, all passwords used in .htaccess get encrypted for added security.
To password protect a specific directory, navigate to that directory and create a new .htaccess file there. You can password protect an entire site by adding the .htaccess file to the root directory. Keep in mind that .htaccess will recursively password protect all files and subdirectories within the main directory.
The basic syntax for adding password protection is as follows:
AuthName "Authorized Access Only" AuthUserFile /htpassword-filepath/.htpasswd AuthType Basic require valid-user
AuthName "Authorized Access Only" indicates the name for the protected directory. “Authorized Access Only” will appear in the pop-up upon login.
AuthUserFile /htpassword-filepath/.htpasswd tells Apache where the .htpasswd file is. You should replace /htpassword-filepath/.htpasswd with the actual file path on your server for .htpasswd.
AuthType Basic signifies that Basic HTTP authentication will be employed. This is the most common type of HTTP authentication and more than adequate for most applications.
The last line, require valid-user, indicates that a username and password is needed in order to access the directory. If you would like to require a specific username, you can use require user name. Replace name with the specific username required. This is most often used for admin sections of a site you only want specific users to have access to.
Here’s a cool video showing how to create & edit an .htaccess file by Zac Gordon.
.htpasswd
You can place .htpasswd in any directory on most servers, so long as you place the absolute pathway for the file in .htaccess. Using a relative pathway or a URL will not locate the file. In some instances .htpasswd will need to be in the same directory as .htaccess, however. Additionally, you can name .htpasswd something else. Although this is a naming convention that Apache will automatically understand.
To add a password to .htpasswd, use the following syntax:
username:encryptedpassword admin:fs424sJK/67JGmn
You can have multiple usernames and passwords saved in a single .htpasswd file, each on their own line. Each username and password pair should be on the same line with no spaces, separated only with a colon.
Linux servers require that you use a password encryption service to encrypt the password. There are many such applications and websites that can do this for free. One option worth mentioning is ionix’s DirectoryPass.
Keep in mind that .htaccess does not allow for logout functionality. Once the correct login credentials have been input they get saved in the web browser’s cache until you quit the browser. Re-opening the page after quitting the browser will require that you enter the credentials again.
Denying access by IP address
One useful tool offered by .htaccess is the ability to block visitors based on their IP address. In this way, you can block certain visitors altogether. (Click to Tweet this tip) Alternatively you can block from certain sections of the site, by only adding an .htaccess file to a specific directory.
In order to block visitors based on their IP address, use the following syntax:
order allow,deny deny from 345.4.5.0 deny from 754.53.8. allow from all
The code in the example instructs Apache to deny access from the IP addresses 345.4.5.0 and 754.53.8. In the third line, the IP address 754.53.8 does not include a fourth group of digits, so any IP address that matches the first three would get blocked. This means that 754.53.8.2, 754.53.8.4, etc. would all get denied access to the site.
If you only want to allow access from specific IP addresses, rather than blocking, the syntax is very similar. You can use the code below:
order allow,deny allow from 345.4.5.0 deny from all
In this code, the only IP address that can access the site is 345.4.5.0 — all other IP’s will get denied.
In both cases (setting allowed or blocked IP addresses), you can add as many records as you like, each on its own line.
When an IP gets blocked, visitors will get shown a ‘403 Forbidden’ error message. As we saw before, you can customize Error Pages in order to provide more human-readable information to the visitor.
Preventing Hot linking
When another site sources assets from your site (such as images, video, CSS files, etc.), this unnecessarily uses up your bandwidth. This can lead to higher hosting costs without any attribution or benefit to you.
Fortunately, .htaccess has a way of circumventing this from happening, disallowing other domains from displaying your content:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?mycoolsite.com/.*$ [NC] RewriteRule \.(png|jpg|mp4)$ - [F]
Above, .htaccess disallows .png, .jpg or .mp4 files to get linked from a domain other than https://www.mycoolsite.com. You can specify other file formats to disallow (such as .css, .mp3, etc.). Of course, you will want to switch out the code with your own domain name.
To take it a step further, in the advent that an external site tries to link to your content, you can provide an alternative image or message to be displayed in its place (such as an image that says “Sorry, the content you are trying to access is from mycoolsite.com”):
If an external site tries to link to your content, you can provide an alternative image or message to get displayed in its place. An example is an image that says “Sorry, the content you are trying to access is from mycoolsite.com”.
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^https://(www\.)?mycoolsite.com/.*$ [NC] RewriteRule \.(png|jpg|mp4)$ https://www.mycoolsite.com/hotlink-error-message.jpg [R,L]
This will display hotlink-error-message.jpg whenever someone tries to link to .png, .jpg, or .mp4 files from mycoolsite.com
Resources
- Some common use cases of Sass
- 11 Simple Ways to Improve Your Contact Form
- Using Surge for deploying static sites (2018 Update)
- Backup WordPress: How to backup up your WordPress website (2018 Update)
- Refactoring CSS Code (2018 Update)
- Bash vs Zsh: A comparison of two command line shells (2018 Update)
- Did you just launch a new website? The ultimate guide on what to do next.
- Making API requests with JavaScript
- An Introduction to Version Control using Git (2018 Update)
- WordPress Designer
- Using node-sass to compile Sass files in an npm script
- Using WOW.js and Animate.css for Scroll-Triggered Animations
- Designing a simple navigation bar with Bootstrap 4
- Advanced Features of ECMAScript 6: The Ultimate Guide 2018
Author Bio
While always deeply interested in technology since childhood, Nicholas has been involved in web development in a professional capacity since 2012, as both a front-end developer and project manager.
He is most adept at HTML, CSS & JavaScript, but is interested in the entire spectrum of computer science. Some of his tech interests include full-stack JavaScript development, Unix-based operating systems, open-source web projects, and computer-assisted composition.
