JSONP
Encyclopedia
JSONP or "JSON with padding" is a complement to the base JavaScript Object Notation JSON
data format, a pattern of usage allowing a page to request data from a server in a different domain. JSONP is a solution to this problem, forming an alternative to a more recent method named Cross-Origin Resource Sharing
.
Under the same origin policy
, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML
, for example. Suppose a URL is http://server2.example.com/RetrieveUser?UserId=xxx. Suppose the UserId of Foo is 1234. A browser requesting the URL http://server2.example.com/RetrieveUser?UserId=1234, passing the UserId of Foo, might receive something like:
This JSON data could be dynamically generated, according to the query parameters passed in the URL.
Now imagine specifying a URL that returns JSON as the src attribute for a
In the JSONP usage pattern, the src attribute in the
The function call is the "P" of JSONP - the "padding" around the pure JSON, or according to some, the "prefix".
By convention, the browser provides the name of the callback function as a named query parameter, typically using the name
In this example, the received payload would be:
The response to a JSONP request (namely, a request following the JSONP usage pattern) is not JSON and is not parsed as JSON; the returned payload can be any arbitrary JavaScript expression, and it does not need to include any JSON at all. But conventionally, it is a JavaScript fragment that invokes a function call on some JSON-formatted data.
Said differently, the typical use of JSONP provides cross-domain access to an existing JSON API, by wrapping a JSON payload in a function call.
In that way, the use of JSONP can be said to allow browser pages to work around the same origin policy via script element injection.
An effort is underway to define a safer strict subset definition for JSON-P that browsers would be able to enforce on script requests with a specific MIME-type such as "application/json-p". If the response didn't parse as strict JSON-P, the browser could throw an error or just ignore the entire response.
(CSRF or XSRF) attacks. Because the HTML
in web browser implementations, a malicious page can request and obtain JSON data belonging to another site. This will allow the JSON-encoded data to be evaluated in the context of the malicious page, possibly divulging passwords or other sensitive data if the user is currently logged into the other site.
This is problematic only if the JSON-encoded data contains sensitive information which should not be disclosed to a third party, and the server depends on the browser's Same Origin Policy to block the delivery of the data in the case of an improper request. There is no problem if the server determines the propriety of the request itself, only putting the data on the wire if the request is proper. Cookies
are not by themselves adequate for determining if a request was authorized. Exclusive use of cookies is subject to cross-site request forgery
.
applications such as by Dojo Toolkit
, Google Web Toolkit
, and Web service
s.
JSON
JSON , or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects...
data format, a pattern of usage allowing a page to request data from a server in a different domain. JSONP is a solution to this problem, forming an alternative to a more recent method named Cross-Origin Resource Sharing
Cross-Origin Resource Sharing
Cross-Origin Resource Sharing is a web browser technology specification, which defines ways for a web server to allow its resources be accessed by a web page from a different domain...
.
Under the same origin policy
Same origin policy
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but...
, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
element. Exploiting the open policy for
elements, some pages use them to retrieve JavaScript code that operates on dynamically generated JSON-formatted data from other origins. This usage pattern is known as JSONP. Requests for JSONP retrieve not JSON, but arbitrary JavaScript code. They are evaluated by the JavaScript interpreter, not parsed by a JSON parser.How it works
To see how this pattern works, first consider a URL which on request returns a JSON document. A JavaScript program might request this URL via XMLHttpRequestXMLHttpRequest
XMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
, for example. Suppose a URL is http://server2.example.com/RetrieveUser?UserId=xxx. Suppose the UserId of Foo is 1234. A browser requesting the URL http://server2.example.com/RetrieveUser?UserId=1234, passing the UserId of Foo, might receive something like:
This JSON data could be dynamically generated, according to the query parameters passed in the URL.
Now imagine specifying a URL that returns JSON as the src attribute for a
element. The issue with this is that a JavaScript script cannot start with a top-level object literal; a JSON object. This is a syntax error. It can start with a top-level array, but the array is not easily accessible.In the JSONP usage pattern, the src attribute in the
element returns dynamically generated JSON, with a function call wrapped around it. In this way, the returned resource is still legal JavaScript, but because the anonymous JSON object is wrapped in a function call, the browser's JavaScript environment can act on the returned data. It might look like this:The function call is the "P" of JSONP - the "padding" around the pure JSON, or according to some, the "prefix".
By convention, the browser provides the name of the callback function as a named query parameter, typically using the name
jsonp
, in its request to the server, e.g.,In this example, the received payload would be:
Padding
While the padding (prefix) is typically the name of a callback function that is defined within the execution context of the browser, it may also be a variable assignment, an if statement, or any other JavaScript statement.The response to a JSONP request (namely, a request following the JSONP usage pattern) is not JSON and is not parsed as JSON; the returned payload can be any arbitrary JavaScript expression, and it does not need to include any JSON at all. But conventionally, it is a JavaScript fragment that invokes a function call on some JSON-formatted data.
Said differently, the typical use of JSONP provides cross-domain access to an existing JSON API, by wrapping a JSON payload in a function call.
Script element injection
JSONP makes sense only when used with a script element. For each new JSONP request, the browser must add a new
element, or reuse an existing one. The former option - adding a new script element - is done via dynamic DOM manipulation, and is known as script element injection. The
element is injected into the HTML DOM, with the desired value for the "src" attribute. This element is then evaluated, the src URL is retrieved, and the response JSONP function call is evaluated.In that way, the use of JSONP can be said to allow browser pages to work around the same origin policy via script element injection.
Security concerns
Including script tags from remote sites allows the remote sites to inject any content into a website. If the remote sites have vulnerabilities that allow JavaScript injection, the original site is exposed to an increased risk.An effort is underway to define a safer strict subset definition for JSON-P that browsers would be able to enforce on script requests with a specific MIME-type such as "application/json-p". If the response didn't parse as strict JSON-P, the browser could throw an error or just ignore the entire response.
Cross-site request forgery
Native deployments of JSONP are subject to cross-site request forgeryCross-site request forgery
Cross-site request forgery, also known as a one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website whereby unauthorized commands are transmitted from a user that the website trusts...
(CSRF or XSRF) attacks. Because the HTML
tag does not respect the same origin policySame origin policy
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but...
in web browser implementations, a malicious page can request and obtain JSON data belonging to another site. This will allow the JSON-encoded data to be evaluated in the context of the malicious page, possibly divulging passwords or other sensitive data if the user is currently logged into the other site.
This is problematic only if the JSON-encoded data contains sensitive information which should not be disclosed to a third party, and the server depends on the browser's Same Origin Policy to block the delivery of the data in the case of an improper request. There is no problem if the server determines the propriety of the request itself, only putting the data on the wire if the request is proper. Cookies
HTTP cookie
A cookie, also known as an HTTP cookie, web cookie, or browser cookie, is used for an origin website to send state information to a user's browser and for the browser to return the state information to the origin site...
are not by themselves adequate for determining if a request was authorized. Exclusive use of cookies is subject to cross-site request forgery
Cross-site request forgery
Cross-site request forgery, also known as a one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website whereby unauthorized commands are transmitted from a user that the website trusts...
.
History
In July 2005 George Jempty suggested an optional variable assignment be prepended to JSON. The original proposal for JSONP, where the padding is a callback function, appears to have been made by Bob Ippolito in December 2005 and is now used by many Web 2.0Web 2.0
The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web...
applications such as by Dojo Toolkit
Dojo Toolkit
Dojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD...
, Google Web Toolkit
Google Web Toolkit
Google Web Toolkit is an open source set of tools that allows web developers to create and maintain complex JavaScript front-end applications in Java. Other than a few native libraries, everything is Java source that can be built on any supported platform with the included GWT Ant build files...
, and Web service
Web service
A Web service is a method of communication between two electronic devices over the web.The W3C defines a "Web service" as "a software system designed to support interoperable machine-to-machine interaction over a network". It has an interface described in a machine-processable format...
s.