1

I have a page on my site (let's say on domain A) and I would like to pull in some more content into it from another page, say, on domain B. As a default, this functionality is blocked by the browsers for security reasons.

As far as I've found, there are a few ways to do this.

  • CORS: As I understand, this method requires contributions from both the server and the client. The server needs to add a header to its response (i.e. Access-Control-Allow-Origin: [DOMAINS], as of http://enable-cors.org/server.html). On the other hand, the client needs to adjust their requests (e.g. http://www.html5rocks.com/en/tutorials/cors/).
  • If using jQuery, there is this small plug-in which uses the YahooAPI (i.e. http://james.padolsey.com/snippets/cross-domain-requests-with-jquery/). The advantage of this is that the client can use it on its own to get pages from other domains. The catch is that Yahoo limits the number of requests per hour per IP, and for commercial use Yahoo's permission is needed.
  • I've also read about JSONP but I haven't done much digging.

My question is: are there other possibly better options that I might be overlooking?

For the record, the site I'm working with is a huge commercial site with millions of users every day.

temelm
  • 826
  • 4
  • 15
  • 34
  • Here are 4 ways to accomplish this: http://stackoverflow.com/questions/29589916/jsonp-with-remote-url-does-not-work/29589955#29589955 – Drakes Apr 14 '15 at 14:13
  • My favorite way to break cross domain restriction - create JavaScript object on the fly and set source from another domain. Since it is JSON - it will execute fine and then you can use results. – Alex Apr 14 '15 at 14:32
  • @Alex Please explain this some more, or kindly point to a guide – Drakes Apr 14 '15 at 14:37
  • See my example below – Alex Apr 14 '15 at 15:24

3 Answers3

1

You can do JSONP, permit CORS and use plain JSON, use a DIY JSONP wrapper, or use a JSONP Proxy service. Here are the solutions in detail: JSONP with remote URL does not work

The easiest option in your situation is to roll your own JSONP proxy service. Here's a demo barebones PHP wrapper to get past CORS if you fetch a JSON string. No catch, no limits unlike Yahoo's YQL.

<?php
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "?";

$json = file_get_contents('http://somedomain.com/someurl/results.json');

header('Access-Control-Allow-Origin: *');
header("Content-type: application/json");
echo $callback . "(" . $json . ");";
?>
Community
  • 1
  • 1
Drakes
  • 23,254
  • 3
  • 51
  • 94
0

Are you trying to get content, or code? If you're trying to get content, is it possible to just use an iframe?

If you want code, I think the options you outlined are pretty much what you have available. JSONP might be your best bet due to browser support. For example, IE only supported it as of version 10. If you're on a site with millions of users per day, my guess is there are some folks on older versions of IE (unfortunately).

Edit: Depending on the content, another option is to introduce your own local proxy. For example, I've done things where I need to call WebServiceX on some other provider. I call the WebServiceX in server side code and implement my own web service that my JavaScript accesses. This means I'm not going cross domain because the cross domain access happens server-side, not client-side. It also allowed me to introduce caching and other things (depending on the type of data) that improved performance.

dmeglio
  • 2,830
  • 1
  • 19
  • 24
  • Content I need to load is HTML. I don't want to use an iframe as I don't need all of the contents of the page I'm loading. That's why I tried 2nd option as jQuery allows me to run a selector on the content I loaded. Catch with that is the number of requests limitation and Yahoo might ask for subscription which I'm not sure my client will want to go for. – temelm Apr 14 '15 at 14:23
0

Approach for cross domain data passing - create JavaScript object and assign source from another domain. Here is quick and dirty example:

File test.html:

<html>
<body>
Test done
</body>
<script>
var s = document.createElement("script"); 
s.type='text/javascript';
s.src='test.js';
document.body.appendChild(s);
</script>
</html>

and test.js

abc={a:'A',b:'B',c:'C'};
alert(abc.a);

test.js could be in any domain and function alert() could be any function. I have more elegant ways to attach or run such approach but this one is sufficient enough to undersatnd the idea.

Alex
  • 4,457
  • 2
  • 20
  • 59