JSONP for cross-site Callbacks 【转】

转自：http://weblog.west-wind.com/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks

---

 

JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler.

The client JavaScript code to make a JSONP call looks like this:

function jsonp(url,callback,name, query)
{                
    if (url.indexOf("?") > -1)
        url += "&jsonp=" 
    else
        url += "?jsonp=" 
    url += name + "&";
    if (query)
        url += encodeURIComponent(query) + "&";   
    url += new Date().getTime().toString(); // prevent caching        
    
    var script = document.createElement("script");        
    script.setAttribute("src",url);
    script.setAttribute("type","text/javascript");                
    document.body.appendChild(script);
}

 

The idea is that this code adds a <script> tag dynamically to the page and when this code loads it causes the JavaScript that the server loads to be executed. Because it uses the DOM and a <script> tag this gets around the cross site scripting limitations of the XHR object.

The server is expected to return JSON data, but with a slight twist: It has to prepend the callback function name, which is passed as part of the url. The syntax for a JSONP Url is simply the URL with a jsonp= query string parameter that defines the the callback function:

http://someserver.com/mypage.aspx?jsonp=callbackFunction

If the server wants to return a result like:

{ "x": 10, "y": 15}

the result will be turned into (assuming the callback specified is callbackFunction):

callbackFunction( { "x": 10, "y": 15} )

If you're implementing this in an ASPX.NET page it might look like this:

public partial class JSONP : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(Request.QueryString["jsonp"]) )
            this.JsonPCallback();
    }

    public void JsonPCallback()
    {
        string Callback = Request.QueryString["jsonp"];
        if (!string.IsNullOrEmpty(Callback))
        {
            // *** Do whatever you need
            Response.Write(Callback + "( {\"x\":10 , \"y\":100} );");
        }

        Response.End();
    }
}

The client will now have  script tag that gets added to the document and the script executes on load and in effect calls the callbackFunction with the parameter:

function callbackFunction(Result)
{
    alert(Result.x + "  " + Result.y) ;
}

And there's a cross domain callback.

Note that this callback requires that the server KNOWS it's receiving a JSONP request because the server has to prepend the callback handler name supplied so the code can fire in the client.

Yeah it seems like an Exploit

I'm not sold on the idea, because it is basically exploiting what seems to be a security hole in the browser and one that apparently won't be plugged as many services like Adsense rely on it. But all this talk about preventing cross site scripting are pretty much moot by allowing this sort of hack to work. But then again this implementation doesn't do anything that couldn't be done before or changes any of the security issues - it just takes advantage of this functionality.

Still - it feel... wrong <g>...

It is what it is and it seems this approach is getting more popular in being able to retrieve JSON content from various public sites. It certainly is something that should be useful for ASP.NET developers who internally need to make client callbacks to their own internal sites which seems a frequent request.