Check out my latest project: Code Dumper
18 Jan

How I achieved cross site scripting

Before I get flamed for claiming the impossible, this is how I achieved a goal that was entirely in AJAX, but I needed it to across different domains!

Some background: Some time ago I found, and implemented this awesome heatmap click tracking for the company I work for. However, since our test machines run everything from one machine (i.e. images and code), when it came to putting it live I never thought for a second it wouldn't work...which was the result.

It was because the page was being served from one domain, while the click tracking data was being sent to our 'static' (non-mod_perl) servers.

I'm posting this up because I think the heatmap is a superb tool for companies, in particular the designers and the marketing people.

Heatmaps will tell both groups whether a particular element is working to focus attention, or if in fact something else is drawing attention that they never thought of.

The way I got around this was to send the data via an 'iframe'.

The click tracking needs the server side to record the data, and doesn't require a response. So, although using AJAX to perform the click tracking (on mouse down from anywhere in the page), equally I can record a mouse down from my main page, but instead, I'm changing the 'src' attribute of an iframe which sends the co-ordinates to my static server.

So where he has used the following:

var url='guardacoordenadas.pl?x='+tempX+'&y='+tempY; guardar(url);

I am simply ditching the AJAX aspect of it and changing it to (assuming 'iframe' is a variable that I have already pointed to our iframe):

var url='guardacoordenadas.pl?x='+tempX+'&y='+tempY; iframe.src=url;

Here is a simple example of it working (note that Safari doesn't throw any errors on the cross domain button).

Then I would style the iframe to sit outside of the window:

position: absolute; left: -10000px

Hopefully this is some use to someone else out there.

6 Responses to “How I achieved cross site scripting”

  1. Blog Author remy January 18th, 2007 at 9:34 pm

    Actually, it's my intention to not even include the iframe in the HTML, and write a simple jQuery plugin to add the iframe to the foot of the body element.

    That way I don't end up with an iframe on the page if JavaScript is turned off.

  2. Corunet. El blog » The definitive heatmap January 18th, 2007 at 9:41 pm

    [...] By the way, there has been a post in remysharp blog explaining how to record the clicks in a different server. Thanks. Compartenos!:Estos son iconos de sitios web sociales. Es posible sugerirles esta página para que la recuerden o la publiquen. [...]

  3. David January 18th, 2007 at 9:41 pm

    Great!.

    I've already edited the post to link yours. Feels great to fint there are people clickmapping :)

  4. Will January 3rd, 2008 at 2:57 pm

    you have made one possible mistake (depending on what you intended). You appear to be using the query string to pass your variables through to your inner iFrame. This means that the browser cannot cache the url and is making a server request each time. Have you considered using bookmark instead (e.g. http://mycrossdomain.com#tempX=4&tempY=3 ). The advantage of this is that the bookmark component is not considered a different url, so your script would be loaded from the browser cache instead of the server.

  5. Blog Author Remy Sharp January 3rd, 2008 at 3:03 pm

    @Will - thanks for dropping by. You're right that if we wanted to cache the result, then doing it via the hash component (i.e. #xyz) would be pulled from the cache.

    However, for this particular problem, heatmap tracking, I needed it to always hit the server creating a record in the logs. It would almost justify cachebusting the URL requested. Cheers.

  6. Jason May 14th, 2008 at 2:27 pm

    I was looking at at your code. What you are doing is just loading an iframe. The question is can you get at any of the data within the iframe via a script?

     // Get the iframe 'if'
 var elem = document.getElementById('if);

 try{
  // Get the document contained in the iframe
  // An exception will probably occur here, let me know if it doesn't
  // Permission denied to get property HTMLDocument ...
  var returnedDocument = elem.contentDocument;
 } catch (e) {
 alert(e);
}
Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight