Things to check for in your htaccess file
Here is a list of things you should check before you go live
Everyone uses .htaccess files for different reasons, but over the years I have noted a few things that generally seem to sneak themselves in - so I decided to draw up a list of things you might want to consider before go live on a site that relate just to .htaccess files.
A good lot of these are covered by the HTML5 Boilerplate, so if you are looking for a quick win you could always download it.
The tl;dr version is this quick list:
- Redirect to www
- Comments
- Forcing the latest version of IE
- Gzip compression
- Setting some expires headers
- Custom Error Pages
- Block access to certain file types
Redirect to www
A very common requirement for .htaccess is to redirect non-www traffic to the www. domain (or vice versa) .
This keeps traffic on your website consistent (which can be invaluable when trying to debug issues or gather statistics).
Here is the code you would need.
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP\_HOST} !^www\\.
RewriteRule ^ http://www.%{HTTP\_HOST}%{REQUEST\_URI} \[L,R=301\]
Comments
This will sound like a weird one, but I know a lot of programmers who comment absolutely everything but will never comment .htaccess files.
A quick comment can outline what you are intending various lines to do, which will save you a lot of angst in the long run, especially if your htaccess file is doing something non-trivial or mission critical.
Comments are created by starting a line with the # character. The rest of the line will then be ignored.
Here is a sample of a comment.
#The following redirects traffic to https, do not delete it.
Forcing the latest version of IE
We can do this in a couple of ways, but this is a nice quick way to easily apply the fix for IE. As well as forcing the latest version of IE it will also use the ChromeFrame if it is available.
This doesn’t need to be set for certain files, so we can exclude them.
<IfModule mod\_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
<FilesMatch "\\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
Gzip Compression
If possible we should try and compress anything coming from the webserver, it will help to make your website feel more snappy and save you some bandwidth.
<IfModule mod\_deflate.c>
<IfModule mod\_setenvif.c>
<IfModule mod\_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\\s\*,?\\s\*)+|\[X~-\]{4,13}$ HAVE\_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE\_Accept-Encoding
</IfModule>
</IfModule>
<IfModule filter\_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod\_filter.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
Setting some expires headers
There are a lot of files that should be cached at the earliest possible time by the browser to save them having to be downloaded several times.
The code to do this looks pretty verbose but covers most angles.
<IfModule mod\_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
Custom Error Pages
Custom Error Pages are an excellent way to customise your site, for example if your site returns a 404 error instead of showing the default page sent from Apache.
This is a pretty small bit of code.
ErrorDocument 404 /404.html
All this means is for the Error Document called 404, send the user to the page 404.html
Block access to certain file types
Oftentimes various text editors and programs will leave files that just end up getting uploaded with the other files when you update your website - best practice would be to not put these files on your web server but sometimes this cannot be avoided, and regardless of why they are there you should do something to tidy them up.
The following code blocks access to various files.
<FilesMatch "(\\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
Order allow,deny
Deny from all
Satisfy All
</FilesMatch>
Conclusion
There are plenty of other things .htaccess files can do, but these are the things I personally use most often, I hope you find them as useful as I have.