XMPP and Same origin policy problem

Question

I'm building a chat application using OpenFire server and JSJaC client library. The page loads from http://staging.mysite.com and XMPP runs on http://xmpp.mysite.com. As you can see they both share the same domain. So I use the following code on page load.

function OnPageLoad (){
    document.domain = "mysite.com";
    DoLogin();
}

Anyway it throws me exception saying that I violate the security. Why document.domain doesn't work? Should it work or is it done just for a "beauty"? If yes, what can be done in this specific situation?

I don't have access to the XMLHttpRequest object inside the library and do not control it.

Answer 1

Anyway. I had to dig a little bit deeper the JSJaC library and made some injections to the code. But first I've done some workaround. Basically I added the following headers to the response

Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, *

Generally this allowed to make crossdomain requests using a native xhr. However it proved to work in only modern browsers. For instance it didn't work in IE8 and any version of Opera simply rejected this header. Then I used flash based solution. I used flXHR and modified jsjac.uncompressed.js like this.

XmlHttp.create = function () {
    //  try {
    //    if (window.XMLHttpRequest) {
    //      var req = new XMLHttpRequest();
    //     
    //      // some versions of Moz do not support the readyState property
    //      // and the onreadystate event so we patch it!
    //      if (req.readyState == null) {
    //  req.readyState = 1;
    //  req.addEventListener("load", function () {
    //                 req.readyState = 4;
    //                 if (typeof req.onreadystatechange == "function")
    //               req.onreadystatechange();
    //               }, false);
    //      }
    //     
    //      return req;
    //    }
    //    if (window.ActiveXObject) {
    //      return new ActiveXObject(XmlHttp.getPrefix() + ".XmlHttp");
    //    }
    //  }
    //  catch (ex) {}
    //  // fell through
    //  throw new Error("Your browser does not support XmlHttp objects");
    var AsyncClient = new flensed.flXHR({
        "autoUpdatePlayer": true,
        "instanceId": "myproxy" + _xhrpf.toString(),
        // This is important because the library uses the response xml of the object to manipulate the data
        "xmlResponseText": true,
        "onreadystatechange": function () { }
    });
    // counter for giving a unique id for the flash xhr object.
    _xhrpf++;
    return AsyncClient;
};


var _xhrpf = 1;

Then I just added a crossdomain.xml in the root of the target domain. Now it works perfectly if the browser has the flash plugin.
Further I want to make some detection mechanism if there is no flash plugin, just make a native xhr and hope for that the browser supports the headers for cross domain requests.