How jQuery Resources Hotlinking will Affect your Applications

The jQuery team had made an announcement that hotlinking will be disabled from January 31, 2011. Let us see how this decision will this impact our applications if you are still hotlinking (hotlinking is bad).

In order to improve the performance and availability of our sites for all users, we have disabled hotlinking to images across our entire network. We will be disabling hotlinking to all other types of content (such as CSS and JavaScript) at the end of January. If your site is hotlinking to jQuery domains other than code.jquery.com, please be aware that you must update your site before this deadline or it will stop functioning normally.

So you should always download the script and resources to your server or use the ones hosted on the CDN. Read my post Latest jQuery and jQuery UI Theme links on Google and Microsoft CDN

Let us take the example of the jQuery UI Theme switcher widget and remove hotlinking in it.

Let’s say you have an application that uses the jQuery UI Theme switcher widget to stylize your controls. Up till now, developers (including me for demos) have been hotlinking to the script and resource file directly using the link http://jqueryui.com/themeroller/themeswitchertool/

Since hotlinking has been disabled, your widget will not show any thumbnail images anymore. What you will get is a HTTP 403 forbidden error

theme switcher blank images

Firebug confirms the 403 Forbidden message:

jquery hotlink ban

The solution is to download the theme switcher JavaScript code and images to your own server and modify the code to point to the images, you just downloaded.

Follow these steps:

Step 1: Create a folder called Script and download the theme switcher file. Rename the file to themeswitchertool.js. Remove/Replace the earlier reference and add a reference to this script file in your application

<script src="Scripts/themeswitchertool.js" type="text/javascript">

Step 2: Create a folder called ‘images’ and download the images to this folder. You can get the image names using Firebug as shown above.

Step 3: Now open the themeswitchertool.js file and find the references to the theme roller images in them. Remove the hotlinking by replacing the image url’s and pointing them to the images you just downloaded, as shown below:

change theme links

That’s it. You should now see the images showing up in the theme switcher widget

theme switcher images



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: