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

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

What's Wrong with OOP

Proponents of Object Oriented Programming feel the paradigm yields code that is better organized, easier to understand and maintain, and reusable. They view procedural programming code as unwieldy spaghetti and embrace OO-centric design patterns as the "right way" to do things. They argue objects are easier to grasp because they model how we view the world. If the popularity of languages like Java and C# is any indication, they may be right. But after almost 20 years of OOP in the mainstream, there's still a large portion of programmers who resist it. If objects truly model the way people think of things in the real world, then why do people have a hard time understanding and working in OOP? I suspect the problem might be the focus on objects instead of actions. If I may quote from Steve Yegge's Execution in the Kingdom of Nouns : Verbs in Javaland are responsible for all the work, but as they are held in contempt by all, no Verb is ever permitted to wander about ...
9 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