How to find out if a user has visited any site

**inoMod** · 05-16-2009

Want to find out if a user has visited a specific website?
This works in all major browsers (tested in Firefox, IE, Opera, Safari and Google Chrome)

Just call this function with any url as an argument, for example:

Code:

visitedSite('http://www.google.com/')

And the function will return 1 if the user has visited the website, and 0 if not.

Note that the url you pass must match exactly an url in the users browsing history, for example, "http://www.google.com" will not match a visit to "http://www.google.com/" (notice the trailing slash).

This can be combined with large lists of urls and logging with ajax to find out alot of the websites your users visit.
Now if this is very nice to do I dont want to say, but it is pretty cool

Sorry for all the talking, here's the code:

Code:

visitedSite = function(url) {
	if (!url) { return false; }
	if (url.substr(8, url.length - 8).indexOf('/') == -1) { url += '/'; }
	if (document.styleSheets.length < 1) {
		var tmpStyleSheet = document.createElement('style');
		tmpStyleSheet.setAttribute('type', 'text/css');
		document.getElementsByTagName('head')[0].appendChild(tmpStyleSheet);
	}
	var sandbox = document.createElement('div');
	randomtoken = 'p' + Math.round(Math.random() * 1000000);
	sandbox.setAttribute('id', randomtoken);
	sandbox.style.display = 'none';
	document.getElementsByTagName('body')[0].appendChild(sandbox);
	if (document.styleSheets[0].insertRule) {
		var ruleIndex = document.styleSheets[0].cssRules.length;
		document.styleSheets[0].insertRule("#" + randomtoken + " a:link { color:rgb(255, 225, 255) }", ruleIndex);
		document.styleSheets[0].insertRule("#" + randomtoken + " a:visited { color:rgb(255, 220, 255) }", (ruleIndex+1));
	} else if (document.styleSheets[0].addRule) {
		var ruleIndex = document.styleSheets[0].rules.length;
		document.styleSheets[0].addRule("#" + randomtoken + " a:link", "color:rgb(255, 225, 255)", ruleIndex);
		document.styleSheets[0].addRule("#" + randomtoken + " a:visited", "color:rgb(255, 220, 255)", (ruleIndex+1));
	}
	var searchLink = document.createElement('a'), ret = 0;
	searchLink.setAttribute('href', url);
	searchLink.innerHTML = randomtoken;
	document.getElementById(randomtoken).appendChild(searchLink);
	if (searchLink.currentStyle) { 
		var searchLinkColor = searchLink.currentStyle.color;
	} else if (window.getComputedStyle) { 
		var searchLinkColor = document.defaultView.getComputedStyle(searchLink, null).getPropertyValue('color'); 
	}
	var linkColor = searchLinkColor.toString();
	if (linkColor == 'rgb(255, 220, 255)' || linkColor == 'rgb(255,220,255)' || linkColor == '#ffdcff') { ret = 1; }
	document.getElementById(randomtoken).parentNode.removeChild(document.getElementById(randomtoken));
	if (document.styleSheets[0].deleteRule) {
		document.styleSheets[0].deleteRule(ruleIndex);
		document.styleSheets[0].deleteRule(ruleIndex);
	} else if (document.styleSheets[0].deleteRule) {
		document.styleSheets[0].removeRule(ruleIndex);
		document.styleSheets[0].removeRule(ruleIndex);
	}
	return ret;
};

The way this works is to create a hidden link to the url specified, and check what color it gets in the browser, because all major browsers adds a :visited css psuedo-class to all links that has already been visited (they usually get purple with no styling). The link is then removed again and so are the css rules added, so you won't notice anything on the page or in the CSS, it all happens in a millisecond anyway.

This also means that this "hack" will work for a long time, because it does not depend on some kind of exploit, it's just the normal features that has been around in all browsers for a long time.

Well, hope you like it!