What is JSONP? Explain JSONP. Compare JSONP with JSON.
To understand jsonp, one must first understand what is its intended use.
Same origin policy
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
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.
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 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.
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 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?
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
However in order to prevent XDD attack mentioned, a explicit list of permitted origins should be added