18

I am trying to acess a wcf service from a jQuery client

Specifically this example http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#4

All works well when the client webpage is on the same domain as the service

As soon as I move the client webpage to another domain it breaks. It cant reach the service and the request fails

This happens for all the examples, ASMX, REST and WCF

any ideas how to get this working cross daomain?

ChrisCa
  • 10,876
  • 22
  • 81
  • 118

4 Answers4

10

You are running up against the Same-Origin Policy. The web service that you are accessing must reside on the same domain as the jQuery script that is making the request. This policy is enforced by all browsers to prevent - for example - cross-site scripting and code injection attacks on web applications.

There are various ways around it, including JSONP, Proxies or Flash.

We'll need a little more information before we can suggest which technique you should use. I tend to favor JSONP. But in the meantime, here's some light reading:

http://taossa.com/index.php/2007/02/08/same-origin-policy/

https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

Here's an example use of JSONP:

url = "http://www.test.com/getData.php?callback=parseResults";

document.body.appendChild((function() {
    var newScript = document.createElement("script");
    newScript.type = "text/javascript";
    newScript.src = url;
    return newScript;
})());

function parseResults(data) {
    alert(data);
}
GlenCrawford
  • 3,359
  • 3
  • 26
  • 34
  • So is the idea that you make ajax calls to a service on the same domain and that forwards requests to the intended service? But does so from server side code which does not have the sort of restrictions imposed by a browser? – ChrisCa Apr 23 '10 at 10:04
  • 3
    If you're talking about using a Proxy, then yes, that's exactly right. The SOP is enforced by the browser, therefore PHP, ASP, ColdFusion and so on are not bound by it. Your JS makes the request to the proxy, the proxy makes the request to the service, and then the proxy passes the result back to the JS. – GlenCrawford Apr 23 '10 at 10:07
  • I should probably point out that using a proxy may increase traffic and waiting times slightly, because you're now making two requests instead of one. JS --> Proxy --> Service – GlenCrawford Apr 23 '10 at 10:13
  • sure, understood. Well the info is ultimitely to be consumed by a Flash movie. So I thought having the containing page make requests from Javascript might be the best way. But it might be easier of the requests come from within Flash and I just apply a Cross Domain policy – ChrisCa Apr 23 '10 at 10:18
1

You might want to check out JSONP (JSON with Padding). In short, it involves adding a script element to the page with the web service url as the src. The web service then wraps the JSON as the first argument in a callback function, which is executed when the script is parsed.

Script elements are exempt from the Same Origin Policy, which is how they are able to get around this issue..

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • would adding a CrossDomain.XML be of any use? Or is it not that simple? – ChrisCa Apr 23 '10 at 09:54
  • 2
    @Christo Fur: adding a crossdomain.xml file to the domain that the web service resides on will enable Flash applications to make cross-site requests to the API, if the XML file allows the domain that the Flash application resides on (more info: http://jimbojw.com/wiki/index.php?title=Cross-domain_Ajax_via_Flash) – GlenCrawford Apr 23 '10 at 09:56
  • @Christo Fur: +What RoseOfJericho said. You could look into the `Access-Control` headers, but they're not widely supported by browsers (might only be Fx) and IE8 requires you to use `XDomainRequest()` instead of `XMLHttpRequest()`. JSONP is really your best option for x-browser compatibility. – Andy E Apr 23 '10 at 10:06
  • @Christo Fur: I've heard that Chrome partially supports Access-Control-Allow-Origin and related headers, but yes, by relying on the Cross-Origin Resource Sharing specification (still in working-draft phase at W3C), you're really only making your website usable by Firefox users...for now. – GlenCrawford Apr 23 '10 at 10:10
  • Is it possible to post data using JSONP? or does everything have to be passed in the query string? – ChrisCa Apr 23 '10 at 11:24
0

Typically, you won't be able to; modern browsers restrict this to prevent cross-site scripting attacks. One way around it may be to use "padded" JSON, JSONP, which inserts the results in a script element on your page. There's a Microsoft WCF sample here which seems to do that.

Matt Gibson
  • 37,886
  • 9
  • 99
  • 128
0

I faced the same problem during 2 days and I found the solution, and it's elegant after googling a lot. I needed xss Ajax for some widget clients which pull datastream from tiers websites to my Rails app. here's how I did.

R Francky
  • 41
  • 3