Skip to main content

Creepy JavaScript Tracking

I recently began allergy shots so my new Monday morning routine includes me sitting in a doctor's office for 30 minutes (I must wait after receiving the shots and be checked by a nurse to make sure there was no reaction). With nothing else better to do while I waited last week, I started playing around with some JavaScript. This is what I came up with:
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript">
window.onload = function () {
    var mX = 0,  mY = 0,
        sX = 0,  sY = 0,
        queue = [],
        interval = 200,
        recIntv = null,
        playIntv = null,
        b = document.body,
        de = document.documentElement,
        cursor = document.getElementById("cursor"),
        record = document.getElementById("record"),
        play = document.getElementById("play");

    window.onmousemove = function (e) {
        e = e || window.event;
        if (e.pageX || e.pageY) {
            mX = e.pageX;
            mY = e.pageY;
        } else {
            mX = e.clientX + (de.scrollLeft || b.scrollLeft) - 
                (de.clientLeft || 0);
            mY = e.clientY + (de.scrollTop || b.scrollTop) -
                (de.clientTop || 0);
        }
    };

    window.onscroll = function () {
        if (window.pageXOffset || window.pageYOffset) {
            sX = window.pageXOffset;
            sY = window.pageYOffset;
        } else {
            sX = de.scrollLeft || b.scrollLeft;
            sY = de.scrollTop || b.scrollTop;
        }
    };

    record.onclick = function () {
        if (recIntv === null) {
            queue.length = 0;
            recIntv = setInterval(function () {
                queue.push([mX, mY, sX, sY]);
            }, interval);
            this.innerHTML = "Stop";
            cursor.style.display = "none";
            play.disabled = true;
        } else {
            this.innerHTML = "Record";
            clearInterval(recIntv);
            recIntv = null;
            play.disabled = false;
        }
    };

    play.onclick = function () {
        var i = 0;
        if (playIntv === null) {
            cursor.style.display = "inherit";
            play.disabled = record.disabled = true;
            playIntv = setInterval(function () {
                if (i < queue.length) {
                    cursor.style.left = queue[i][0] + "px";
                    cursor.style.top = queue[i][1] + "px";
                    window.scrollTo(queue[i][2], queue[i][3]);
                    i++;
                } else {
                    clearInterval(playIntv);
                    playIntv = null;
                    play.disabled = record.disabled = false;
                }
            }, interval);
        }
    };
};
  </script>
 </head>
 <body>
  <p>Press Record to track mouse movements and scrolling.
Press Play to view.</p>
  <button id="record">Record</button>
  <button id="play" disabled="disabled">Play</button>
  <img id="cursor" src="cursor.png"
   style="position:absolute; display:none;"/>
 </body>
</html>

Essentially the code watches your mouse movements and can play them back for you. A callback function is attached to the window object's onmousemove event to obtain the coordinates of the cursor (mX and mY), and a callback is attached to the onscroll event to obtain the scroll position of the window (sX and sY). To record the input, a simple function is called every 200 milliseconds to push the coordinate values onto a queue. Playback is done by reading from the queue and positioning a sprite and scrolling the window accordingly.

So what's the practical value of this, you may ask? Probably not much beyond spying.

Right from the early days of the commercial Internet, your online activity has been tracked and analyzed. Unfortunately (or fortunately, depending on your perspective) efforts over the years have increased the amount of data that can be collected and improved its accuracy. Gone are the days of relying solely on httpd access logs; today there is Google Analytics, evercookies, and even HBGary's Aaron Barr's social mapping scheme. We are being watched in more ways than we can imagine.

I showed the code to several friends and the consensus was the same. If there was any practical value at all to it, most likely that would be tracking. It's a trivial exercise to adapt it so the coordinates are posted back to the server for storage in a database. Once there, all sorts of analysis could be performed on them. Perhaps a heat map could be constructed to see which products on an e-commerce catalog page shoppers thought about clicking on. Marketers could then fine-tune their images and layout to increase conversion.

I don't have any intention of working on this code anymore; it's served its purpose for me as a brief diversion. The questions I've begun to ponder as a result of it though will endure longer than 20 minutes. Is this sort of tracking already in use, and if so then by whom? I'm not the first to play with this. What would be an easy way to thwart such tracking? Such tracking would probably happen unknowingly and it'd be unlikely there would be any opt-out. Where does one draw the ethical line between tracking and spying? It's understandable someone would want to get a better understanding of how their site is being used, but watching mouse movements seems kind of creepy.

So what are your thoughts? Leave your comments below and let me know what you think.

UPDATE 6/5/2011: I've uploaded this code to my JavaScript Experiments repository at GitHub if anyone is interested in playing around with it.
Labels:

Comments

  1. UnknownApril 12, 2011 at 6:24 AM

    Nice code. I read a paper about Microsoft tracking cursor movements to improve search: http://jeffhuang.com/Final_CursorBehavior_CHI11.pdf

    But it doesn't seem like they've deployed it. I looked at the network traffic when I visit Bing and it sends some data back to their servers but not my mouse movements

    ReplyDelete
  2. degzhausJune 9, 2011 at 6:10 PM

    I could see some applications to an A|B test suite! How's that for creepy..?

    Well Done ;-D

    ReplyDelete

Post a Comment

Popular posts from this blog

Writing a Minimal PSR-0 Autoloader

An excellent overview of autoloading in PHP and the PSR-0 standard was written by Hari K T over at PHPMaster.com , and it's definitely worth the read. But maybe you don't like some of the bloated, heavier autoloader offerings provided by various PHP frameworks, or maybe you just like to roll your own solutions. Is it possible to roll your own minimal loader and still be compliant? First, let's look at what PSR-0 mandates, taken directly from the standards document on GitHub : A fully-qualified namespace and class must have the following structure \<Vendor Name>\(<Namespace>\)*<Class Name> Each namespace must have a top-level namespace ("Vendor Name"). Each namespace can have as many sub-namespaces as it wishes. Each namespace separator is converted to a DIRECTORY_SEPARATOR when loading from the file system. Each "_" character in the CLASS NAME is converted to a DIRECTORY_SEPARATOR . The "_" character has no special ...
6 comments
Read more

Safely Identify Dependencies for Chrooting

The most difficult part of setting up a chroot environment is identifying dependencies for the programs you want to copy to the jail. For example, to make cp available, not only do you need to copy its binary from /bin and any shared libraries it depends on, but the dependencies can have their own dependencies too that need to be copied. The internet suggests using ldd to list a binary’s dependencies, but that has its own problems. The man page for ldd warns not to use the script for untrusted programs because it works by setting a special environment variable and then executes the program. What’s a security-conscious systems administrator to do? The ldd man page recommends objdump as a safe alternative. objdump outputs information about an object file, including what shared libraries it links against. It doesn’t identify the dependencies’ dependencies, but it’s still a good start because it doesn’t try to execute the target file. We can overcome the dependencies of depende...
Post a Comment
Read more

A Unicode fgetc() in PHP

In preparation for a presentation I’m giving at this month’s Syracuse PHP Users Group meeting, I found the need to read in Unicode characters in PHP one at a time. Unicode is still second-class in PHP; PHP6 failed and we have to fallback to extensions like the mbstring extension and/or libraries like Portable UTF-8 . And even with those, I didn’t see a unicode-capable fgetc() so I wrote my own. Years ago, I wrote a post describing how to read Unicode characters in C , so the logic was already familiar. As a refresher, UTF-8 is a multi-byte encoding scheme capable of representing over 2 million characters using 4 bytes or less. The first 128 characters are encoded the same as 7-bit ASCII with 0 as the most-significant bit. The other characters are encoded using multiple bytes, each byte with 1 as the most-significant bit. The bit pattern in the first byte of a multi-byte sequence tells us how many bytes are needed to represent the character. Here’s what the function looks like: f...
1 comment
Read more