Javascript:use a Web Proxy for Cross-domain XMLHttpRequest Calls

The XMLHttpRequest object (also known as the XMLHTTP object in Internet Explorer) are at the core of today's most exciting AJAX Web applications. But actually writing the client Web applications that with this object can be tricky given restrictions imposed by web browsers On network connections across domains. This HOWTO provides describes the issue on simple, easy to understand language and provides one possible SOLUTION:A Web p Roxy that relays network requests from your Web server to services such as the Yahoo! Web Service APIs.

• Why do you need a Proxy
• PHP Proxy for Yahoo! Web Services
• Other Solutions
• For more information

Why do you need a Proxy

All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any Web server other than the one the Web PA GE originally came from (Internet Explorer would allow Cross-domain requests if the option have been enabled in the Preferen CES). If both your Web application and the XML data that application uses come directly from the same server, then you do not RU n into this restriction.

If, however, you serve your Web application from one Web server and do Web service data requests to another server- -for example, to the Yahoo! Web Services-then the browser prevents the connection from being opened at all. Bummer.

There is a number of solutions to this problem but the most commonly-used a-to-install a proxy on your Web server. Instead of making your XMLHttpRequest calls directly to the Web service, you do your calls to your Web server proxy. The proxy then passes the onto the Web service and in return passes the data back to your client application. Because the connection is made to your server, and the data comes back from your server, the browser have nothing to Compla In about.

For security reasons it's a good idea for any proxy, install on your Web server should is limited in use. An open proxy, that passes on connections to any Web site URL is open to abuse. Although it is difficult to limit the connections-your proxy from only your application, you can prevent the proxy from Making connections to servers other than those you specify. Hard code the URL to connect to in the proxy itself or provide limited options. This makes, the proxy less open, and less useful to users other than your client application.

PHP Proxy for Yahoo! Web Services

For the Yahoo! Developer Network JavaScript Developer Center We have provided sample code for a simple Web proxy, written In PHP, which takes requests for the Yahoo! Search APIs. You can install the this proxy on the your own Web server in any convenient location (your Web server must bes set up to run PHP).

The proxy encodes the Yahoo! Web Services site URL in a global variable called HOSTNAME. Ou'll need to modify this variable to refer to the Yahoo! Web Services API you'll be using. This are the domain used by the Yahoo! Search Web Services; Other domains include Yahoo! Local ( http://local.yahooapis.com ) and Yahoo! Travel ( http://api.travel.yahoo.com ).

define (‘HOSTNAME‘, ‘http://search.yahooapis.com/‘);

To use the PHP Web Proxy in your client application, the URL for the request in the JavaScript code includes the path for The Yahoo! Web Services request, minus the domain name. The domain name is added by the proxy itself on the server side. This code snippet comes from a to more complete XMLHttpRequest code Sampleon our JavaScript Developer Center.

// The web services request minus the domain name
var path = ‘VideoSearchService/V1/videoSearch?appid=YahooDemo&query=madonna&results=2‘;

// The full path to the PHP proxy
var url = ‘http://localhost/php_proxy_simple.php?yws_path=‘ + encodeURIComponent(path);
... // core xmlhttp code
xmlhttp.open(‘GET‘, url, true);

Note that although this example uses an HTTP GET request, the sample PHP Web Proxy also supports POST.

You could modify the proxy to does post-processing of the the data you get from the request on the server side, for example, to Strip out only the elements your ' re interested in or the parse the XML into a format you can more comfortably handle in Jav Ascript.

Other Solutions

In addition to using a Web proxy to pass Web services data to your application, there is several other options to working Around Cross-domain Browser restrictions:

• use Apache ' s  mod_rewrite  or  mod_proxy  to Pass Requests from your server to some other server. In your client code just make the request as if it is actually on your server – no browser problems with that. Apache then does it magic and makes the request to the other server for you.
• Use JSON and dynamic <script> tags instead of XML and XMLHttpRequest. You can get around the browser security problem altogether by making your Web services request directly inside a <script> tag . If the Yahoo! Web Service You ' re using can output JSON (using output=json callback= the and function parameters), the data you get BA CK from the Web service was evaluated as a JavaScript object when the page is loaded. See our JSON documentation for a example of how to does this in your own scripts.
• Digitally sign your scripts. In Firefox can apply a digital signature to your script and those scripts would then be considered "trusted" by the bro Wser. Firefox would and let's make xmlhttprequests to any domain. However, no other browsers support script signing at this time, so this solution is of the limited use.

For more information

For more information on JavaScript, XMLHttpRequest, Yahoo! Web Services APIs and other JavaScript development topics, see The Yahoo! Developer Network JavaScript Developer Center.

From:yahoo Developer Network

Javascript:use a Web Proxy for Cross-domain XMLHttpRequest Calls