Alex Rodriguez » Code http://www.alexbr.com/wblog I don't play baseball. Mon, 07 Jun 2010 14:10:24 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Workaround for AJAX Cross-Domain Post Restrictions http://www.alexbr.com/wblog/?p=109 http://www.alexbr.com/wblog/?p=109#comments Wed, 27 Jan 2010 23:22:39 +0000 alex http://www.alexbr.com/wblog/?p=109 We recently developed an application that requires our partners to incorporate a piece of our html code in their browser page. This component would be responsible for collecting information and posting it back to our site via ajax for validation. The inclusion of our code would be done using server side includes so as to avoid using frames and for security reasons. The end result would be that the partner would send their page with our html component included in it back to the browser; the browser would show the partner url. All in all very unobtrusive.

Once the user enters their information into a form on that page, our script would take over and submit the information to our server, at a different domain, via ajax. Our server would return the result of the validation of the information.

There is only one very big problem with this approach – browsers currently consider such a cross-domain ajax post a vulnerability. Browsers will not allow an ajax post to a domain that is different than the domain currently in the browser location. Check out the same origin policy.

I won’t dive into an argument for or against allowing cross-site ajax posting here, instead I’ll just provide the mechanism we used to perform this post without using the standard ajax method, eg. XMLHttpRequest.

At a high level, what we do is this:

  • Capture user input on the client using javascript.
  • Construct a url containing our user input validation resource, a random identifier, and the query parameters from the user input.
  • Create a new “<script>” DOM node with a src reference to the constructed url. This results in an implicit request being sent by the browser for the javascript source.
  • Our server handles the request, validates the input, and returns pure javascript as a response. Embedded in this javascript is a function which will call javascript already sitting on the browser once it is loaded.
  • Once the javascript response is loaded into the DOM by the browser, the script is executed – performing whatever processing is necessary at the client.

Below is the main script. This code handles user input and submits the input asynchronously by inserting a new script node into the DOM. This forces the browser to request the src for that script node. On the server, that request is handled, the input is validated, and javascript is returned back to the client which just executes the ‘responseCallback’ method.

Main Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script language="javascript1.2" type="text/javascript">
// Validation url
var url = "http://your.host.com/validationresource";

// Callback method
var callbackMethod = null;

// Call this to kick off asynch server validation
function submitRequest(input1, input2, callback) {
  // Perform client side validation of input first
  // validateInput(input1, input2)    
 
  // Assign callback
  callbackMethod = callback;
  try {
    // Find dom node where we'll insert our "script" node
    var dynamicjs = document.getElementById("dynamicjs");

    // Remove if it already exists
    if (dynamicjs != null) dynamicjs.parentNode.removeChild(dynamicjs);

    // Create url with params and timestamp to prevent caching. I believe
    // the timestamp must be part of the resource url to force the browser
    // to reload the javascript
    var params = "input1=" + input1 + "&input2=" + input2;
    var jsurl = url + (new Date()).getTime() + "?" + params
    var fileref = document.createElement('script');
    fileref.id = "dynamicjs";
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", jsurl);

    // Insert the node which results in a browser request to the server
    if (typeof fileref != "undefined") {
      document.getElementsByTagName("head")[0].appendChild(fileref);
      return;
    }
  }
  catch(err){}  
}
// Callback method to be executed once a response comes back from
// the server validation
function responseCallback(response) {
  eval(callbackMethod(response));  
}
</script>

Below is the server code that handles the request, validates the input from the client, and returns a response that is basically a javascript file. That javascript file contains a script that calls the ‘responseCallback’ method above with the result of the input validation.

Server Code (Java):

1
2
3
4
5
6
ServletOutputStream out = response.getOutputStream();
String result = "ok";
response.setContentType("text/javascript");
response.setHeader("Cache-Control", "no-cache");
out.write(("responseCallback('" + result + "');").getBytes());
out.flush();
]]> http://www.alexbr.com/wblog/?feed=rss2&p=109 0