Programming magic, glory, and juices.

AJAX: Bypassing XMLHTTPRequest Cross-domain Restrictions

July 27th, 2006


In AJAX, a lot of the time the use of the XMLHTTPRequest object is required. The only problem is that due to security in both Internet Explorer and in FireFox, the XMLHTTPRequest object is not allowed to make cross-domain, cross-protocol, or cross-port requests. The following is two ways that you can sort of bypass this restriction.

Method 1.

Have the XMLHTTPRequest object request a url that is on your domain that uses a scripting language such as PHP to retrieve the information that you want that is on another domain. If you are requesting the information

Method 2.

In the case where you want the XMLHTTPRequest to retrieve data from a service running on your server you can bind your service to a particular port. Then also have your service serve up your html page. That way you can do an IFRAME on your main page which contacts your service to serve up an html page, with the XMLHTTPRequest object which contacts your service again on the same port to get the data your service is serving up.

For example, http://localhost/ has <iframe src=”http://localhost:10102/?htmlpage”></iframe> which contacts your service that is binding on port 10102. The service then serves up whatever html page that you want. In the html page that is served up, a XMLHTTPRequest object contacts the server again an initiates an HTTP GET request to http://localhost:10102/?data. In this way you can bypass port restrictions and get the information that you need from another port.

Method 3.

Simply use an IFRAME with a source that is located on the domain you want to access. Inside the IFRAME use an XMLHTTPRequest object to get the data that you want. On your main page set a javascript timer to peer inside the IFRAME object and get the document and thus the data that you want. This is the only method I haven’t tried. It sounds feasible.

19 Responses to “AJAX: Bypassing XMLHTTPRequest Cross-domain Restrictions”
  1. Brad
     

    Method 3 does not work… the main page will not be able to access the IFRAME contents if it is not from the same domain.

  2. Nathan
     

    Yeah I found out that that didn’t work a while ago. Method 1 is probably the best way to go.

  3. John
     

    Method 1 works fine, but … what if the page that I am trying to get depends on sessions or cookies (displays different content depending on the client – for example the total amount in a shopping cart). Can this be sorted out somehow?

  4. Nathan
     

    John you can pass that information through the script in the query string or you can send that information through using a POST request. You pass the information to the PHP script and the PHP script passes it along.

  5. carlos
     

    I wonder if Method 2 would even work. Sure, your iframe can contact the service, but the results can not be written into the main frame using javascript because I believe the browser would treat the frame and iframe as two different domains (even if just the port is different). Anyone even tried this?

  6. david
     

    Hi Nathan, I’m trying to implement method 2 but I’m having difficulties in getting it working. I’m pretty new to the whole XHR cross-domain thing, am I right in thinking that if I want to make XHR requests from localhost:8080 to say localhost:8181 then method 2 is the right way to tackle this? I was also wondering if you had any sample code available? or any more details on this? Thanks

  7. Nathan
     

    This was a long time ago. From what I remember I believe I got it Method 2 working, but I am not sure about it working on both browsers.

    Actually what I’ve found, is that instead of creating a NT service and trying to use AJAX to connect to it on another port, it is better to just create an IIS ISAPI extension. IIS would host the ISAPI extension on the same domain. Then you could use AJAX to contact the ISAPI extension which could do whatever you wanted. Even gather information from database or get information from another site.

    For more information on what an ISAPI extension is or how it works with IIS see,

    http://www.codeproject.com/KB/ISAPI/isapi_extensions.aspx

  8. Tim
     

    Method 4
    I use a ProxyPass in the apache config to get around this. It looks like this.
    ProxyPass /XML http://otherserver:8080/XML

    In this case you have your ajax hit /XML? and apache will forward the request to http://otherserver:8080/XML?

  9. Saurabh Shyara
     

    Method 3 is not working and will not work at all

  10. azbest
     

    I found an other solution for cross domain things.

    They says it’s JSON, but I think it isn’t:
    http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html?page=2

    Based upon this, I made a simple test:
    http://linked.drag2web.com/crossdomain/

  11. Ralph Varjabedian
     

    Method 3 does not work straight away as the iframe can not communicate with the parent if it is from an outside domain.

    I have written an article on how to overcome this, take a look here:
    http://varjabedian.net/archive/2008/08/12/faster-asp.net-ajax-websevices-through-multiple-sub-domain-calls.aspx

  12. Ajax Development
     

    Yes I have just checked it and method 3 is not working for me as well.

  13. Pingback:
    Tunneling e proxy server per Ajax e non solo | Undolog.com
  14. Murray Todd Williams
     

    It looks like the one way to handle this has nothing to do with XMLHttpRequest. It’s called JSONP, and it requires you adhere to some conventions on the output your server returns. The trick is not to use iframes of XMLHttpRequests but instead to use JavaScript to dynamically create a request. You can pass data to the server via query strings parameters (a la “GET”) and you have the server return JSON-based data. Dojo and jQuery both implement this solution now.

  15. Jeff
     

    Hi,

    Method1: Can we have a sample code? Preferable Classic ASP+javascript

    thx
    Jeff

  16. Sudhee
     

    Method 2 & 3 can work if both of them read and write to window.name

  17. Sudhee
     

    This is another resource which will be of help – http://piecesofrakesh.blogspot.com/2007/11/how-to-build-readwrite-javascript-api.html

  18. Jakub
     

    Here is a solution http://www.ajax-cross-domain.com/ . Other posibility to solve cross-domain restriction is to use Flex. I didn’t try it, but it could be possibly ok.

  19. sharad verma
     

    thanks for this…
    Regards
    Sharad

Leave a Reply