AJAX: Bypassing XMLHTTPRequest cross-domain restrictions
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.
November 7th, 2006 at 3:04 pm
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.
November 7th, 2006 at 4:42 pm
Yeah I found out that that didn’t work a while ago. Method 1 is probably the best way to go.
January 15th, 2008 at 3:36 am
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?
January 15th, 2008 at 9:50 am
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.
January 24th, 2008 at 2:19 am
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?
January 25th, 2008 at 8:59 am
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
January 25th, 2008 at 2:01 pm
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
February 22nd, 2008 at 2:59 pm
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?
June 5th, 2008 at 11:18 pm
Method 3 is not working and will not work at all
August 12th, 2008 at 8:30 am
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/
August 17th, 2008 at 11:24 am
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
August 23rd, 2008 at 12:03 am
Yes I have just checked it and method 3 is not working for me as well.
October 10th, 2008 at 8:24 am
[...] AJAX: Bypassing XMLHTTPRequest cross-domain restrictions [...]
January 8th, 2009 at 12:03 pm
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.
January 24th, 2009 at 12:39 pm
Hi,
Method1: Can we have a sample code? Preferable Classic ASP+javascript
thx
Jeff