HTML5 specification has introduced a few enhancements for XmlHttpRequest object and one of them is the ability to make cross-origin request. That is, a host can send a XmlHttpRequest request to another host and receive a response in return. On the server-side, a check can be made to see whether the request can be accepted from the given origin. In this post I'll try to explain how this can be done using ColdFusion.
Client side:
On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server.
For example, say example.com wants to get a response from another domain say abc.com, then as observed from the above code the request would look like:
Server side:
When a request is sent to the server, the request header would contain a key ORIGIN whose value will be the domain name from which the request was made. In this case the value would be example.com. The server side code can then perform a check to see whether the request origin belongs to the list of origins from which the request can be accepted.
Client side:
On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server.
var client = new XMLHttpRequest();
client.onreadystatechange = readyStateChangeHandler;
client.open("GET","http://{remote-address}/{path-to-file}.cfm",true);
client.send();
For example, say example.com wants to get a response from another domain say abc.com, then as observed from the above code the request would look like:
client.open("GET","http://abc.com/dir1/foo.cfm",true);
Server side:
When a request is sent to the server, the request header would contain a key ORIGIN whose value will be the domain name from which the request was made. In this case the value would be example.com. The server side code can then perform a check to see whether the request origin belongs to the list of origins from which the request can be accepted.
<cfif structKeyExists(getHTTPRequestData().headers,"origin") >
<cfset origin = getHTTPRequestData().headers.origin />
<cfif origin eq "http://example.com">
<cfheader name="Access-Control-Allow-Origin"
value="http://example.com">
<cfoutput>#timeFormat(now(),"medium")#</cfoutput>
</cfif>
</cfif>
Very cool - so you would only get a security error after the response has come back (if there is not access-control header). I like it. I think cross-domain stuff can actually be pretty useful, especially with the amount of AJAX that applications depend on these days.
ReplyDelete@Ben,
ReplyDeleteYou're right, if the response header doesn't contain the flag with the correct value, then a security error would be raised.
Does this work across all browsers and versions and particularly what is the earliest version of IE that supports this?
ReplyDelete@eap,
ReplyDeleteI have tested this on Chrome and I think Firefox supports it. On IE 9, I guess the support for XHR 2 is still not available.
I have to agree with Ben, it's so useful that I'll try it on my site. Thank you very much for sharing.
ReplyDelete