Ajax cross domain on Jersey restfull webservices

May 27, 2011

At work, at LesTanukis, I'm working on a REST web service served by the open source application server Glassfish and the REST lib Jersey. I asked myself how to query these webservices directly from a web client, ie, how to bypass the same origin policy security restrictions. Here are some notes that recounts my route.

PHP Ajax bridge

The first solution is obvious, building a bridge between the client and the web server, and that's this one that will query the webservice.

For example, in our case, we use the Drupal CMS.

To open the door to an Ajax request, the easiest way is to implement a hook_menu, with the MENU_CALLBACK constant as argument:

 function your-module-name_menu(){
 return array( "ajax_bridge" => array(
 "title" => t("Ajax bridge"),
 "page callback" => "_ajax_dispatcher",
 'access arguments' => array('access home page'),
 "type" => MENU_CALLBACK
 ) );
}

Here, I create a url, ( "/ajax_bridge" ), which will call the _ajax_dispatcher function if it's called.

Here's what the documentation says about the drupal constant MENU_CALLBACK:

MENU_CALLBACK: Callbacks simply register a path so that the correct function is fired when the URL is accessed.

That is exactly what we need. We can then call the webservice with cURL:

function requestGlassfish(){
 
    header('Cache-Control: no-cache, must-revalidate');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Content-type: application/json');
 
     $sServeurUrl = filter_input( INPUT_POST, "glassfish_url", FILTER_SANITIZE_URL );
 
    if( FALSE === $sServeurUrl ){
        echo json_encode(array("error" => "Glassfish URL not set"));
	exit();
    }
 
    if( extension_loaded("curl") ){
 
        $ch = curl_init();
 
	curl_setopt_array($ch, array(
            CURLOPT_URL => "http://localhost:8080/services/rest/" . $sServeurUrl,
            CURLOPT_RETURNTRANSFER => 1,
            CURLOPT_CONNECTTIMEOUT => 5,
            CURLOPT_TIMEOUT => 10,
            CURLOPT_HEADER => 0,
            CURLOPT_HTTPHEADER => array( 'Accept: application/json' ) 
        ));
 
	$output = curl_exec($ch);
 
	if ($output === FALSE) {  
    	    echo json_encode(array("error" => "Curl error, empty response: " . curl_error($ch)));
	    curl_close($ch); 
    	    exit();
	}
 
	echo json_encode(array("success" =>$output ));
	curl_close($ch);
    }
    else{
	echo json_encode(array("error" => "Curl extension is not loaded"));
	exit();
    }
}

Here, we begin by sending some HTTP header with MIME type "application/JSON", and as we are experiencing, we disable the cache. We then create a HTTP request to the Glassfish server, with the Accept header set to "application/json", so that Jersey understand that we want some JSON. We then echo the returned string. Easy...

However, this solution does not meet the specifications, we can not say that the client application directly request the webservice ... But, as we host Apache, it is not possible to force Glassfish to listen on port 80. We are therefore forced to choose another port, and so, the same origin policy restriction applies and prevents a direct query to Glassfish.

However, we know that the src attribute of the script tag is not subject to this restriction. You can load a script from any URL hosted on the web. We could then query the webservice by injecting a script tag in our page. This is called JSONP, JSON With Padding.

JSONp

The idea is simple. Inject a script tag dynamically in head of our page, with a url get parameter defining a callback function defined in advance. Here's how we might proceed:

function handleJSONanswser( JSON_object ){
 //do what we need with JSON_object
}

//inject the script tag
var script = document.createElement('script');
script.type="text/javascript";
script.src = "http://glassfish_url:8080/rest?callback=handleJSONanswser";
document.getElementsByTagName('head')[0].appendChild(script);

The server then return the wanted JSON, wrapped inside the defined callback:

handleJSONanswser( [{"object1"},{"object2"},{"object3"},...] );

Once the query ends, our function is executed with the expected JSON data as parameter. Magical...

This solution is simplified by jQuery, thanks to the function getJSON. We then need to configure Jersey so that it return the JSON array wrapped within the function passed as parameter.

Here are some tips found on the net:

Summarize:

Get the get paramater (the funcion name) with Jersey annotation:

@QueryParam("jsoncallback") @DefaultValue("fn") String callback

Return the JSON object wrapped in the function, thanks to JSONWithPadding

return new JSONWithPadding(objectOfIntereset,callback);

However, we did not choose that solution. Indeed, each request leads to the injection of a new tag in our html code. Furthermore, browsers issues when dealing with errors, resulting in silently failures difficult to debug . Therefore we preferred to use the HTML5 solution entitled "cross origin resource sharing", or CORS.

Cross origin resource sharing

CORS is a specification that allows a server to send special HTTP headers that will allow a client request from another server to succeed.

There are two types of CORS requests:

Simple

A query of type POST or GET with the Content-Type header set to application/x-www-form-urlencoded or multipart/form-data or text/plain. In this case, the server should return the special header Access-Control-Allow-Origin, which must hold the string send by the client within the Origin header, or, if the resource is public, an *. In this case, any client wil be allowed to query the server.

Preflighted requêtes

For all other requests (PUT, DELETE, with special headers like X-Requested-With, or with an exotic Content-Type such as application/json ), the client will make 2 requests. A first one of type OPTION, then the main request itself. Here is an excerpt from hacks.mozilla.org:

The specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request header, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method.

Let see the server-side code.

We must first declare a Maven dependency to the Glassfish web API, and to Jettison, the lib that we'll use to serialize our entities to JSON:

 <dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-web-api</artifactId>
    <version>6.0</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.codehaus.jettison</groupId>
    <artifactId>jettison</artifactId>
    <version>1.3</version>
</dependency>

I'll not talk about web.xml and glassfish-web.xml configuration files, that will allow us you to set ours base urls and load Jersey.

We have here a method called getAllJSON, within the class Fluxfacade, which holds webservices for our Stream (Flux in french) JPA entity:

...
 
import org.codehaus.jettison.json.JSONObject;
import org.codehaus.jettison.json.JSONArray;
import org.codehaus.jettison.json.JSONException;
 
import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.ResponseBuilder;
 
...
 
@Path("/flux")
public class FluxFacade {
 
    ...
 
    @GET
    @Path("/all")
    @Produces({"application/json"})
    public  Response getAllJSON(  ) {
 
        List<Flux> l =  em.createNamedQuery("Flux.findAll", Flux.class ).getResultList();
 
        JSONArray jsonarray = new JSONArray();
 
        for( Flux f : l ) {
            jsonarray.put( fluxToJson(f) );
        }
 
        ResponseBuilder builder = Response.ok(jsonarray);
        builder.header("Access-Control-Allow-Origin", "*");
        builder.header("Access-Control-Max-Age", "3600");
        builder.header("Access-Control-Allow-Methods", "GET");
        builder.header("Access-Control-Allow-Headers", "X-Requested-With,Host,User-Agent,Accept,Accept-Language,Accept-Encoding,Accept-Charset,Keep-Alive,Connection,Referer,Origin");
 
        return builder.build();
    }
 
    private JSONObject fluxToJson( Flux f ){
        try {
            return new JSONObject()
            .put("id", f.getId() )
            .put("iduser", f.getIdUser())
            .put("title", f.getTitle() )
            .put("is_active", f.getIsActive() )
            .put("isocountry", f.getCountry() )
            .put("longitude", f.getLongitude() )
            .put("latitude", f.getLatitude() );
        } catch (JSONException je){
            return null;
        }
    }
 
   ...
}

We can go very far with Jersey, configuring entity serialization (aka marshalling), through the JAXB API. The method I present here has the advantage of being simple and effective. What is important is the use of the ResponseBuilder header's method, which allows to send the CORS headers. Here is a screenshot of firebug showing the exchanged headers:

Firebug CORS request capture

Client side, here is the code used:

//simplified
requestService : function( o ){
    jQuery.ajax({
        beforeSend: function(req) {
            req.setRequestHeader("Accept", "application/json");
        },
        type: o.method,
        url: "http://glassfish_url:8080/services/rest/" + o.url,
        dataType: "json",                             
        success: function(data) {
            o.app.trigger('flux_loaded', data );
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
 
            console.dir(errorThrown);
            console.dir(textStatus);
            console.debug(XMLHttpRequest);
        }
    });
}

Easy...

Finally, note that Internet Explorer does not use exactly the same API (...). Microsoft created the XDomainRequest object, which performs the same function (and accepts same server headers):

//from msdn
var xdr = new XDomainRequest();
xdr.open("get", "http://www.contoso.com/xdr.aspx");
xdr.send();

For IE6, IE7, we'll have to go through a PHP bridge or a JSONP call, after having detected the lack of the withCredentials property of the XMLHttpRequest object (from hacks.mozilla.org):

var request = new XMLHttpRequest();
if( request.withCredentials !== undefined ){
 // make cross-site requests
}
else if( window.XDomainRequest ) {
 //ie8 with XDomainRequest
}
else {
 //JSONp for ie7
}

Ok, well done...

But manually add the HTML5 HTTP headers will quickly become tedious...

Fortunately, Jersey is a servlet like any other. We can so add a filter that will do the job for us ...

@WebFilter(filterName="HTML5CorsFilter",urlPatterns={"/rest/*"})
public class HTML5CorsFilter implements javax.servlet.Filter{
 
    private static final Logger logger = Logger.getLogger( HTML5CorsFilter.class.getName() );
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
 
        logger.log( Level.INFO, "HTML5CorsFilter add HTML5 CORS Headers" );
 
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type");
        chain.doFilter(request, response);
    }
}

Well, we finished this short introduction. Here are some links to learn more:

Enjoy...

Le retour de l'attaque du port série déréglé Sylvain Artois
Choisir une application Android de fitness Sylvain Artois
Alter Drupal html.tpl.php $head var Sylvain Artois
Access serial port from Air Sylvain Artois
Less on Symfony2 with Assetic + NodeJS + NPM + Less.js Sylvain Artois

{TheLab}

Sylvain Artois weblog | Writing to computer

NEW VERSION - BETA

Contact me!

Subscribe!

See my resume

Follow-me