JSONP

Browsers and web ap­pli­ca­tions have many features and mech­a­nisms to protect users and their data from cyber-attacks. One of them is the same-origin policy, in short SOP, in­tro­duced by the former browser cor­po­ra­tion Netscape in 1996 upon the im­ple­men­ta­tion of JavaScript. This directive prohibits client-side scripting languages like JavaScript and Ac­tion­Script, but also stylesheet languages such as CSS, from accessing objects (graphics, videos, etc.) orig­i­nat­ing from another website or URL.

However, the bound­aries set by the same-origin policy are not ben­e­fi­cial for every type of web project, and can even be ob­struc­tive in certain cases – such as in web ap­pli­ca­tions that rely on an asyn­chro­nous data trans­mis­sion between the browser and server (for example, on an Ajax basis). For such projects, solutions to cir­cum­vent the directive, like the JSON method JSONP, are required. This is explained in more detail in the following sections.

JSONP (also written as JSON-P) is a method that helps struc­tured data be sent between different domains in JSON format. The acronym stands for JSON (JavaScript Object Notation) with Padding. To bypass the same-origin policy when re­quest­ing files from other domains, JSONP does not use the “XML­HttpRe­quest” object, as the usual JSON code does, but rather the element “script” including a function call. Unlike other files, scripts can also be trans­ferred across domains without the SOP being violated.

JSONP was developed in 2005 by software developer Bob Ippolito and has been in­te­grat­ed into many Web 2.0 frame­works such as Dojo Toolkit, jQuery, or Google Web Toolkit in recent years as a viable al­ter­na­tive to the customary JSON.

JSONP solves the same-origin policy problem using <script> elements. As many domains as you like can be specified in the “src” attribute of this element, and the directive does not apply here. Therefore, the attribute can also be used to dis­tin­guish URLs that belong to a foreign domain and return JSON code and other files. In such a case, the script itself is ex­clu­sive­ly used as a service provider, which sends the JSONP query to the re­spec­tive web server without having its own effect. In order for the client to be able to sub­se­quent­ly process the data, the server packs this again as a parameter in a JavaScript function, which is already pre­de­fined in the web browser and is com­mu­ni­cat­ed to the server in the query string (or query part) of the URL.

The following example is intended to clarify the operation of JSONP:

If this simple JSONP script is embedded in the HTML code of a website and then run by any client, JSON data is accessed by the foreign domain “not-origin-url.com” (“getjson”). The query string “?jsonp=ex­am­ple­Call­back” tells the contacted server that it is a JSONP query. In addition, the in­for­ma­tion is supplied that it should send the requested data as a parameter of the JavaScript function “ex­am­ple­Call­back”.

The server then generates the ap­pro­pri­ate JavaScript code including the queried in­for­ma­tion as a parameter – in the case of this example, a name-value pair – and returns it to the client:

The function call is then executed by the browser as if it were listed directly in the HTML code of the source page. The browser is thereby able to process the data retrieved from the third-party URL.