对JSONP请求的工作方式感到困惑

冀永寿

2023-03-14

问题内容：

我在理解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请求中检索/使用数据吗？

问题答案：

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

这会发生什么：

1）您的代码创建JSONP请求，这将导致一个新的<script>块，如下所示：

<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是一种让第三方服务器直接将函数调用注入您的页面的方式，从而绕过浏览器的同源脚本安全策略。请注意，这是设计使然不安全的。您依赖于远程服务是否值得接受并且没有恶意。没有什么能阻止不良服务返回一些JS代码来窃取您的银行/
Facebook /任何凭证。例如… JSONP响应本来可以

 internalUseOnlyFunction('deleteHarddrive');

而不是parseReponse（…）。如果远程站点知道您的代码结构，则可以使用该代码执行任意操作，因为您已将您的前门完全打开以允许该站点执行其所需的任何操作。