Web 2.0 Development with the Google Web Toolkit

The Same Origin Policy

The Same Origin Policy (SOP) is a security restriction, which basically prevents a page loaded from a certain origin to access a page from a different origin. By origin, we mean the trio: protocol + host + port. In http://www.mysite.com:80/some/path/to/a/page, the protocol is http, the host is www.myhost.com, and the port is 80. The SOP would allow access to any document coming from http://www.mysite.com:80, but disallow going to https://www.mysite.com:80/something (different protocol), http://dev.mysite.com:80/something (different host) or http://www.mysite.com:81/something (different port).

Why is this a good idea? Without it, it would be possible for JavaScript from a certain origin to access data from another origin and manipulate it secretly. This would be the ultimate phishing. You could be looking at a legitimate, valid, true page, but it might be monitored by a third party. With SOP in place, you know for certain that whatever you are viewing was sent by the true origin. There can't be any code from other origins.

Of course, for GWT, this is a bit of a bother, because it means that a client application cannot simply connect to any other server or Web service to get data from it. There are (at least) two ways around this: a special, simpler way that allows getting JSON data only or a more complex solution that implies coding a server-side proxy. Your client calls the proxy, and the proxy calls the service. Both solutions are explained in the Google Web Toolkit Applications book (see Resources). In this article, we use the JSON method, and you can find the source code at www.gwtsite.com/code/webservices.

The simple JSON method requires a special callback routine, and this could be a showstopper. However, many sites implement this, including Amazon, Digg, Flickr, GeoNames, Google, Yahoo! and YouTube, and the method is catching on, so it's quite likely you will be able to find an appropriate service.

Listing 2. Source Code for the JSONRequest Class

package com.kereki.client;
public class JSONRequest {
    public static void get(String url,
                           JSONRequestHandler handler) {
        String callbackName = "JSONCallback"+handler.hashCode();
        get(url+callbackName, callbackName, handler);
    }

    public static void get(String url, String callbackName,
                           JSONRequestHandler handler) {
        createCallbackFunction(handler, callbackName);
        addScript(url);
    }

    public static native void addScript(String url) /*-{
        var scr = document.createElement("script");
        scr.setAttribute("language", "JavaScript");
        scr.setAttribute("src", url);
        document.getElementsByTagName("body")[0].appendChild(scr);
    }-*/;

    private native static void createCallbackFunction(
                                   JSONRequestHandler obj,
                                   String callbackName) /*-{
        tmpcallback = function(j) {
            obj.@com.kereki.client.JSONRequestHandler::
                onRequestComplete(
                    Lcom/google/gwt/core/client/JavaScriptObject;)(j);
        };
        eval( "window." + callbackName + "=tmpcallback" );
    }-*/;
}

Note that the last two methods are written in JavaScript instead of Java; the JavaScript code is written inside Java comments. The special @id... syntax inside the JavaScript is used for accessing Java methods and fields from JavaScript. This syntax is translated to the correct JavaScript by GWT when the application is compiled. See the GWT documentation for more information.

Listing 3. Source Code for the JSONRequestHandler Class

package com.kereki.client;
import com.google.gwt.core.client.JavaScriptObject;
public interface JSONRequestHandler {
    public void onRequestComplete(JavaScriptObject json);
}

You can find the code for this listing and the previous one at www.gwtsite.com/code/webservices.