Hack 74. Configure Apache to Deal with Cross-Domain Issues | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Configure the Apache web server so that an Apache module provides a solution to the Ajax domain restriction.

As you probably know by now, XMLHttpRequest does not work automatically across domains. For example, when you download a web page, you cannot make a request using the request object to a domain that is different from that web page's domain. Fortunately, there's a simple solution to this restrictionthe Apache web server's mod_rewrite. "This module uses a rule-based rewriting engine (based on a regular-expression parser) to rewrite requested URLs on the fly," according to online Apache documentation (see http://httpd.apache.org/docs/1.3/mod/mod_rewrite.html).

Cross-Domain Blockade

Before we get into a description of this solution, let's examine an example set of functions that would typically form your XMLHttpRequest workhorse:

function getXmlHttpObject(  ){     if (window.XMLHttpRequest)         return new XMLHttpRequest(  );     else if (window.ActiveXObject)         return new ActiveXObject("Microsoft.XMLHTTP");     else {         alert("XMLHttpRequest not supported!");         return null;     } } function handleHttpResponse(  ) {     if (http.readyState == 4) {         results = http.responseText;         alert(results);     } } function doSomeStuff(  ) {     var post_arg1 = document.my_form.post_arg1.value;     var post_arg2 = document.my_form.post_arg2.value;     var post_url = 'http://yahoo.com/form_do'         post_data = 'post_arg1=' + post_arg1 + '&post_arg2=' + post_arg2;     http.open("POST", post_url);     http.setRequestHeader('Content-Type',              'application/x-www-form-urlencoded; charset=UTF-8');     http.send(post_data);     http.onreadystatechange = handleHttpResponse;     return false; } var http = getXmlHttpObject(  );

The last of the three functions that you see is the one that would be called on to perform the HTTP request.

Now, assume that this script is within an HTML file whose URL is, say, http://premshree.org/form. Some event handler (onBlur, onClick, onSubmit, etc.) in the form triggers doSomeStuff( ), which in turn makes an XMLHttpRequest request to form_do, that resides on another domain (yahoo.com).

Notice the mismatch between the domains of the HTML file containing the form and the JavaScript and the file that does the action (http://yahoo.com/form_do). That domain mismatch is the source of the problem.

Cross-Domain XMLHttpRequest Works... Kinda

IE and the Mozilla-based browsers handle cross-domain requests differently. You can do cross-domain requests in IE; however, this involves changing the browser's default security settings, or adding certain hosts to your "trusted hosts" list. From http://msdn.microsoft.com/msdnmag/issues/02/06/web/:

Since there is no way to specify which pages trust other pages to access their data, Internet Explorer simply says that if two pages are not in the same domain, they cannot communicate. More precisely, Zone Manager (found on the security tab in Internet Settings) does allow the user to say that a page may access another page, but as you point out, most people leave it set on prompt. You can suggest users add the page to the trusted site zone, or merely say Yes to the dialog box...

Mozilla, on the other hand, has the concept of signed scripts (see http://www.mozilla.org/projects/security/components/signed-scripts.html). In a Mozilla-based browser, you need to enable one or more of the UniversalBrowser privileges, depending on the different domains involved in the cross-domain request. For example, if you're accessing a remote host from your local filesystemthat is, accessing http:// files from file://you need to enable the UniversalBrowserRead privilege.

The reality of the situation is that cross-domain XMLHttpRequest requests don't work as well as you would want them to in the browsers you deeply care about (unless, of course, you're insane enough to compel unsuspecting, naive users to deal with things like signed scripts and trusted hosts).

Is There a Solution?

Yes, thanks to some mod_rewrite magic. All you need is the RewriteRule directive.

The configuration changes need to be made to the Apache configuration file (typically httpd.conf). Here are the steps involved:

Configure Apache with proxy enabled:
```
./configure --enable-proxy
```
Make sure RewriteEngine is enabled:
```
RewriteEngine on
```
Add the following rule:
```
RewriteRule ^/form_do$ http://yahoo.com/form_do [P]
```
The P flag that you see there indicates a pass-through proxy.

See http://www.google.com/search?q=pass-through+proxying.

Now, instead of requesting http://yahoo.com/form_do, use the URL /form_do in the JavaScript code. The request code looks like this:

var post_url = '/form_do';

That's ityou're done! Many thanks to Gopal and http://t3.dotgnu.info for a lot of the information described in this hack.

Premshree Pillai