Getting browser history using Javascript

Something we discussed recently at work was using Javascript to obtain the browser history of a user visiting your website. It was deemed a little black-hat but I'm not afraid of such things, so I set about writing a quick script to sniff a user's history.

Why

I read a rumour on the Internet recently that Dell were using such a script to work out whether you've visited competitor websites; allowing them to put their best offers under your nose in an aim to get your business. So under the premise that you've got a website with known competitors, how do you know if your visitor has visited them? That's where my little script would come in handy.

What it does

You enter the URL's of your competitor's websites into a Javascript array and set a colour for visited links in the CSS. Then it's just a case of checking the colour of the A-tags on the page; if you've visited them I'll know about it. So let's start looking at the code...

XHTML

All I've done is create a really basic page that just has a container and a div with the ID of 'sniffer'. This is the div that I'll use for calculating whether various places have been visited. So the code is really basic here:

view plain copy to clipboard print ?

<body>
<div id="container">
<div id="sniffer">
</div>
If all the links remain blue and you don't get an alert box, visit one of the links on the list and refresh the page.
</div>
</body>
Sniffer is empty for now and I've just placed some instructions on the page in case you've not visited any of my test URLs.

CSS
The crucial thing to do is ensure that you're setting a color for both a:link and a:visited within the 'sniffer' div, this will ensure we can perform colour checks on them later. So all I've got is:
view plain copy to clipboard print ?
1. #sniffer a:link
2. {
3. color:#0000FF;
4. }
6. #sniffer a:visited
7. {
8. color:#FF0000;
9. }
11. /*#sniffer
12. {
13. position:absolute;
14. left:-1000px;
15. }*/
17. So for regular links I'm telling them to be blue, whereas visited links are going to be red. Note that I've commented out the layout CSS for the #sniffer div; this would position it off-page so that visitors to the page wouldn't be able to see the list I'm checking. However I've commented it out so that (for demonstrative purposes) you can see what I'm checking.
  
  Javascript
  I'm using Mootools (yet again, no surprises there) for this, although you could do this with straight up prototype (or conventional Javascript probably). The framework doesn't matter too much, I'm just using Mootools because I have it handy and I know the selectors off the top of my head. Let's look at the script:
  view plain copy to clipboard print ?
  1. var competitors = new Array();
  2. competitors[0] = 'http://www.dell.com';
  3. competitors[1] = 'http://www.google.com';
  4. competitors[2] = 'http://www.yahoo.com';
  5. competitors[3] = 'http://www.ebay.com';
  7. var visitedPlaces = new Array();
  9. var visitedLink = '#ff0000';
  All I'm doing here is setting up the array of competitors; it can be as many items as you like but in this instance I've used 4 common URLs. I'm then creating an array that will store which links you've actually visited, as well as setting the colour I'm looking for. This colour is the one that we defined in the CSS earlier, note that the hexadecimal characters are lower case, this is important because of how Javascript reads the colour codes for items; it won't match if you leave it uppercase (not without doing a conversion anyway).
  view plain copy to clipboard print ?
  1. window.addEvent('domready', function()
  2. {
  3. var snifferContainer = $('sniffer');
  4. var snifferUL = new Element('ul').injectInside(snifferContainer);
  6. for(var i=0; i<competitors.length; i++)
  7. {
  8. var snifferLI = new Element('li',{'id':'snifferli'+i }).injectInside(snifferUL);
  9. var snifferA = new Element('a', { 'href':competitors[i]}).injectInside(snifferLI);
  10. snifferA.innerHTML = competitors[i];
  12. if(snifferA.getStyle('color') == visitedLink)
  13. {
  14. var currentPointer = visitedPlaces.length;
  15. visitedPlaces[currentPointer+1] = competitors[i];
  16. alert(visitedPlaces[currentPointer+1]+' has been visited');
  17. }
  18. }
  19. });
  As usual I'm initialising my JS on domready. I'm setting the sniffer container and creating an unordered list HTML element, which I then inject inside of the 'sniffer' div (there's no real need to do this, I just like using UL's to keep my work tidy). I'm then iterating through the competitors array and creating a new list item for each one, with a link to that URL (which are both then injected inside of the UL). I'm then setting the innerHTML of the element so that we can see something on the page (again, no real need to do this because realistically you're not going to show this to the user).
  
  All I'm doing after that is using the Mootools element.getStyle() function to obtain the 'color' attribute for the A-tag I've just injected. If the link colour matches the hexadecimal item set in the 'visitedLink' variable, then you've visited this URL. All I'm doing at this point is alerting that information out (so you can see it's working) and adding it to the array of visited places.
  
  Done! Nice, quick and easy but it could come in useful for increasing conversions on your website. It's a little underhand (read unethical) but that's business for you.

Wednesday, 29 October 2014