JSONP

The HTML <script> element is generally allowed to execute JavaScript code retrieved from foreign origins. Services replying with pure JSON data, however, were not able to share data from foreign origins before the adoption of CORS (Cross-origin resource sharing).

For example, a request to a foreign service http://server.example.com/Users/1234 may return a record for a person named Alice in the JSON format. JSON syntax is consistent with JavaScript's object syntax.

{
    "Name": "Alice",
    "Id": 1234,
    "Rank": 7
}

Without support for CORS, an attempt to use the data across domains results in a JavaScript error.

<script type="application/javascript"
        src="http://server.example.com/Users/1234">
</script>

The browser will download the <script> file, evaluate its contents, misinterpret the raw JSON data as a block, and throw a syntax error. Even if the data were interpreted as a JavaScript object literal, it could not be accessed by JavaScript running in the browser, since without a variable assignment, object literals are inaccessible.

In the JSONP usage pattern, the URL request pointed to by the src attribute in the <script> element returns JSON data, with JavaScript code (usually a function call) wrapped around it. This "wrapped payload" is then interpreted by the browser. In this way, a function that is already defined in the JavaScript environment can manipulate the JSON data. A typical JSONP request and response are shown below.

The function call to parseResponse() is the "P" of JSONP—the "padding" or "prefix" around the pure JSON.[4] For JSONP to work, a server must reply with a response that includes the JSONP function. JSONP does not work with JSON-formatted results. The JSONP function invocation that gets sent back, and the payload that the function receives, must be agreed upon by the client and server. By convention, the server providing the JSON data offers the requesting website to name the JSONP function, typically using the name jsonp or callback as the named query-string parameter, in its request to the server: <script src="<nowiki>http://server.example.com/Users/1234?callback=parseResponse</nowiki>"></script>.

In this example, the received payload would be:

parseResponse({"Name": "Alice", "Id": 1234, "Rank": 7});

JSONP makes sense only when used with a script element. For each new JSONP request, the browser must add a new <script> 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 <script> element is injected into the HTML DOM, with the URL of the desired JSONP endpoint set as the "src" attribute. This dynamic script element injection is usually done by a JavaScript helper library. jQuery and other frameworks have JSONP helper functions; there are also standalone options.

An example of using jQuery to dynamically inject script element for a JSONP call looks like this:

$.getScript("http://server.example.com/Users/192.168.73.96?callback=parseResponse");

After the element is injected, the browser evaluates the element, and performs an HTTP GET on the src URL, retrieving the content. Then the browser evaluates the return payload as JavaScript. This is typically a function invocation. In that way, the use of JSONP can allow browser pages to work around the same-origin policy via script element injection.

The script runs within the scope of the including page and, as such, is still subject to cross-domain restrictions relative to the domain of the including page. This means that a web page cannot, for example, load a library hosted on another site via JSONP and then make XMLHttpRequest requests to that site (unless cross-origin resource sharing (CORS) is supported), although one could use such a library to make XMLHttpRequests to one's own site.

In July 2005, George Jempty suggested an optional variable assignment be prepended to JSON.[17][18] The original proposal for JSONP, where the padding is a callback function, appears to have been made by Bob Ippolito in December 2005[19] and is now used by many Web 2.0 applications such as Dojo Toolkit, Google Web Toolkit and Web services.

• Cross-origin resource sharing (CORS)
• Cross-document messaging

• server side filter wraps any response into a jsonp callback – done with jsonp-java source code
• Potential security issues related to JSON
• JSONP data source for remote domains