JSONP

What is JSONP? Explain JSONP. Compare JSONP with JSON.

Background

To understand jsonp, one must first understand what is its intended use.

Same origin policy

An origin is defined by the scheme, host, and port of a URL. In wikipedia entry, there is an example matrix of determining whether the origin is the same. Under this policy, any attempt of requests (by Javascript) on a web page to access a web site must go to the same web site that the web page came from. There is an example in w3’s wiki,

if a document retrieved from http://example.com/doc.html tries to access the DOM of a document retrieved fromhttps://example.com/target.html, the user agent will disallow access because the origin of the first document, (http, example.com, 80), does not match the origin of the second document (https, example.com, 443)

Thereby, this policy prevents a web site’s scripts from accessing methods and properties of scripts used on other sites. This aims to protect the user from attacks where a page contains malicious code to use user’s information. For instance, user may have logged in Facebook, which the code use the credentials to access facebook and work on user’s own for spamming purpose. Cross-site scripting (XSS) is a type of vulnerability to bypass access control like same origin policy.

More details on Same origin policy for different access e.g. Flash, Java can be found here

Problem

With the policy in place, some aspects of non-malicious web development is also being hindered. In short, we cannot make an AJAX (XMLHttpRequest) to a different domain than the curent page.

Workaround

Browsers

Same origin policy can be turned off in some browsers. For example, in Chrome / Firefox. As there is different implementation for browsers, this solution has low compatibility which is crucial in web deelopment.

IFrame

IFrame is to embed an entire HTML document in a page. Sometimes IFrame itself is sufficient for cross-site purpose, for example displaying information from external sites and let the use login in the iframe. Taking Iframe further is to create iframe dynamically and pulling content and set its source to a url in the current domain, same origin is thereby established. This post give a brief illustration to the scenario. However, with iframe it is hard to achieve interaction with the other domain, also lower response time can also be resulted

JSONP to the rescue

JSONP stands for JSON with padding to make use of The HTML <script> element, which is excepted from the same origin policy. It is the pattern of operates on dynamically generated JSON-formatted data from other origins is being retrieved via the script tag.

The JSON content is received when the browser evaluate the script tag element.

For the original data that javascript wanted to dynamically request is in format of JSON, which is light weight and easy to handle. However inject this alone will cause syntax error. Therefore a padding is required.

Padding

By convention, the Padding is typically the name of a callback function

The server response with requested data wrapped with the callback function. The JSON content is received when the browser evaluate the script tag element.

to illustrate,   following is an example (from wikipedia)

<script type="text/javascript"
         src="http://server2.example.com/Users/1234?jsonp=parseResponse">
 </script>

Script element injection

Script Tag Injection

For each new JSONP request, the browser must add a new <script> element, or reuse an existing one. It can be done by DOM manipulation.

In JQuery this functionality is added to the basic json api.  jQuery.getJSON. When URL include the padding, the request is treated as JSONP. It even allow using jsonp to get data and parse it into XML automatically.

is JSONP good?

JSONP is native javascript, which means it is well compatible and light weighted.

However it may prone malicious attack, where when remote server is compromised malicious javascript can be injected to current page.It is being driven that browsers handle request and response with MIME type application/json-p only. Encoding should also be specified

It is popular and used by main web giants, like google in the Google Web Kits. On the otherhand, since JSONP can be use as long as JSON object is response, which is common, here is one example to integrate with many web app like facebook, twitter

My personal experience is that it is often required to get objects response from other domain. Like building a website that integrate with Confluence (wiki tool),  since I dont have the wiki-rendering engine, I either get a lot of mark up language or even I use the standard SOAP/REST Api I get the plain text content, I cannot stimulate what Confluence will show.

I have to fetch it after it has been rendered, which JSONP is a good helper. This experience is the reverse, fetching other site’s information into Confluence.

Comparing JSONP with JSON.

After the discussion, we can see they are not so comparable. JSON itself is a data type, while JSONP is a technique targeting to complement JSON on the cross-domain perspective. Meanwhile, there is no true XMLP since XML cannot be injected to the script tag in the same way.

Proposed Solution over JSONP

After JSON-P, there are some solutions proposed.

Cross-origin resource sharing

CORS is being discussed as to replace JSONP in solving the problem. It is a specification which defines ways for a web server to allow its resources to be accessed by a web page from a different domain (wikipedia)

example from wikipedia.

an additional HTTP headers can be added

Access-Control-Allow-Origin: *

However in order to prevent XDD attack mentioned, a explicit list of permitted origins should be added

Access-Control-Allow-Origin: http://example.com:8080http://foo.example.com

Advertisements

2 thoughts on “JSONP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s