Bookmarklets -- The Evil Lurking In Your Browser

Bookmarklets are incredibly useful tools. They can put your favorite sites at your fingertips as easy as dragging the icon in the location bar to your bookmark bar -- you can also drag RSS feeds, and you can drag scripts. While mostly benign, often very useful, and definitely under-exploited, bookmarklets are one of the biggest security holes lurking in your browser in addition to being the biggest thing waiting to hit the web since Ajax.

This tutorial will go over the uses and mis-uses of the bookmarklets. If you're a developer, you will --hopefully-- come away with a few new ideas for your site. If you're a casual user, you will --again, hopefully-- learn how much, profound, trust you are placing in a site when you use their bookmarklets.

Getting Started

To get started so you can follow along with this article, Firefox users need to right-click on their toolbar by the menu and check the Bookmarks Toolbar line. Internet Explorer users need to right-click on their browser's toolbar and make sure the links button is checked. These bookmark bars are just an area of your bookmarks which are always visible on the browser toolbar.

To use these toolbars you can just drag the current URL from your browser's location line to the bookmark bar. If you do it now then you will have an ever-visible button offering to bring you back to this article. That's not very exciting and useful, but if you subscribe to a RSS feed and tell it to save to the bookmark bar (or links in IE) it will act like a drop-down menu showing you the latest feeds which is, pretty nifty.

Totally Cool Bookmarklets

Where things get useful, and scary is that you can drag a javascript link to your browser location bar.

To see what's going on, add the following link to your bookmark bar. Firefox users can simply drag the link up to their bookmark toolbar. IE7 users need to right click on the link and select add to favorites then save it in their "links" folder. (IE7 will pop up a warning, and it's right to do so, but the next two links are safe and benign so go ahead and add them, and delete them when you're done with this article).

Once the bookmarklet has been saved, simply click on it to make ANY page on the internet editable. (Click anywhere on the document and start typing or click and image and resize it, click and drag to move items and pictures.).

Edit Any Page. (Hit reload to get rid of the effect)

Head on over to The Free Republic or The Democratic Underground or even The Drudge Report and edit them up to match your politics. Don't feel too empowered however, you're the only one who will see the changes you're making.

When you're done playing just hit reload to get back to the page proper, or the back-button to return to this article.

Great fun is waiting to be had! Here's a bookmarklet which will scoop up all the images on the page and have them start spiraling around.

Crazy Images (Hit reload to get rid of the effect)

I'm not very big on images, although this will play with the social bookmarking icons on this site. If you want to hit the big-time head over to Flickr and click the bookmarklet there.

These sort of cool effect scripts pop on Digg from time to time, if you see them and like them it's easy enough to add them to your bookmark bar. Just bookmark the current page, and copy the cool javascript code, but instead of pasting into your browser, edit the new bookmark properties (right click) and paste the javascript in as the url and then rename the title to something more descriptive.

Feel the power!

As a point of fact, Bookmarklets have not been exploited much to their full potential. Some of the social bookmarking sites use them to make submitting a site easier but even these are self-contained Javascript snippets, just slightly more useful versions of the slight of hand examples given above.

The examples above are self-contained javascript programs but it's possible for a bookmarklet to do nothing but attach a full-blown external javascript application. The social bookmarking site Ma.gnolia is one of the few sites pushing the boundaries of the bookmarklets. When you click their bookmarklet a full-blown javascript application is attached. Specifically Ma.gnolia.com's bookmarklet does this:

javascript:(
   function() { 
      var s=document.createElement("script");
          s.charset="UTF-8";
          s.src="http://ma.gnolia.com/meta/magframe";
      document.body.appendChild(s)
   })();

In plain English, when this bookmark is clicked, a new javascript element is created, it's given a utf-8 character-set, and the source code is set to http://ma.gnolia.com/meta/magframe This script is then appended to the document body where the external javascript application is automatically loaded.

In this case it's ma.gnolia.com's social bookmarking and review service. Which lets you visit any site on the net and if you like it you can click the bookmarklet, add it to your bookmarks, comment on it and review it. This is almost, but not quite a traveling message baord where you and a few thousand of your closest friends can comment on the sites you visit.

Here's the actual bookmarklet so you can see a little of what it does. (You'll see more if you're actually a ma.gnolia.com member and can log in.). When you're done just hit the X in the upper-right-hand corner to return to this article. You can either drag this to your bookmark bar or just click the link to activate it.

Ma.gnolia's Roots

If you'd like some more information on what exactly this snippet is doing, use you can check out my article Howto Dynamically Insert Javascript and CSS.

Feel the power of the dark side!

Now anyone with a breath of sanity will realize what just happened. Quite simply what ma.gnolia.com is doing is what's known as a script injection. It's not malicious of course, but the moment you click a scripted bookmarklet you give the originator of that bookmark total, perfect control over the site you are currently visiting.

I'm going to tell you a horror story now. It hasn't happened yet, but the terrifying thing is that it can happen, and most likely will happen. Somewhere, on the net, the cyber-mafia is creating a site, a site you will visit and like and it will ask you to use their bookmarklet and to click on it on sites you like. And you do.

And every time you click their bookmarklet, that bookmarklet downloads their javascript application which does a lot of nifty things, but one of the things it also does is check your page for credit card info, social security numbers, stock broker accounts, and other very personal stuff. And it can do this because when you click on that nifty bookmarklet you give them permission to do anything to the current page they want.

To give you an idea of just what a bookmarklet can do on a third party website here is a bookmarklet which will pop up a window on any page you visit, that window will display the cookies that site has set and it will display the elements of that page (pretty much a butt ugly version of view source).

Snoop Test

Now this bookmarklet is only displaying what it has access to, it's not sending data back to me (I'm on a budget hosting account, I have to watch my bandwidth after all). But this shows you just what a bookmarklet has access to (everything).

You can view the server-side source code for this bookmarklet at http://www.hunlock.com/examples/snooper.js. A version for Internet Explorer can be seen at http://www.hunlock.com/examples/snooper.txt since Internet Explorer tries to download .js files and run them as applications.

Quite simply you should never add a bookmarklet from any site you don't trust 100% and even then you should never click and activate a bookmarklet on any page which contains sensitive, personal information because if a bookmarklet can scoop up all the images on any page on the net and send them flying around, it can for sure take any form information and SEND them to any spot on the net and you'll never even know it happened.

How to make a simple bookmarklet

Now that I have just terrified everyone into never, ever using a bookmarklet, here's how to make one for your site, because they are useful and cool and you can do a lot of neat things with them if you can convince your users to trust you.

Scripted bookmarkletes rely on using depreciated javascript: urls. It's considered very bad form to use javascript in the HREF attribute of anchor tags but it's how and why bookmarklets work. Basically a bookmarklet can be as simple as this...

<a href="javascript:alert('Hello World')">My first Bookmarklete</a>

Which will produce this…

My first Bookmarklete

If you want to simply pass page information to a submit page (like many of the social bookmark sites do) then you're going to do a simple document.location.href redirect and encode some very basic information about the site you are on. For instance...

javascript:document.location.href='http://somedomain.com/submit.php?title='+encodeURIComponent(document.title)

This would redirect the current page to http://somedomain.com/submit.php and pass it the page title of the page where the bookmarklet was clicked on. You can of course add other information like the url, amongst other things.

How to make a bookmarklet application

There's a limit to how much you can do in a self-contained bookmarklet so if you want to do something serious then you'll need to take ma.gnolia's approach and load a javascript include file off your servers. A routine to do script insertion can be pared down to just this...

javascript:(function(){var s=document.createElement("script"); s.src="http://mydomain.com/script.js"; document.body.appendChild(s);})();

Now to make it a bookmarklet just linkify it by placing the script in the HREF attribute of a hyperlink.

<A HREF='javascript:(function(){var s=document.createElement("script"); s.src="http://mydomain.com/script.js"; document.body.appendChild(s);})();'>My First Bookmarklete App</A>

All you have to do is to replace http://mydomain.com/script.js with the URL to your javascript application and you are totally good to go. Anytime the user clicks on that bookmarklet the browser will reach out and grab your external javascript file and then execute the contents right then and there. This is just a standard javascript include file, it can contain objects, functions, variables -- commands outside of functions are executed as the script loads just like it was loading up a fresh web-page. And when it's done loading, your javascript has access not only to it's own functions but to the full document the script was invoked from.

Self Invoking Function?

As an aside, I think it's worth mentioning that this bookmarklet is what's known as a self-invoking function. That is the function is defined but without a name. The leading parenthesis defines the start of the function and the end of the function we close the curly braces } which defines the end of the function. Then there's a closing parenthesis ) which defines the end of the self-invoking function and just as importantly there's the attribute parenthesis at the end. In this case they are null (), however if we wanted to pass a value to our anonymous function we could load up the argument list here ('one', 'two', 'three', 'whatever').

So this function exists but only while it's being executed. You can't re-call it later because it doesn't have a name. It's a quirky little javascript construct that you don't come across every day so it's worth mentioning when you do. Here's the bookmarklet all broken out nice and neat so you can see the structure of the self-invocation.

 ( function () { 
      var s=document.createElement("script"); 
      s.src="http://mydomain.com/script.js"; 
      document.body.appendChild(s);
   } ) ();

An untapped sea of possibilities

As dangerous as bookmarklets are, they are only dangerous because they are so powerful. Used for good you can imagine full web-applications, like being able to attach a post-it note to any web page you come across, and see other post-its other people have made. They can power traveling message boards. For intra-nets you could use them to show tech support the exact page you are having trouble with. Or clip any page you want and save it in your own virtual storage space on a third party system.

A security company can use a bookmarklet to scan a page for malicious items, scripts, or phishing attempts. A music company could use it to provide a jukebox on demand. Social services could use it as a camera to take a snapshot of your page to use as a thumbnail on "my current likes" sections. The possibilities are so open ended it boggles the mind.

If web 2.0 is all about the social then nothing has more power to supercharge that concept than bookmarklets. As much credit as Ajax gets for web 2.0, even it is limited only to the domain from which it was created. Bookmarklets can reach out across the world and mash together any web page in the world with any javascript application you can create. It's just that powerful.

This is Ajax before Google made it famous. It's unrealized potential waiting to become an application. It's Web 3.0 to the people with the right idea and the tech savvy to exploit it. And it's a security nightmare that needs to be plugged.

Of course some bookmarklet applications have already been worked on and developed. If you're interested in seeing what other people have made of this browser quirk head on over and take a look at the following sites...

• Ten Must Have Bookmarklets From Lifehacker
• More must have bookmarklets

A Suggestion to Browser Makers

I think IE7 has the right idea... Just a nice polite warning saying "Are you really, really sure you want to bookmark this javascript, it's quite dangerous you know". Firefox's no-questions-asked approach is convenient but sooner or later someone is going to start using bookmarklets for evil if they haven't already, and while a warning prompt isn't a panacea but it does make the user think for a second about what he or she is doing and gives them the chance to reconsider.

For sure, both IE and Firefox need to both shut down javascript bookmarks if a secure http connection has been established. That's just a no-brainer. If you try to run a scripted bookmark when you're on a https:// secure page you should just get an alert box saying you cant run bookmark scripts while you're on a secure connection.

Conclusion

Despite the security concerns, if you're a web application developer or just a hacker with a cool javascript effect snippet then bookmarklets are everywhere you want to be. It would not surprise me in the slightest if the next big thing on the net was an application driven by bookmarklet applications. The Internet is all about the social and nothing enables that more than bookmarklets.