JSONP ( JSON with Padding ) is a "usage mode" of the data format JSON , which allows web pages to request data from other domains. Another new approach to this problem is cross-origin resource sharing .
Due to the same-origin policy , in general a web page located at server1.example.com cannot communicate with a server at server2.example.com, with the exception of HTML<script> elements. Using <script>this open strategy of elements, web pages can get JSON data dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, run with a JavaScript interpreter rather than parsed with a JSON parser.
Table of contents
[ hide ]Principle [ edit ]
In order to understand the principle of this mode, first imagine that there is a URL that returns a JSON file, and a JavaScript program can use XMLHttpRequest to request data from this URL. Suppose our URL is http://server2.example.com/RetrieveUser?UserId=xxx. Suppose Xiaoming's UserId is 1823, and when the browser passes Xiaoming's UserId through the URL, that is, crawl http://server2.example.com/RetrieveUser?UserId=1823, get:
{
"Name": "小明", "Id" : 1823, "Rank": 7}
This JSON data may be dynamically generated based on the query parameters passed in the past URL.
At this time, <script>it is conceivable to set the src attribute of the element to a URL that returns JSON, which also means that it is possible to grab JSON from the HTML page through the script element.
However, a JSON file is not a JavaScript program. In order for the browser to <script>run the element, the URL returned from the src must be executable JavaScript. In the usage mode of JSONP, the URL returns the dynamically generated JSON wrapped by the function call, which is the origin of JSONP's "padding" or "prefix".
By convention browsers provide the name of the callback function as part of named query parameters in the request to the server, for example:
<script type="text/javascript"
src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">
</script>
The server will fill the JSON data into the callback function (parseResponse) before passing it to the browser. The response the browser gets is no longer a simple data description but a script. In this example, what the browser gets is:
parseResponse({
"Name": "小明", "Id" : 1823, "Rank": 7})
filling [ edit ]
虽然这个填充（前辍）“通常”是浏览器运行背景中定义的某个回调函数，它也可以是变量赋值、if叙述或者是其他JavaScript叙述。JSONP要求（也就是使用JSONP模式的请求）的回应不是JSON也不被当作JSON解析——回传内容可以是任意的表达式，甚至不需要有任何的JSON，不过惯例上填充部分还是会触发函数调用的一小段JavaScript片段，而这个函数调用是作用在JSON格式的数据上的。
另一种说法—典型的JSONP就是把既有的JSON API用函数调用包起来以达到跨域访问的解法。
Script元素“注入”[编辑]
为了要引导一个JSONP调用（或者说，使用这个模式），你需要一个script 元素。因此，浏览器必须为每一个JSONP要求加（或是重用）一个新的、有所需 src值的 <script>元素到HTML DOM里—或者说是“注入”这个元素。浏览器运行该元素，抓取src里的URL，并运行回传的 JavaScript。
也因为这样，JSONP被称作是一种“让用户利用script元素注入的方式绕开同源策略”的方法。
安全问题[编辑]
使用远程网站的script标签会让远程网站得以注入任何的内容至网站里。如果远程的网站有JavaScript注入漏洞，原来的网站也会受到影响。
现在有一个正在进行项目在定义所谓的JSON-P严格安全子集，使浏览器可以对MIME类别是“application/json-p”请求做强制处理。如果回应不能被解析为严格的JSON-P，浏览器可以丢出一个错误或忽略整个回应。
Cross-site request forgery [ edit ]
Crude JSONP deployments are vulnerable to cross-site request forgery (CSRF/XSRF) attacks [1] . Because HTML tags do not obey the same-origin policy<script> in browsers , malicious webpages can request and obtain JSON data belonging to other websites. This situation allows the malicious website to manipulate the JSON data in the context of the malicious website while the user is logging into that other website, potentially leaking the user's password or other sensitive data.
This is only a problem if the JSON data contains secret data that should not be leaked to third parties, and the server relies solely on the browser's same-origin policy to block unusual requests. There is no problem if the server itself determines the required exclusivity, and only outputs data when the request is normal. Cookies alone are not enough to determine that the request is legitimate, which is vulnerable to cross-site request forgery attacks.