javascript - 对 JSONP 请求的工作原理感到困惑

Question

我无法理解 jsonp 请求如何工作的细节。我已经阅读了包括 jsonp 上的 wiki 在内的多个来源，但对于在进行 jsonp 调用时回调实际上如何获取从服务器返回的函数仍然非常困惑。例如，在wiki中，请求的来源设置为:

src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"

jsonp = parseResponse 到底做什么/意味着什么？然后他们继续说有效负载是:

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

这是如何工作的？我对整个回调功能感到困惑。函数名称 parseResponse 被传递到服务器，并且返回的数据以某种方式成为该函数的参数？有人可以清楚地解释如何从 jsonp 请求检索/使用数据吗？

Answer 1

回调是您在自己的代码中定义的函数。 jsonp 服务器将使用与您指定的回调函数名称相同的函数调用来包装其响应。

这会发生什么:

1) 您的代码创建 JSONP 请求，这会产生一个新的 <script> block 看起来像这样:

<script src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"></script>

2) 新的脚本标记由您的浏览器执行，从而向 JSONP 服务器发出请求。它响应

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

3) 由于此请求来自脚本标记，因此它与您实际放置的内容几乎完全相同

<script>
    parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});
</script>

进入您的页面。

4) 现在这个新脚本已从远程服务器加载，现在将执行它，它唯一要做的就是函数调用，parseResponse() ，传入 JSON 数据作为函数调用的唯一参数。

因此，在代码的其他地方，您可以:

function parseResponse(data) {
     alert(data.Name); // outputs 'Foo'
}

基本上，JSONP 是一种绕过浏览器同源脚本安全策略的方法，通过让第 3 方服务器将函数调用直接注入(inject)到您的页面中。请注意，这是设计上高度不安全的。您依赖于远程服务是诚实的并且没有恶意。没有什么可以阻止不良服务返回一些 JS 代码来窃取您的银行/Facebook/任何凭据。例如...JSONP 响应可能是

 internalUseOnlyFunction('deleteHarddrive');

而不是 parseReponse(...)。如果远程站点知道您的代码结构，它就可以使用该代码执行任意操作，因为您已经完全打开了前门，允许该站点执行它想做的任何操作。