{"id":19354,"date":"2022-08-30T21:01:03","date_gmt":"2022-08-30T13:01:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19354"},"modified":"2023-03-31T19:02:28","modified_gmt":"2023-03-31T11:02:28","slug":"guide-to-htaccess","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/guide-to-htaccess\/","title":{"rendered":"A Beginner’s Guide to .htaccess for Designers and Developers"},"content":{"rendered":"

Among the various tools for customizing your web server, the .htaccess config file is a tremendous asset. You can quickly reset document types, parsing engines, URL redirects<\/strong>, and many other crucial features.<\/p>\n

Designers or developers who are not very technical may not get into the specifics of managing their own .htaccess file. But the topic itself is fascinating and worth some investigation.<\/p>\n

For this article, I want to present some more purposeful concepts for designers and developers. Anybody who is launching their own website on an Apache server<\/strong> will want to understand how to manage their .htaccess file. It provides so much customizability<\/strong> and it can work across pretty much any web programming languages<\/strong>.<\/p>\n

At the bottom of this post I have added some external web apps to help newcomers generate their .htaccess files dynamically<\/strong>.<\/p>\n

Why use an .htaccess File?<\/h2>\n

This is a great question and perhaps we should start by answering \u201cwhat is a .htaccess file<\/em>\u201c?<\/p>\n

.htaccess is a very special configuration file used by the Apache web server. They can tell the web server how to present various forms of information and how to handle various HTTP request headers.<\/strong><\/p>\n

Really it is a means of decentralization<\/strong> to organize web server settings. One physical server may hold 50 different websites, each with its own .htaccess file. It grants a lot of power to webmasters, which would otherwise be impossible.<\/p>\n

But why should you use one?<\/p>\n

The biggest reason is security.<\/strong><\/p>\n

You can lock out certain directories or make them password protected<\/strong>. This is great for private projects or new CMS<\/abbr> (Content Management Systems) where you want a little extra security. But there are also common tasks like redirecting 404 error messages to a certain webpage.<\/p>\n

This only takes a single line of code<\/strong>, and it can dramatically impact how visitors react to missing pages.<\/p>\n

Truthfully, there is not much I can say to convince others that a .htaccess file is worth understanding. Once you see it in action, then you can recognize all of the value which comes from this tiny config file.<\/p>\n

Also, I hope the rest of this article may present some insightful topics to bring webmasters into the light of managing a .htaccess configuration.<\/p>\n

Allow\/Deny Access<\/h2>\n

It is possible to recognize potential spam visitors and deny them access to your website.<\/strong> This can be a little extreme. However, if you know that a person or group of people have been targeting your website, there are some options to choose from.<\/p>\n

You could pick a domain referral to deny or ban visitors by IP address.<\/p>\n

order allow,deny\r\ndeny from 255.0.0.0\r\ndeny from 123.45.6.\r\nallow from all<\/pre>\n
Notice the 2nd IP address is missing the 4th integer. This code block will target the first IP(255.0.0.0) and every IP within the range of 123.45.6.0-255,<\/strong> then allow all other traffic.<\/p>\n
Prevent Directory Listing<\/h2>\n
There will be times when you have an open directory that is set up to allow browsing by default.<\/strong> This means users can view all the files listed inside an internal directory structure, like your images folder.<\/p>\n
Some developers do not want to allow directory listing, and thankfully, the code snippet is pretty easy to remember.<\/p>\n
Options -Indexes\r\n<\/pre>\n
I have seen this answer presented countless times throughout Stack Overflow<\/a> and it may be one of the easiest .htaccess rules to remember.<\/p>\n
It is possible to actually create multiple .htaccess files inside each of these directories<\/strong>, so maybe one of them is password protected, but the others are not. And you can still keep the Options -Indexes<\/code> so that visitors cannot browse through your website \/images\/ folder.<\/p>\n
Password Protection<\/h2>\n
Password-protecting your directories is a very common procedure for securing administration areas and other folders crucial to your website<\/strong>. Sometimes you only want to offer access to a small group of people.<\/p>\n
Other times, passwords prevent hackers from gaining access to your website administration panel. But either way, it is a very powerful solution to a whole number of problems.<\/p>\n
To do so, we can add the rule below:<\/p>\n
AuthType Basic\r\nAuthName \"This Area is Password Protected\"\r\nAuthUserFile \/full\/path\/to\/.htpasswd\r\nRequire valid-user\r\n<\/pre>\n
Notice that we need to provide a file named .htpasswd<\/code>. This file should contain the username and the hashed password to allow access. Fortunately, you can simply use an external tool<\/a> that allows you to generate it easily.<\/p>\n
Security for WordPress<\/h3>\n
To put this password-protection idea to good use, let\u2019s display a real-world example. This more complicated code snippet will force user authentication <\/strong>for anybody accessing the WordPress\u2019 wp-login.php<\/em> file.<\/p>\n
You will find the original source on Ask Apache<\/a> which has numerous other WordPress protection snippets.<\/p>\n
<Files wp-login.php>\r\nOrder Deny,Allow\r\nDeny from All\r\nSatisfy Any\r\nAuthName \"Protected By AskApache\"\r\nAuthUserFile \/web\/askapache.com\/.htpasswda1\r\nAuthType Basic\r\nRequire valid-user\r\n<\/Files>\r\n<\/pre>\n
And if you are going to follow these .htaccess rules, it might also help to password-protect the admin area. Typically the wp-login.php<\/em> file is going to get the most hits from people attempting to brute force their way into your system.<\/p>\n
So even just the sample codes above would be more than enough added security<\/strong> for your WordPress website.<\/p>\n
HTTP\/HTTPS URL Rewrite Rules<\/h2>\n
Rewriting URLs is probably one of the most common uses for .htaccess files. WordPress default installations can actually generate an .htaccess file right from the administration panel<\/strong>. This allows you to create pretty URLs which do not have the .php?p=1<\/code> structure.<\/p>\n
I want to look at this rewrite example<\/a> on how to update underscores to dashes<\/strong> since it contains a lot of the most important elements<\/strong>.<\/p>\n
RewriteEngine<\/code> and RewriteBase<\/code> can almost always be set to these exact values. But you need the RewriteEngine<\/code> turned on for anything else to work.<\/p>\n
There are plenty of guides online<\/a> explaining how to enable mod_rewrite<\/code> and your hosting provider can also help.<\/p>\n
Notice the syntax follows a pattern of RewriteRules<\/code> at the top. These rules are used to match against cases that are being sent as an HTTPS request<\/strong>. These are answered by a RewriteRule<\/code> which in this case redirects everything to the domain d.com<\/em>.<\/p>\n
The ending brackets like [R=301,L]<\/code> are called rewrite flags<\/a> which are important, but more of an advanced topic.<\/p>\n
Options +FollowSymLinks\r\nRewriteEngine On\r\nRewriteBase \/\r\n \r\nRewriteRule !\\.(html|php)$ - [S=4]\r\nRewriteRule ^([^_]*)_([^_]*)_([^_]*)_([^_]*)_(.*)$ $1-$2-$3-$4-$5 [E=uscor:Yes]\r\nRewriteRule ^([^_]*)_([^_]*)_([^_]*)_(.*)$ $1-$2-$3-$4 [E=uscor:Yes]\r\nRewriteRule ^([^_]*)_([^_]*)_(.*)$ $1-$2-$3 [E=uscor:Yes]\r\nRewriteRule ^([^_]*)_(.*)$ $1-$2 [E=uscor:Yes]\r\n \r\nRewriteCond %{ENV:uscor} ^Yes$\r\nRewriteRule (.*) https:\/\/d.com\/$1 [R=301,L]\r\n<\/pre>\n
If you want to delve a bit deeper you can find a long list of flags on this cheatsheet webpage<\/a>.<\/p>\n
The mod_rewrite<\/code> syntax is definitely a little confusing but don\u2019t be intimidated! The snippets can look a lot easier in other examples.<\/p>\n
When just getting started, I have to recommend this mod_rewrite webapp<\/a> that helps you generate code samples using real URLs.<\/p>\n
This is a brilliant tool because you can look up various items in the syntax to see what they actually do in the Rewrite rules.<\/p>\n
But don\u2019t try to overload yourself on these all at once. It took me well over 3-4 months to really start understanding how to rewrite URLs with [0-9a-zA-Z]+ and similar patterns. Keep on practicing, and in time, I promise you will get this stuff like it\u2019s common-sense knowledge.<\/p>\n
Code Snippets for developers<\/h2>\n
I love easy-to-use snippets, and I want to put together this small collection of pertinent .htaccess codes for developers<\/p>\n
Each of these ideas can fit nicely into your own .htaccess file along with other code blocks. Most of these snippets are great for solving quick problems or fixes in your web server environment<\/strong>.<\/p>\n
Imagine the perfect Apache setup for brand new webmasters just getting started online.<\/p>\n
Setting DirectoryIndex<\/code><\/h3>\n
You can tell Apache which documents should be initially treated as the \u201cmain\u201d document with DirectoryIndex<\/code>. Typically you\u2019d want to target an index<\/code>-named files such as index.html and index.php<\/strong>.<\/p>\n
DirectoryIndex index.html index.php<\/pre>\n
The order of documents should start with the most important and move through the ranks to the least important. In the example above, if we do not have an HTML, then the fallback will go to index.php<\/strong>. And you could even name these files home.php<\/strong> or someotherfile.php<\/strong> and it is all valid syntax.<\/p>\n
Force \"www\" or \"non-www\" subdomain<\/h3>\n
Google can work with both versions of your website domain if you do not specify www.domain.com<\/em> or just domain.com<\/em>. In my experience, it is best practice to choose one of these and set it as the only choice<\/strong> via .htaccess.<\/p>\n
Then Google will not index various URLs, with some pointing to the WWW subdomain while others do not.<\/p>\n
# Force WWW Subdomain\r\nRewriteEngine On\r\nRewriteCond %{HTTP_HOST} ^domain.com [NC]\r\nRewriteRule ^(.*)$ https:\/\/www.domain.com\/$1 [L,R=301]\r\n\r\n# No Subdomain\r\nRewriteEngine On\r\nRewriteCond %{HTTP_HOST} !^domain.com$ [NC]\r\nRewriteRule ^(.*)$ https:\/\/domain.com\/$1 [L,R=301]\r\n<\/pre>\n
This code snippet comes from a CSS-Tricks archive<\/a> and provides a very handy solution.<\/p>\n
You should update the domain to be whatever you need for your own website. Otherwise, there will be problems, and you\u2019ll notice right away! But I do highly support forcing one of these two options and it is at the top of my tasks list after launching a new website.<\/p>\n
Force Media File Downloads<\/h3>\n
Another fairly important snippet allows forcing certain media types to download instead of being displayed in the browser<\/strong>.<\/p>\n
Immediately, I can think of PDF documents and MP3 audio files which may be presented in a downloadable format, but here is how you can force them to download<\/strong>?<\/p>\n
AddType application\/octet-stream .zip .mp3 .mp4\r\n<\/pre>\n
Feel free to include even more file types at the end of this line. All of the media formats using the octet-stream MIME type will be downloadable. Forcing this through .htaccess is a very direct route to ensure people are not able to view these files in the browser.<\/p>\n
Custom Error Documents<\/h3>\n
One last final piece I want to add is a full template of custom error documents<\/a>. Usually these number codes are only seen on the server end. But there are plenty of these error documents which you should be familiar with.<\/p>\n
A few examples might be 403\/404 errors <\/strong>and the 301 redirect<\/strong>.<\/p>\n
This error code template starts at 100 and moves upwards into 500 errors<\/strong>. Please note that you obviously do not need all of these. Only the most common errors would be necessary, and possibly a few obscure snippets if you feel the need.<\/p>\n
If you do not recognize a code just look it up on Wikipedia<\/a> to get a better understanding.<\/p>\n
ErrorDocument 100 \/100_CONTINUE\r\nErrorDocument 101 \/101_SWITCHING_PROTOCOLS\r\nErrorDocument 102 \/102_PROCESSING\r\nErrorDocument 200 \/200_OK\r\nErrorDocument 201 \/201_CREATED\r\nErrorDocument 202 \/202_ACCEPTED\r\nErrorDocument 203 \/203_NON_AUTHORITATIVE\r\nErrorDocument 204 \/204_NO_CONTENT\r\nErrorDocument 205 \/205_RESET_CONTENT\r\nErrorDocument 206 \/206_PARTIAL_CONTENT\r\nErrorDocument 207 \/207_MULTI_STATUS\r\nErrorDocument 300 \/300_MULTIPLE_CHOICES\r\nErrorDocument 301 \/301_MOVED_PERMANENTLY\r\nErrorDocument 302 \/302_MOVED_TEMPORARILY\r\nErrorDocument 303 \/303_SEE_OTHER\r\nErrorDocument 304 \/304_NOT_MODIFIED\r\nErrorDocument 305 \/305_USE_PROXY\r\nErrorDocument 307 \/307_TEMPORARY_REDIRECT\r\nErrorDocument 400 \/400_BAD_REQUEST\r\nErrorDocument 401 \/401_UNAUTHORIZED\r\nErrorDocument 402 \/402_PAYMENT_REQUIRED\r\nErrorDocument 403 \/403_FORBIDDEN\r\nErrorDocument 404 \/404_NOT_FOUND\r\n \r\nErrorDocument 405 \/405_METHOD_NOT_ALLOWED\r\nErrorDocument 406 \/406_NOT_ACCEPTABLE\r\nErrorDocument 407 \/407_PROXY_AUTHENTICATION_REQUIRED\r\nErrorDocument 408 \/408_REQUEST_TIME_OUT\r\nErrorDocument 409 \/409_CONFLICT\r\nErrorDocument 410 \/410_GONE\r\nErrorDocument 411 \/411_LENGTH_REQUIRED\r\nErrorDocument 412 \/412_PRECONDITION_FAILED\r\nErrorDocument 413 \/413_REQUEST_ENTITY_TOO_LARGE\r\nErrorDocument 414 \/414_REQUEST_URI_TOO_LARGE\r\nErrorDocument 415 \/415_UNSUPPORTED_MEDIA_TYPE\r\nErrorDocument 416 \/416_RANGE_NOT_SATISFIABLE\r\nErrorDocument 417 \/417_EXPECTATION_FAILED\r\nErrorDocument 422 \/422_UNPROCESSABLE_ENTITY\r\nErrorDocument 423 \/423_LOCKED\r\nErrorDocument 424 \/424_FAILED_DEPENDENCY\r\nErrorDocument 426 \/426_UPGRADE_REQUIRED\r\nErrorDocument 500 \/500_INTERNAL_SERVER_ERROR\r\nErrorDocument 501 \/501_NOT_IMPLEMENTED\r\nErrorDocument 502 \/502_BAD_GATEWAY\r\nErrorDocument 503 \/503_SERVICE_UNAVAILABLE\r\nErrorDocument 504 \/504_GATEWAY_TIME_OUT\r\nErrorDocument 505 \/505_VERSION_NOT_SUPPORTED\r\nErrorDocument 506 \/506_VARIANT_ALSO_VARIES\r\nErrorDocument 507 \/507_INSUFFICIENT_STORAGE\r\nErrorDocument 510 \/510_NOT_EXTENDED<\/pre>\n
Online .htaccess Webapps<\/h3>\n