Tag Archives: htaccess

Save bandwidth, block image hot linking

Image hot-linking is (simply put): other site is showing your image that still on your server. This can cause problem for bandwidth limited website, they steal your bandwidth! Also, this doesn’t make visitor from that notorious site to come to your site.¬† More visitor for them, more bandwidth lost for you. We will handle this issue using htaccess.

Remember that to use .htaccess fully (including this tips), you have to activate Apache mod_rewrite.

In our case, we will allow only few sites that directly show/link our image. Other sites that have no permission will show an error/no leech image. This is the full .htaccess code:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^facebookexternalhit.*$ [OR]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ahowto.net [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?mp32u.net [NC]
RewriteCond %{HTTP_REFERER} !^.*google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^.*bing.com/.*$ [NC]
RewriteCond %{REQUEST_URI}  !^/images/no_leech.jpg
RewriteRule \.(jpe?g|png|gif)$ http://www.ahowto.net/images/no_leech.jpg [L]


The explanation:

  • (line 1) Activate rule only if mod_rewrite is activated
  • (line 4) we don’t allow Facebook bot to steal our image. Comment (#) this line if you want to allow Facebook to grab image from your site (this is used by Facebook to create thumbnail image whenever FB users posting your website¬† URL)
  • (line 6-9) allow only few sites to direct link/hot link our image: ahowto.net, mp32u.net, google.com and bing.com
  • (line 10) don’t apply the rule for “no leech” image that will be served to bandwidth leecher/stealer. Don’t forget this line, or you’ll get forever loop that eventually stress your webserver.
  • (line 11) Serve the leecher with our error/no leech image. I suggest you to use more informative image, such as image that contain messages “visit my site to view the image”
example no_leech image

just an example that might annoy bandwidth stealer

Special case for Wordpress

Yes, I know that there are few “anti-leech/anti-hot-linkplugins out there, but make sure they have the correct htaccess code placement. Make sure the placement is before main wordpress htaccess default code. So, your wordpress blog htaccess code would be like this:

# BEGIN Hotlink Protection

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^facebookexternalhit.*$ [OR]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ahowto.net [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?mp32u.net [NC]
RewriteCond %{HTTP_REFERER} !^.*google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^.*bing.com/.*$ [NC]
RewriteCond %{REQUEST_URI}  !^/images/no_leech.jpg
RewriteRule \.(jpe?g|png|gif)$ http://www.ahowto.net/images/no_leech.jpg [L]

# END Hotlink Protection

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress


execute html as php via .htaccess

Whenever a web site is accessed by users, the web server detect the file extension and decide what would it do with the file; directly served or run it as script. If the file extension is .htm or .html, the web server usually serve this file directly. If the extension is .php, the web server will run it as script using PHP interperter and serve the script’s result to user.

Some common problem: You discover an ideal piece of software, and you need to add this functionality in your website, however you have to use PHP in your web page for this to working properly. You can simply rename your own webpages to php rather than html, however, your URL is already indexed in search engine as .html file. Renaming your file into .php will render this .html page to be not found (404 error). And you need to resubmit the correct URL to search engine and waiting to be indexed again. What a pain!

There’s a simple solution for that. Just run the PHP codes inside HTML files! But this feature is not enabled by default. You need to add this line below in your .htaccess:

AddType application/x-httpd-php .html .htm

What does that line tell? It tells the web server to treat .html and .htm as PHP script, therefore need to run it against PHP interpreter before serving it to users.

Most of web host allowed you to change/have your own .htaccess file. Be careful when editing .htaccess file, it may already another server side settings for your website. If you didn’t see the file, try choose to “show hidden files” in your file manager (such as cpanel). If it’s still not there, then there’s no .htaccess file yet (not all site had .htaccess by default), so you can create an empty text file named .htaccess.

Achieving what W3 Total Cache does for your non-WordPress site

Before implementing this tips, your server/web host had to use Apache and activated all modules needed as I already posted.
W3 Total Cached had a good .htacess settings that will made your site/blog score higher in Google Page Speed and YSlow. I noticed that these .htaccess settings is quite generic and can be implemented in non-blog, non-Wordpress site.
Here’s the .htaccess settings that you need to copy and paste to your site’s .htaccess:

Options +FollowSymLinks

    AddType text/css .css
    AddType application/x-javascript .js
    AddType text/x-component .htc
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip

    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000

        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
        Header append Vary User-Agent env=!dont-vary
        AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon

        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    FileETag MTime Size

        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    FileETag MTime Size

        Header set Pragma "public"
        Header append Cache-Control "public, must-revalidate, proxy-revalidate"
    FileETag MTime Size

What it does?

  • enabling gzip compression, your site’s HTML codes will be compressed on-the-fly before served to users/visitors
  • minifying CSS, JS and HTML files from your site
  • add expiry header to your files based on file types
  • set ETag value
  • Specify a Vary: Accept-Encoding header

I’ve implemented this on mp32u.net, the result is as expected.

W3 Total Cache: score higher in PageSpeed and YSlow for your wordpress blog

On previous posts, I talked about enabling gzip compression and image compression on-the-fly for your WordPress blog. These two tips will reduce your blog size and eventually speeding up your blog page load time. In result, your blog will score higher in Google Page Speed and Yahoo YSlow scoring.
By installing W3 Total Cache plugin, you’ll achieve higher score. I can see that this plugin put some nice .htaccess settings for your blog that will make your blog score higher. W3 Total Cache tweaks some valuation components in Page Speed and YSlow valuation such as: minify CSS, JS and HTML; enabling gzip compression, ETag, Vary: Accept-Encoding header and specify cache validator.

Ahosto.net score result after implementing those three tips:

ahowto reduce page size

Reduce page size

ahowto score

Score higher!