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.


<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>	

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.


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)') {
			//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!');

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
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos


  1. Will

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


  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!