首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >对JSONP请求的工作方式感到困惑

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

Stack Overflow用户
提问于 2012-04-17 22:22:37
回答 1查看 7.4K关注 0票数 27

我在理解jsonp请求如何工作的细节时遇到了问题。我已经阅读了一些资源,包括关于jsonp的wiki,我仍然很困惑,当调用jsonp时,回调实际上是如何获得从服务器返回的函数的。例如,在wiki中,请求的来源设置为:

代码语言:javascript
复制
src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"

jsonp = parseResponse到底是什么意思?然后他们继续说有效载荷是:

代码语言:javascript
复制
parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

这是怎么回事?我对整个回调功能感到困惑。函数名parseResponse被传递给服务器,并且以某种方式返回的数据变成了这个函数的参数?有人能清楚地解释一下如何从jsonp请求中检索/使用数据吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-04-17 22:31:12

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

下面会发生什么:

1)您的代码创建了JSONP请求,这将产生一个新的<script>块,如下所示:

代码语言:javascript
复制
<script src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"></script>

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

代码语言:javascript
复制
parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

3)由于此请求来自脚本标记,因此它几乎与您从字面上放置的

代码语言:javascript
复制
<script>
    parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});
</script>

放入你的页面。

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

因此,在您的代码中的其他地方,您将拥有:

代码语言:javascript
复制
function parseResponse(data) {
     alert(data.Name); // outputs 'Foo'
}

基本上,JSONP是一种绕过浏览器的同源脚本安全策略的方法,通过让第三方服务器将函数调用直接插入到页面中。注意,这在设计上是高度不安全的。您需要确保远程服务是可靠的,并且没有恶意。没有什么能阻止一个糟糕的服务返回一些窃取你的银行/facebook/任何凭证的JS代码。例如……JSONP响应可能是

代码语言:javascript
复制
 internalUseOnlyFunction('deleteHarddrive');

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

票数 51
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10193085

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档