put sections into divs
[tools.git] / doc / htaccess.md
Maxious 1 [HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
2 table of contents](README.md)
3
4 # .htaccess
5
6 In Apache HTTP server, `.htaccess` (hypertext access) is the configuration file
7 that allows for web server configuration. HTML5 Boilerplate includes a number
8 of best practice server rules for making web pages fast and secure, these rules
9 can be applied by configuring `.htaccess` file.
10
11 **You'll want to have these modules enabled for optimum performance:**
12
13 * `mod_setenvif.c` (setenvif_module)
14 * `mod_headers.c` (headers_module)
15 * `mod_deflate.c` (deflate_module)
16 * `mod_filter.c` (filter_module)
17 * `mod_expires.c` (expires_module)
18 * `mod_rewrite.c` (rewrite_module)
19
20
21 ## On Windows
22
23 You've got a couple of options that depend on how you installed Apache.
24
25 1. **WampServer**. This is by far the simplest option. If you have installed
26 WampServer just click on the icon in the task bar, hover over the Apache
27 section in the menu that comes up and then hover over the modules section.
28 You will be presented with a list of modules. Simply click on a module name
29 to enable it (or disable it if it is already enabled). A check mark next to
30 a module indicates that it is enabled. WampServer will automatically restart
31 the Apache service after you enable a module.
32
33 2. **Manually editing `httpd.conf`**. This assumes that you have manually
34 installed Apache. You will need to locate the `httpd.conf` file which is
35 normally in the `conf` folder in the folder where you installed Apache (for
36 example `C:\apache\conf\httpd.conf`). Open up this file in a text editor. Near
37 the top (after a bunch of comments) you will see a long list of modules. Check
38 to make sure that the modules listed above are not commented out. If they
39 are, go ahead and uncomment them and restart Apache.
40
41 That's it, you're done!
42
43
44 ## On Linux
45
46 These instructions should work on any distribution where `apt-get` has been
47 used to install Apache.
48
49 1. Open up a terminal and type the following command. Enter your password when
50 prompted.
51
52 `sudo a2enmod setenvif headers deflate filter expires rewrite include`
53
54 1. Restart apache by using the following command so the new configuration takes
55 effect.
56
57 `sudo /etc/init.d/apache2 restart`
58
59 That's it, you're done!
60
61
62 ## On Mac
63
64 Coming soon...
65
66
67 ## Security
68
69 Do not turn off your ServerSignature (i.e., the `Server:` HTTP header). Serious
70 attackers can use other kinds of fingerprinting methods to figure out the
71 actual server and components running behind a port. Instead, as a site owner,
72 you should keep track of what's listening on ports on hosts that you control.
73 Run a periodic scanner to make sure nothing suspicious is running on a host you
74 control, and use the ServerSignature to determine if this is the web server and
75 version that you expect.
76
77
78 ## Performance
79
80 ### Configure ETags
81
82 ```apache
83 FileETag None
84 ```
85
86 Entity tags (ETags) is a mechanism that web servers and browsers use to
87 determine whether the component in the browser's cache matches the one on the
88 origin server. (An "entity" is another word a "component": images, scripts,
89 stylesheets, etc.) ETags were added to provide a mechanism for validating
90 entities that is more flexible than the last-modified date. An `ETag` is a
91 string that uniquely identifies a specific version of a component. The only
92 format constraints are that the string be quoted. The origin server specifies
93 the component's `ETag` using the `ETag` response header.
94
95 ```http
96 HTTP/1.1 200 OK
97 Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
98 ETag: "10c24bc-4ab-457e1c1f"
99 Content-Length: 12195
100 ```
101
102 Later, if the browser has to validate a component, it uses the `If-None-Match`
103 header to pass the `ETag` back to the origin server. If the ETags match, a 304
104 status code is returned reducing the response by 12195 bytes for this
105 example.
106
107 ```http
108 GET /i/yahoo.gif HTTP/1.1
109 Host: us.yimg.com
110 If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
111 If-None-Match: "10c24bc-4ab-457e1c1f"
112 HTTP/1.1 304 Not Modified
113 ```
114
115 The problem with ETags is that they typically are constructed using attributes
116 that make them unique to a specific server hosting a site. ETags won't match
117 when a browser gets the original component from one server and later tries to
118 validate that component on a different server, a situation that is all too
119 common on web sites that use a cluster of servers to handle requests. By
120 default, both Apache and IIS embed data in the ETag that dramatically reduces
121 the odds of the validity test succeeding on web sites with multiple servers.
122
123 The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a
124 given file may reside in the same directory across multiple servers, and have
125 the same file size, permissions, timestamp, etc., its inode is different from
126 one server to the next.
127
128 IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is
129 Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track
130 configuration changes to IIS. It's unlikely that the ChangeNumber is the same
131 across all IIS servers behind a web site.
132
133 The end result is ETags generated by Apache and IIS for the exact same
134 component won't match from one server to another. If the ETags don't match, the
135 user doesn't receive the small, fast 304 response that ETags were designed for;
136 instead, they'll get a normal 200 response along with all the data for the
137 component. If you host your web site on just one server, this isn't a problem.
138 But if you have multiple servers hosting your web site, and you're using Apache
139 or IIS with the default ETag configuration, your users are getting slower
140 pages, your servers have a higher load, you're consuming greater bandwidth, and
141 proxies aren't caching your content efficiently. Even if your components have a
142 far future Expires header, a conditional GET request is still made whenever the
143 user hits Reload or Refresh.
144
145 If you're not taking advantage of the flexible validation model that ETags
146 provide, it's better to just remove the ETag altogether. The Last-Modified
147 header validates based on the component's timestamp. And removing the ETag
148 reduces the size of the HTTP headers in both the response and subsequent
149 requests. This Microsoft Support article describes how to remove ETags. In
150 Apache, this is done by simply adding the above line to your Apache
151 configuration file.
152
153
154 ### Gzip Components
155
156 Compression reduces response times by reducing the size of the HTTP response.
157
158 Starting with HTTP/1.1, web clients indicate support for compression with the
159 Accept-Encoding header in the HTTP request.
160
161 ```
162 Accept-Encoding: gzip, deflate
163 ```
164
165 If the web server sees this header in the request, it may compress the response
166 using one of the methods listed by the client. The web server notifies the web
167 client of this via the Content-Encoding header in the response.
168
169 ```
170 Content-Encoding: gzip
171 ```
172
173 Gzip is the most popular and effective compression method at this time. It was
174 developed by the GNU project and standardized by RFC 1952. The only other
175 compression format you're likely to see is deflate, but it's less effective and
176 less popular.
177
178 Gzipping generally reduces the response size by about 70%. Approximately 90% of
179 today's Internet traffic travels through browsers that claim to support gzip.
180 If you use Apache, the module configuring gzip depends on your version: Apache
181 1.3 uses `mod_gzip` while Apache 2.x uses `mod_deflate`.
182
183 There are known issues with browsers and proxies that may cause a mismatch in
184 what the browser expects and what it receives with regard to compressed
185 content. Fortunately, these edge cases are dwindling as the use of older
186 browsers drops off. The Apache modules help out by adding appropriate Vary
187 response headers automatically.
188
189 Servers choose what to gzip based on file type, but are typically too limited
190 in what they decide to compress. Most web sites gzip their HTML documents. It's
191 also worthwhile to gzip your scripts and stylesheets, but many web sites miss
192 this opportunity. In fact, it's worthwhile to compress any text response
193 including XML and JSON. Image and PDF files should not be gzipped because they
194 are already compressed. Trying to gzip them not only wastes CPU but can
195 potentially increase file sizes.
196
197 Gzipping as many appropriate file types as possible is an easy way to reduce
198 page weight and accelerate the user experience.
199
200
201 ### Cache busting
202
203 A first-time visitor to your page may have to make several HTTP requests, but
204 by using the Expires header you make those components cacheable. This avoids
205 unnecessary HTTP requests on subsequent page views. Expires headers are most
206 often used with images, but they should be used on all components including
207 scripts, stylesheets, etc.
208
209 Traditionally, if you use a far future Expires header you have to change the
210 component's filename whenever the component changes.
211
212 The H5BP `.htaccess` has built-in filename cache busting. To use it, uncomment
213 the relevant lines in the `.htaccess` file.
214
215 Doing so will route all requests for `/path/filename.20120101.ext` to
216 `/path/filename.ext`. To use this, just add a time-stamp number (or your own
217 numbered versioning system) into your resource filenames in your HTML source
218 whenever you update those resources.
219
220 #### Example:
221