eXcetra

Cross domain API calls using Sinatra + pmxdr

Sat, 12 May 2012 21:12:00 -0700

You have an API server running and want to enable people to make cross domain XHR requests using javascript. How do you do that? There are bunch of methods that exist. I will present a technique to achieve this using HTML5's awesome postMessage API. I used pmxdr library, which is a pure javascript library that leverages HTML5's postMessage functionality without needing Flash or anything of that sort. Very neat!

Some setup details -

My remote server is running on mylocal.name:9393 (mylocal.name -> localhosts in the /etc/hosts file). This server provides a POST operation on /api/token and returns a JSON object on a successful POST operation.
My client is running on localhost:9494. It will make a cross domain request for the JSON token data from the remote server.
Both my servers are powered by Sinatra.

Server settings

There are two things the server has to do before anything else.

Have a valid route /pmxdr/api which loads the pmxdr-host.js file from the library. We need to add the approved domains to this file, but more on this later.
```
get '/pmxdr/api' do
  p "got a get on pmxdr/api"
  erb :pmxdr
end
```
The view pmxdr.erb just loads the pmxdr-hosts.js file.
The server must allow cross domain through X-Frame-Options header. For Sinatra, which automatically addes X-Frame-Options header, you can configure it by

#x-frame-options allow sinatra
configure do
  set :protection, :except => :frame_options
end

These two things will get us started on the server side. The API token call is show here to give a context.

post '/api/token' do
  p "post operation"
  content_type :json
    { :token => '9238928fkjkjkdjfser'}.to_json
end

In the pmxdr-hosts.js (which is rendered by pmxdr view in this example), allow localhost with any port to access its resources.

var alwaysTrustedOrigins = [ 

   /^[\w-]+:(?:\/\/)?(?:[\w\.-]+\.)?localhost\:\d+(?::\d+)?$/ // any origin on any protocol that has a domain that ends in localhost:anyport
  
    
  ];

If you don't do this, the logs in the server will show a POST operation, but pmxdr host will not return the data and give a disallowed-origin error.

{pmxdr: true, error: "DISALLOWED_ORIGIN", id:"123", status:200, statusText:"OK"}

Making API calls through Client

In this example, when you navigate to the client, an API call is made and the token is returned.

Load the pmxdr client code -

The actual client side code is very simple.

var pmxdrInterface = new pmxdr("http://mylocal.name:9393/");
pmxdrInterface. function() {
    this.request([{
        method  : "post",
        uri     : "/api/token",
        data    : "",
        callback: handleResponse,
        headers : {},
        timeout : 30000 /* == 30 seconds*/
    }]);
 
}
function handleResponse(response) {
          //alert(response.data);
    // do stuff with response
                console.log(response);
                var code;
                codeContainer = document.createElement("pre");
                if ( !response.error ) {
         code += "\n\ndata:\n"+response.data;
       } else code += (errorIsGood? "(PASS) " : "(FAIL) ")+"Error: "+response.error;
       
       //codeContainer.appendChild(document.createTextNode(code));
       results.appendChild(document.createTextNode(code));
       //results.appendChild(document.createElement("hr"));
                //
    pmxdrInterface.unload();
}
pmxdrInterface.init();

This is what happens in the above code -

When pmxdr is initialized, a temporary iFrame is setup, that has a source of http://mylocal.name:9393/pmxdr/api. Remember - When we were setting up the server, we made sure that the API end point was "gettable" and it loaded the host library code.
After the iFrame is intialized, it sends a GET request with a uri parameter is http://mylocal.name:9393/api/token and a randomly generated id.
After this request, the pmxdr host checks if the requesting window (in this case localhost:9494) is allowed to view the data. Remember - the entry we added to the hosts.js file.
A temporary iFrame, which is setup gets deleted after a successful response or the timeout that is specified in the above code.

The great thing is that you can send any kind of custom headers that your API call should respond to (for authentication or anything like that).

You can download the entire code from my git repo https://github.com/saranyan/pmxdr-sinatra

eXcetra

Cross domain API calls using Sinatra + pmxdr

Cloudfoundry, X.commerce, Ruby

Fibonacci over Fabric

A rails bundle for testing X.commerce capability

magento extension to publish product data to x.commerce capability

Using Ruby Instapaper Gem

Magento Product Catalog data from GPS

mcrypt extension on snow leopard (php 5.3.8)

Sending and Receiving messages to the X.commerce Fabric

Using Ruby FFI

Binary data over HTTP in ruby

Dabbling with Avro

Using dot notation on a Ruby Hash

Jquery Range Slider using Coffeescript

PayPal IPN using Rails 3.1 and Active Merchant

Hello world

Lion, ImageMagic error