small script to proxy cross-domain ajax callbacks or other functions thru a hidden iframe
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

FrameProxy.js allows to call functions/properties through browser windows/frames in a transparent manner. It wraps functions/properties on an a window/frame and uses window.postMessage (HTML5) to invoke the same function/property on another window/frame. This can be used to use a hidden iframe as proxy to call functions in a different domain.

Cross-Domain requests

While the appropiate way to implement cross-domain request is using CORS http headers, many existent http APIs don't support Allow-Origin http headers. FrameProxy.js allows to workaround cross-domain restriction in browsers. The only requirment is to upload frameproxy.js and frameproxy.htm in the same domain you want to invoke. frameproxy.htm gets loaded in a hidden iframe and ajax calls are proxied transparently to this frame using the standard way to comuncate between frames in HTML5, window.postMessage()


  • jQuery 1.5+

Proxied Functions

By default, $.ajax, $.get, $.post and $.getJSON can be wrapped by transparent proxy functions. But any other can be added.

All invocations return a jQuery promise object so integration with jQuery is straightforward.


1. Server-side

  • Host frameproxy.js and frameproxy.htm in the same domain of the service to invoke.
  • Restrict access by modify frameproxy.htm, restriction can be by password, domain, uri, or allowed functions/properties.
    • options.domain, options.uri and options.expressions accept:
    • a string, '*' (all), a filter function or a RegExp
    • an Array of any of these

2. Client-side

  • An a different domain page you can create a frameproxy client (this will load a hidden iframe):

    var proxy = new frameproxy.ProxyClient('http://myhost/frameproxy.htm')
      // wrap all functions in frameproxy.functions
      // or, wrap all functions in frameproxy.functions, and replace them by the proxied versions
      // or, wrap other functions or properties 
      .wrap('navigator.userAgent', 'bloglib.getBlogComments')
      // or, wrap other functions or properties, and replace them by the proxied versions
      .wrap(true, 'navigator.userAgent', 'bloglib.getBlogComments')
      // invoked when proxy is ready to use
      // if used .wrapAll() now you can:
      proxy.jQuery.ajax({ url: 'http://myhost/safedata' }).then(done, fail);
      // if you used .wrapAll(true), the original function got replaced
      $.ajax({ url: 'mydata.json' });
      // if you used .wrap('navigator.userAgent')
      proxy.navigator.userAgent().done(function(e){ alert('agent: '+e.result); });
      // note that properties are replaced by functions
      // if you used .wrap(true, 'bloglib.getBlogComments')
      bloglib.getBlogComments({user:'jsmith'}).done(function(e){ alert('commments: '; });
      // proxied functions return a jQuery promise