10

I have an environment that doesn't allow server side scripting really (it is extremely difficult to get a script "installed" on the server). I tried using an iframe to violate javascript's same origin poilcy; however, that didn't work. Are there any other workarounds I am not aware of?

Thanks!

Parris
  • 17,833
  • 17
  • 90
  • 133
  • What browser(s)? How exactly did you try this? Post code? – bmargulies Jan 14 '10 at 19:42
  • 1
    This question is probably the most frequently asked question here! A search would have brought up *numerous* answers. You need control over the scripts and pages on both domains (if you aren't able to edit content on both domains, you won't be able to do it), and need to either use a framework such as http://easyxdm.net or search for "cross domain messaging communications". HTML5 spec does have a `postMessage` method, but if you rely solely on this, it won't work in most browsers, so you'd need to fall back to an older "hack" method - why not just let a framework take care of this for you? – Graza Jan 14 '10 at 20:32
  • [JSON-P](http://www.insideria.com/2009/03/what-in-the-heck-is-jsonp-and.html) is the simplest solution, and the only one (AFAIK) that doesn't require browser plugins (such as Flash). This does require the cooperation of whomever runs the different origin site. – Quentin Jan 14 '10 at 19:45
  • Sooo as an update. I found out about: YQL from http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax It will grab whatever url you specify and wrap it in JSON and return back. You could then use jquery's getJSON function to grab that url. It seems to be working :)! – Parris Feb 09 '10 at 17:42
  • Just use [easyXDM](http://easyxdm.net), it's a library that enables cross-domain messaging with very little coding, and it doesn't need any server components. – Sean Kinsey Feb 15 '10 at 22:56
  • I created a small implementation (and open sourced it) of the simplest solution when you can't enable CORS on the server, you need to upload a .js and an .html file to the target server, (you can use any security mechanism to restrict access to this file if you want). Or you can change some simple parameters on the html file to restrict by domain. https://github.com/benjamine/FrameProxy "FrameProxy" – Benja Jan 06 '12 at 14:12

2 Answers2

29

As David Dorward mentioned, JSON-P is the simplest and fastest; however, there is another trick, specifically using two iframes.

Two get around this issue without using JSONP, you can do the following. This technique assumes that you have some sort of development access to the parent page.

There are three pages on two domains/sites.

  1. Parent page
  2. Content page
  3. Cross-domain communication page (aka "xdcomm")

Pages the parent and xdcomm pages are hosted on the same domain, the content page is hosted on any other domain. The content page is embedded as an iframe in the parent page and the xdcomm page is embedded as a hidden iframe in the content page.

enter image description here

The xdcomm page contains a very simple script that detects GET parameters in the query string, parses that string for method and args variables (where args is a JSON encoded string), and then executes the specified method with the specified arguments in the parent page. An example can be seen here (view source).

Even though JavaScript's Same Origin Policy restricts code on one domain from accessing that of another, it doesn't matter if domains are nested within each other (domain A, nested within domain B, nested within domain A).

So, in a nutshell, the content page sends messages to the parent page via the xdcomm page by changing the source of the iframe to something like http://domaina.com/xdcomm.html?src=foo&args=[1,2,3,4]. This would be equivalent to executing foo(1,2,3,4) in the parent page.

Also, know that there are already libraries that help you with this, such as easyxdm. What I've explained here is the basis of one of the techniques that they use, and while it might not be as fancy, it is certainly a fully functioning and lightweight implementation.

Community
  • 1
  • 1
Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
  • Actually yea please tell me!! :) – Parris Jan 14 '10 at 20:12
  • I'm actually going to write up something rather complete. Check back later. – Justin Johnson Jan 14 '10 at 20:41
  • Could you please provide working example, or link me to 1 already existing? - (I'd be greatly glad). I'm interested in pure JavaScript solution, without libs, scriplets or anything like that. I tried to find examples by my own. Sadly, best what I have found is this solution - http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/ - but i can not see how I could use it, to mine data from external server used in embedded `iframe`. If fulfilling my request is somewhat impossible, please tell me, I`ll create a new question. – dantuch Oct 27 '11 at 09:56
  • @Justin Johnson, nope, but it wouldn't help - I had no way to modify / add helper (or so on) to external server, that I wanted to connect, so Iframes were no use. I managed to solve my issue with `jsonp` which was allowed there. – dantuch Nov 10 '11 at 20:19
  • easyXDM didn't seem easy at all to me. It is a quite heavy library, got dizzy looking at its code folder, could not find a simple example of "get json from a cross domain", and it seems to ultimately depend on Flash. I end up using YQL as explained below. – gatopeich Apr 22 '13 at 16:38
  • Could someone please help me apply this to my website with less abstracted instructions? –  May 22 '13 at 23:29
2

Hopefully not, as it would be a security hole! :)

But if both your sites are subdomains on the same domain, maybe document.domain can help.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • So if my domain is awesome.yahoo.com, for instance, and i am trying to access bob.yahoo.com, i could set document.domain to yahoo.com and then be able to access bob.yahoo.com? – Parris Jan 14 '10 at 19:55
  • 2
    Also I do realize it is a security hole; however, I was hoping that there was a hole hahaha. If you think about it using a proxy allows for a workaround. I dont understand why using a proxy is allowed while just accessing the file directly is not allowed. Also I heard html 5 has some attributes that also allows for cross-domain stuff. – Parris Jan 14 '10 at 19:58
  • A proxy won't send the users cookies or any other authentication data to the remote site - since it can't know what they are. It can only get data that the site could get anyway. It can't pretend to be the user. There is ongoing work to develop a permissions system so that XHR can access remote sites, browser support is currently weak. – Quentin Jan 14 '10 at 20:02
  • Ahhh that makes sense. I had not considered that type of stuff. – Parris Jan 14 '10 at 20:14