My script tracks clicks on a client's page and uploads this to my server(let's call it .)

Now I want the client to put a script on his site and this script will tag the clicks on the page and send the data to . on page leave or maybe even from time to time.

I can't use Ajax because of cross browser restrictions, ofcourse. So how do I do this? I'll give a little hypothetical code to help you understand. I have a closure tracker which is loaded when the user puts

<script src=".php?client_id=2332"></script>

The code loads the closure tracker=function(){....}; The user needs to create an object of tracker

<script>
track=new tracker();
track.init();
</script>

track.init() basically binds a function that gets the Xpath of the element and stores it in track.clicks . Now i need to have a function track.send() which will send the clicks array as json(I know how to convert it to json) and send it on page close.

How do I do this. Also I have seen some sites use something like:

 document.write("<sc"+"ript"+" src='.php?client_id=2332'"+"></scr"+"ipt>";

Why do this instead of a direct script tag? And why not put it in one string if we must use document.write() at all.

So the two questions are:

1. How do I send the data asyncronously(or otherwise) on page load?
2. What does the above code do?
3. I've seen Google analytics and Facebook do this, they don't seem to have any problems. Facebook infact renders the dialog box on screen. How?

My script tracks clicks on a client's page and uploads this to my server(let's call it .http://fancyclickserver23)

Now I want the client to put a script on his site and this script will tag the clicks on the page and send the data to .http://fancyclickserver23 on page leave or maybe even from time to time.

I can't use Ajax because of cross browser restrictions, ofcourse. So how do I do this? I'll give a little hypothetical code to help you understand. I have a closure tracker which is loaded when the user puts

<script src="http://fancyclickserver23/loadtracker.php?client_id=2332"></script>

The code loads the closure tracker=function(){....}; The user needs to create an object of tracker

<script>
track=new tracker();
track.init();
</script>

track.init() basically binds a function that gets the Xpath of the element and stores it in track.clicks . Now i need to have a function track.send() which will send the clicks array as json(I know how to convert it to json) and send it on page close.

How do I do this. Also I have seen some sites use something like:

 document.write("<sc"+"ript"+" src='https://fancyclickserver23/loadtracker.php?client_id=2332'"+"></scr"+"ipt>";

Why do this instead of a direct script tag? And why not put it in one string if we must use document.write() at all.

So the two questions are:

1. How do I send the data asyncronously(or otherwise) on page load?
2. What does the above code do?
3. I've seen Google analytics and Facebook do this, they don't seem to have any problems. Facebook infact renders the dialog box on screen. How?

• javascript
• jquery
• ajax

5 Answers 5

Despite the cross-domain security restrictions, you can still use AJAX (XHR) to some extent.

Browser can not trash a cross-domain request just like that. It has to see what the server thinks of it first. It does this by sending the actual request over to the server and receiving the instructions along with the response in HTTP headers. If the Access-Control-Allow-Origin header doesn't arrive or doesn't match the origin domain, browser trashes the response and throws out a security warning in the console.

From my personal experience, Access-Control-Allow-Origin header or not, when site aaa. sends an AJAX request to site bbb. the one-way delivery of the data payload to the server happens anyway. It's just a monologue, but what more do one need for collection of data, right? ;)

I, for example, utilize the one-way technique for something similar to yours - I collect JSON reports of unit tests results of my open-source project here. You can spot the security warning in the console, but at that time the report is already stored safely on the server.

use :

function sendData( data ){
  var scr = document.getElementById("scriptExchange");
  if(typeof scr == "undefined"){
     var scr=document.createEelement("script");
     scr.id="scriptExchange";
     document.body.appendChild(scr);
     scr = document.getElementById("scriptExchange");
  }
  scr.src = "http://another-website./?query="+data;

}

whenever you wanna send data call this funciton . .

now on the other server set the response to a pure JS code e.g.

alert("Data Received");

and in from the other server put the

If you can turn your array of click data into a query string, you could do the following:

var img = new Image(1,1);
img.src = "http://example./clicks-receiver?" + query_string;

You can use jQuery and jsonP to achieve this.

1) make Ajax call like following:

var url = your_other_domain_url + "jsoncallback=?";
var params = {param1:val1, param2:val2};
$.ajax({
  type: 'POST',
  url: url,
  data: params,
  success: function(data){
            //success jsonp handler - assume content in data.response
            if(data.response){
               //do something with the remote site content
            }
  },
  dataType: "json"
});

2) at server side, track any request that has parameter 'jsoncallback' and put the response inside the json return object such as

{status: 'success', response: "<html>.....resposne conent...</html>"}

Isn't it possible to use an iframe. The parent has visibility into the iframe, the iframe can run scripts back to the other server without jumping through a bunch of hoops. I believe our omniture implementation uses this method.

The img method as mentioned above is also a potential.

An older article on it:

http://www.codecouch./2008/10/cross-site-scripting-xss-using-iframes/

or another

http://blog.kotowicz/2010/11/xss-track-how-to-quietly-track-whole.html

Is it bad form to spread this stuff?