GWT loading remote JSONP XSS

Posted by pfranza
Share/Bookmark   June 9, 2010

In almost all browsers there is one thing that everybody wants to do, but you just can’t, Load cross site data. That is you can’t unless you are using JSONP. Basically you load the data into its own script tag tell the server you are loading it from to wrap the data in a callback that you have defined. This will fire an event after the data has loaded. Perfect.

I wanted to use it in GWT … now I can.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

package com.peterfranza.gwt.cle.client;
 
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.json.client.JSONObject;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;
 
public class JSONPLoader {
 
	private LoaderCallback callback;
 
	public void load(String jsonUrl, LoaderCallback callback) {
		this.callback = callback;
		String callbackString = "jsonLoad_" + 
			DOM.createUniqueId().replace("-", "_") + "_callback";
		String url = jsonUrl + (jsonUrl.contains("?") ? "&" : "?") 
			+ "_callback=" + callbackString;
		publishCallbackMethod(callbackString);
		Element fr1 = DOM.createElement("script");		
		fr1.setAttribute("src", url);
		RootPanel.get().getElement().appendChild(fr1);
 
	}
 
	private native void publishCallbackMethod(String callback) /*-{
		var ptr = this;
  		$wnd[callback] = function(obj) {
  			ptr.@com.peterfranza.gwt.cle.client.JSONPLoader::loadremotedata(Ljava/lang/String;Lcom/google/gwt/core/client/JavaScriptObject;)(callback, obj);
  		};
	}-*/;
 
	@SuppressWarnings("unused")
	private void loadremotedata(String cbp, JavaScriptObject obj) {
	  callback.onLoad(new JSONObject(obj));
	}
 
	public interface LoaderCallback {
		void onLoad(JSONObject object);
	}
 
}

Usage:

1
2
3
4
5
6
7
8

JSONPLoader loader = new JSONPLoader();
loader.load("http://pipes.yahoo.com/pipes/pipe.run?_id=CPreCvz42xG4eaOWouNLYQ&_render=json&location=madison&section=mcy", new LoaderCallback() {
 
	@Override
	public void onLoad(JSONObject object) {
		Window.alert("loaded " + object.size());
	}
});

Notice that the json url does not specify the _callback parameter, this is because it is added by the JSONPLoader class.



Uncategorized, coding

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

Very nice way of doing JSONP fetching and async handling of the result.

Note that it might be good to also combine this with the information on http://code.google.com/intl/nl-NL/webtoolkit/doc/latest/tutorial/Xsite.html for cleaning up the remote script and callbacks (step 5: Cleanup. Remove script and callback elements).

That makes also sure that a (timeout) callback is called when the JSONP call fails.

Reply

Comment by Jeroen Janssen on June 27, 2010 @ 7:33 am
Leave a comment

(required)

(required)