How to Configure Apache 2 to Control Browser Caching

<div dir="ltr" style="text-align: left;" trbidi="on"> <h1 class="entry-title" style="background-color: white; border: 0px; box-sizing: inherit; font-family: proxima-nova, sans-serif; line-height: 3.4rem; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> <span style="color: #990000; font-size: large;"><u>Configure Apache 2 to Control Browser Caching</u></span></h1> <div> <span style="color: #222222; font-family: verdana, geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">In computing, a cache is a component that stores data so future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation, or the duplicate of data stored elsewhere. A cache hit occurs when the requested data can be found in a cache, while a cache miss occurs when it cannot. Cache hits are served by reading data from the cache, which is faster than recomputing a result or reading from a slower data store; thus, the more requests can be served from the cache, the faster the system performs</span></span><span style="background-color: white; color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;">.</span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGE0vFboU1RDlM2PymdSZ-OcIBmeu9LR2NYStOGsALIanAfrMFGIm5dH2H6qspA3FbDxvdiA11sZuVlASLc-HdtoGAdz5umTyNhUDcCUX0xPQt1qT_rBqD-LbBWymn4wm9sKududWUrk2W/s1600/HTTP-caching-last-modified_www.hackthesec.co.in.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGE0vFboU1RDlM2PymdSZ-OcIBmeu9LR2NYStOGsALIanAfrMFGIm5dH2H6qspA3FbDxvdiA11sZuVlASLc-HdtoGAdz5umTyNhUDcCUX0xPQt1qT_rBqD-LbBWymn4wm9sKududWUrk2W/s1600/HTTP-caching-last-modified_www.hackthesec.co.in.png" /></a></div> <div> <span style="background-color: white; color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"><br /></span></div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">Caching, as it pertains to hosting a website, is the temporary storage of content. This content could be images, files, bits of <a href="http://www.hackthesec.co.in/search/label/PHP">PHP</a> scripts that are precompiled, HTML pages, results of database queries, and other web objects.</span></span></div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="font-family: verdana, geneva, sans-serif;"><div> <b><u><span style="color: #0b5394;">Step #1: Verify Modules</span></u></b></div> <div style="color: #222222;"> Apache must be configured with the appropriate modules to leverage browser caching.</div> <div style="color: #222222;"> Let’s check for mod_expires (expires_module) first:</div> </span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">apachectl -M | grep expires</span></span></pre> </div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">should return:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">expires_module (shared)</span></span></pre> </div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">Then let’s check for mod_headers (headers_module):</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">apachectl -M | grep headers</span></span></pre> </div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">should return:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">headers_module (shared)</span></span></pre> </div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #0b5394; font-family: verdana, geneva, sans-serif;"><b><u>Step #2: Examples of Directives</u></b></span></span></div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">This code can be placed in the <b>.htaccess</b> files for specific directories, or in your root web directory, but we suggest placing it in your <b>httpd.conf</b>.</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;"><IfModule mod_expires.c> # Turn on the module. ExpiresActive on # Set the default expiry times. ExpiresDefault "access plus 2 days" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/css "now plus 1 month" ExpiresByType image/ico "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType text/html "access plus 600 seconds" </IfModule></span></span></pre> </div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;"><div> <ul style="text-align: left;"> <li>The default expiration (ExpiresDefault) is set to 2 days.</li> <li>Images expire after 1 month.</li> <li>CSS and JavaScript also expire after 1 month.</li> <li>HTML expires after 10 minutes (600 seconds).</li> </ul> </div> </span></span></div> <div> <span style="background-color: white;"><div style="font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"> <b><u><span style="color: #0b5394;">Step #3: Implement Directives</span></u></b></div> <div style="color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"> The above directives can be implemented easily. If you’re not already, <a href="http://www.hackthesec.co.in/search/label/SSH">SSH</a> into your server as root. Then edit the <b>httpd.conf</b> file..</div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">vi /etc/httpd/conf/httpd.conf</span></span></pre> </div> </span></div> <div> <span style="background-color: white; font-size: 15px; line-height: 26px;"><span style="color: #222222; font-family: verdana, geneva, sans-serif;">Find a section that looks like this:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;"># Further relax access to the default document root: <Directory "/var/www/html"></span></span></pre> </div> <div> <span style="background-color: white;"><div style="color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"> The section above (in this case) is the default document root. Add the expiration directives between <b><Directory “/var/www/html”> and </Directory>.</b></div> <div style="color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"> <b><u>Then restart Apache</u></b></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: trebuchet ms, sans-serif;"><span style="font-size: 15px; line-height: 15.6px;">systemctl restart httpd</span></span></pre> </div> <div> <span style="color: #222222; font-family: verdana, geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Full details for mod_expires can be found in the <a href="http://httpd.apache.org/docs/2.0/mod/mod_expires.html">Apache Documentation</a>.</span></span></div> </span></div> <div> <span style="background-color: white; color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"><br /></span></div> <div> <a href="http://www.hackthesec.co.in/">www.hackthesec.co.in</a></div> </div>

How to Configure Apache 2 to Control Browser Caching

Configure Apache 2 to Control Browser Caching In computing, a cache is a component that stores data so future requests for that data can...

Read more »