前端必备HTTP技能之JSONP技术详解

2023年6月11日 200次阅读 来源: 留七七

JSONP(JSON with Padding)是一种JSON扩展，用来解决由浏览器同源策略引起跨域限制。跨域限制就是限制访问其它域上面的资源而不限制当前域上的资源访问，通俗来说就是一个站点不能简单从其它站点访问数据。

它被开发出来的原因是处理浏览器同源策略很困难，使用JSONP可以抽象这种困难，让其处理起来更容易。

JOSN代表JavaScript Object Notation，是一种通过键值对表示对象字段的展示数据的格式。

如何工作

为了搞明白这种技术如何工作，首先考虑一个可以返回JSON数据的URL。js可以通过XMLHttpRequest请求这个URL，例如用户ID是1234，浏览器请求URL：http://server.example.com/Users/1234，传过去ID是1234，得到的结果类似下面：

{
    "Name": "Foo",
    "Id": 1234,
    "Rank": 7
}

这里，把这个URL赋值给<script>的src属性，然后返回JSON：

<script type="application/javascript" src="http://server.example.com/Users/1234"></script>

浏览器会按顺序下载script文件，评估文件内容，把原始JSON数据解析成语句块，然后抛出语法语法异常。尽管数据可以解析成对象字面量，但是在浏览器中不会被js访问到，因为没有变量赋值，对象字面量是无法访问的。

在JSONP的使用模式中，<script>标签的src属性指向的URL请求返回的JSON数据，有js代码（通常是函数调用）包装。这种“包装负载”会被浏览器解析。用这种方式，js环境中已经定义的一个函数可以操纵JSON数据。一个典型的JOSNP请求和响应下面会说明。

JOSNP中的”P”可以理解为parseResponse(),解析响应;也可以理解为”padding”,css中的代表元素的内边距，这里是指包裹着JOSN数据的内边距，很形象；也可以理解为”prefix”。

注意JOSNP如果要工作，服务端必须有一个包含JSONP函数的响应。JSONP不会对JOSN格式的结果起作用。返回JSONP函数调用，函数接受的参数必须是客户端和服务端约定好的格式。

按照惯例，浏览器提供回调函数作为请求参数值，通常在请求中使用jsonp或者callback作为请求字段。

<script type="application/javascript"
        src="http://server.example.com/Users/1234?callback=parseResponse">
</script>

在上例中，接收到的负载如下：

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

其中parseResponse是前端页面js域中已经定义过的一个js函数，参数就是一个json对象

脚本注入

只有在script标签中使用JSONP才有意义。对于每个新的JSONP请求，浏览器必须增加一个新的<script>标签，或者重用一个已经存在的。前一个选择增加一个新的script标签可以通过DOM操作实现，这就是脚本注入。<script>标签注入到HTML的DOM，然后把JSONP的请求url赋值给src属性。动态的脚本注入通常使用JQuery库实现或者其他框架有的JSONP帮助函数。

一个使用JQuery动态注入script标签实现JOSNP的例子：

$.getScript("http://server.example.com/Users/1234?callback=parseResponse");

当元素注入之后，浏览器解析这个元素，然后使用src属性的url执行HTTP请求，接收内容。然后浏览器把返回值当成js解析加载，这通常是个函数调用。

用这种方式，使用JOSNP可以让浏览器页面通过脚本注入躲过同源策略。

脚本会在页面包含的域中执行，因此，仍受跨域限制相对于包含页面。这意味着一个web页面不能通过JOSNP载入另一个站点的上的库，然后对这个站点发起XMLHttpRequest请求(除非这个站点支持CORS)，尽管可以利用这个库对当前页面所在站点发起XMLHttpRequest请求。

使用服务端代理发起跨域请求

js的同源策略正常情况下组织浏览器对另一个站点发送AJAX请求接收响应(新版支持CORS的浏览器可以避免这个限制)。使用服务端代理，没有这种限制，可以转发浏览器请求到一个独立域上的服务器，保存结果，然后当浏览器第二次发送请求时，再把结果返回(其实没必要这么麻烦，一次请求就可以搞定，页面请求到服务端，服务端此时再发http请求到另一个站点获取到数据，然后把这个数据直接返回给页面，这样一次请求就搞定了，此时的服务端就是代理)。

安全考量

不受信任的第三方代码

一个站点如果包含来自远程服务器的script标签，远程服务器就可以注入任意内容到这个站点。如果远程服务器存在允许js注入的漏洞，源服务器托管的野蛮就会遭受攻击风险。如果攻击者可以注入任意js代码到源页面，那么这些代码就可以从任意域获取额外js，从而绕过同源策略。HTTP的Content Security Policy头可以让站点告诉浏览器那个域下面的脚本可以被获取。

2011年曾尝试给出一个JSONP的安全严格的子集定义，这个子集规定浏览器将强制脚本请求时附带一个指定的MIME类型，例如”application/json-p”。如果响应没有按严格的JSONP解析，浏览器可以抛出异常或者忽略整个响应。然而为了支持CORS废弃了提案，现在JOSNP保留的正确的MIME类型是application/javascript。

回调名操纵和映射文件下载攻击

未被批准的回调名称可以用来传送恶意数据到客户端，绕过application/json类型限制，曾在映射文件下载攻击(reflected file download,RFD)发表时演示过。

跨域请求伪造

JSONP容易遭受跨站请求伪造攻击。因为<script>标签可以绕过浏览器的同源策略，一个恶意页面可以从其它站点请求获取JSON数据。这样JOSN格式编码的数据可以在恶意页面的上下文环境中执行，如果用户此时正在登陆一个站点，就容易泄露密码或者其他敏感信息。

只有当JSON格式编码的数据中包含敏感信息时，才有这个问题。在有未授权请求的情况下，服务端依赖浏览器的同源策略来阻止数据传递。这种完全依赖浏览器同源策略的安全策略可以避免，通过服务端决定请求是否被授权，如果是的话，再发送数据。但是要避免只使用cookies来决定请求是否授权的方式，因为存在跨站脚本请求。

做好前端开发必须对HTTP的相关知识有所了解，所以我创建了一个专题前端必备HTTP技能专门收集前端相关的HTTP知识，欢迎关注，投稿。

PS:本文翻译自维基百科，原文地址https://en.wikipedia.org/wiki/JSONP

    原文作者：留七七
    原文地址: https://www.jianshu.com/p/c5fd5f9a347a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞