Web developers are used to using the popular API XMLHttpRequest to send HTTP or HTTPS requests directly to a web server and load the server response data directly back to the script. XMLHttpRequest has an especially important role in Ajax web development where it is often used to implement responsive and dynamic web applications, such as Gmail, Google Maps, and Facebook.

Unfortunately, one troubling aspect of working with most browsers are using cross-domain requests involving two domains. On these browsers, XMLHttpRequests that use two domains are prohibited due to a security restriction called “same origin policy.” For example, if you are running a web application on appdomain.com and want to invoke an XMLHttpRequest on appdomain2.com, this would be prohibited.

According to this security policy, browsers prevents a Request loaded from one origin from getting or setting properties of a document from another origin. Mozilla has been using this security policy all the way back to Netscape Navigator 2.0, so it’s not likely to change soon.

Fortunately, there are a few ways to circumvent the “same origin policy” regarding cross-domain script loading:

• Introducing a Proxy Server: In this method, instead of directly calling the destination web page, a web page hosted in the same domain is called. Therefore, JavaScript or browser restrictions won’t block this request since it points to the same domain.



• JSONP: Even though browsers are reluctant to make cross-domain Ajax calls, another way to bypass them is by using <script> tags. With script tags (such as <script>, <img>, or <iframe>), the domain limitation is ignored, although you can’t do anything with the result as it is simply evaluated. However, by using JSONP you can pass a special parameter that gives the server some information about the page. So you have the server create a response in a way that your page can handle.

  For example, a server expects a parameter called “callback” to enable its JSON capabilities. The Request could be:

  http://www.xyz.com/sample.aspx?callback=mycallback

  Ordinarily, the server might return some basic JavaScript, like:

  { foo: 'bar' }

  But with JSON, the server can use the “callback” parameter to change the result to something like:

  mycallback({ foo: 'bar' });

  This will not invoke the method you specified. Your page can define the callback function:

  mycallback = function(data)
      alert(data.foo);
  };
  

  When loaded, the script will be evaluated, and the function executed. A third-party JavaScript library like jQuery can achieve the above functionality:

  $.ajax({
              url: “http://www.xyzdomain.com/test.aspx”,
              dataType: “jsonp”,
              success: function(data){
                          alert(data);
              }
  });



• CORS: Cross-Origin Resource Sharing (CORS) is a new specification from W3C that will enable cross-domain JavaScript requests that would otherwise be forbidden by same origin policies.

  According to CORS specifications, the caller will send a request by adding an “Origin” parameter (into request header) set to the request. If the request is approved by the remote endpoint, the caller will then receive a response that includes a particular parameter that denote success of the request is called “Access-Control-Allow-Origin” and is sent to any site to access the body of the HTTP response.

  CORS is a compromise that allows greater flexibility, but retains the security of same origin policies.

While CORS may be the ideal solution, the new specification is still in its infancy and few browsers support CORS at present (CORS is supported in Firefox 3.5 and later, the latest versions of Safari, and Google Chrome). Until CORS becomes a universal standard, it is best to stick with the JSONP via jQuery to achieve cross-domain data access.

Call us at 484-892-5713 or Contact Us today to learn more how to circumvent Cross Domain Security issues in Firefox.