JSON
指的是JavaScript
对象表示法( JavaScript Object Notation
)
JSON
是轻量级的文本数据交换格式
JSON
是存储和交换文本信息的语法,类似XML
但JSON
比XML
更小、更快、更易解析
C、Python、C++、Java、PHP、Go
等编程语言都支持JSON
几乎所有编程语言都有解析JSON的库,而在JavaScript
中,我们可以直接使用JSON
,因为JavaScript
内置了JSON
的解析。
把任何JavaScript
对象变成JSON
,就是把这个对象序列化成一个JSON
格式的字符串,这样才能够通过网络传递给其他计算机。
数据为 键/值 对(key:value
)
数据由逗号分隔
方括号保存数组
大括号保存对象
var Deutsh = {
name: 'De4tsh',
age: 66,
height: 2.01,
grade: null,
skills: ['JavaScript', 'C', 'C++', 'Python'], // 数组
like: {"sports":"football","eat":"pizza"} // 对象
};// 将 Deutsh 对象序列化为 JSON 格式字符串
var deu = JSON.stringify(Deutsh);
console.log(deu);
转换得到的 JSON 格式的数据为:
{"name":"De4tsh","age":66,"height":2.01,"grade":null,"skills":["JavaScript","C","C++","Python"],"like":{"sports":"football","eat":"pizza"}}
CORS
是推荐的方法,而不是JSONRequest
。JSONP
对于较旧的浏览器支持仍然有用,但考虑到安全隐患,除非您别无选择,否则CORS
是更好的选择
JSONP
是JSON with padding
(填充式JSON
或参数式JSON
)
简单来说,JSON
的一种”使用模式”,可以让当前网页从别的域名(网站)那获取资料,即跨域读取数据,而且JSONP
算是一种非官方的技术手段 ( 官方的有CORS
(之前在 SSTI 注入时提到过) 和postMessage
)
至于为什么跨域访问别的域名的资源还要借助这种方式,原因在于有着:同源策略的限制:在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI、主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据(比如说 cookie )值得注意的是同源策略仅适用于脚本,这意味着某网站可以通过相应的HTML标签访问不同来源网站上的图像、CSS和动态加载脚本等资源。而跨站请求伪造就是利用同源策略不适用于HTML标签的缺陷。
如上所述,JSONP
正是利用了HTML
中的<script>
标签中src
(该属性用于规定外部脚本的 URL)属性不受同源策略约束来跨域获取数据的
JSONP
会动态的创建<script>
标签,然后通过其中的src
属性来跨域获取数据
JSONP
由两部分组成
回调函数—callback
数据——data
简单来说整体流程为:
当我们访问一个网站时,若该网站需要请求外部的资源,会通过动态建立一个带有src
属性的<script>
标签,去访问对应要请求资源网站的JSONP
接口(请求时提供位于本端的回调函数名称),请求该接口后会返回所提供回调函数的调用,与该函数所需要的数据,而该函数由当前请求端所定义请求的(开发者根据请求资源的类型来定义好该回调函数)
此处借用 菜鸟教程所提供一个
JSONP
接口来展示JSONP
跨域请求的一个示例
jsonp.php
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
这个也就是我们要请求的不是同源的数据所在的域
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
(该接口为菜鸟教程提供,大家若要做实验可直接使用)
说是客户端其实比较容易误解,说白了就是一个要请求上述域中资源的非同源的里另一个域名,此处我们通过本地起python -m http.server 8080
来搭建一个建议的本地网站,这个网站也就是作为用户的 你/我 要访问的网站,该网站的HTML
为:
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="<https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction>"></script>
</body>
</html>
注意看客户端的HTML
代码中已生成用于访问本域之外资源的带有src
属性的<script>
标签
上述
simplehttp
的IP:PORT
为http://172.16.12.150:8080
作为用户的我们访问该网站后则会显示:
http://172.16.12.150:8080/demo.html
可以看到请求到了位于不同域(https://www.runoob.com
)的jsonp.php
中的数据["customername1","customername2"]
,并且该数据还经过了位于http://172.16.12.150:8080
HTML 中回调函数callbackFunction
的处理后,返回到了用户 “眼中”
所以此时的逻辑就是我们访问了http://172.16.12.150:8080
的网站,该网站需要获取位于https://www.runoob.com
中的数据(比如说本例子中的JSON
数据),但由于这两个网站处于不同域,所以无法直接通过javascript
请求,所以通过<script>
标签的src
属性请求了https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
这个JSONP
接口,至此或得到了JSON
的数据,并通过本网站(http://172.16.12.150:8080
)的回调函数,对或得到的数据进行了个性化的处理,最终展示给用户
其实直接请求该JSONP
接口也可以得到数据,但该数据是没有经过本端回调函数处理的(而且还会被包在一个未定义的回调函数中)
由上面的描述就可以很容易的发现,若回调函数被控制,那么便可将请求到的数据通过该函数进行任意的处理
假设当前有两个网站:
网站A由攻击者自建立,包含恶意的JSONP
回调函数以及向网站B发送请求的带有src
属性的<script>
标签
网站B正常网站,用户需要登录该网站形式其功能,并且该带有JSONP
支持跨域请求
所以整体的流程就是:
首先用户会登录网站B
,网站B
中包含了该登录的基本信息(用户ID、用户名等),并且网站B
还存在一个JSONP
接口,用户在访问该网站的时候,该接口会返回用户的信息
此时通过配合其他漏洞或诱导用户来访问网站A
,此时包含着恶意回调函数以及src
属性的<script>
标签的HTML
页面就会加载到用户这边
标签被触发,通过用户的身份,向网站B
的JSONP
接口发送请求,便可以请求到B
的基本信息的数据
然后再配合恶意的回调函数,无论是将这些数据发回网站A
,还是显示出来都可以,自由发挥即可
至此便完成了一个JSONP
的劫持
捕获带callback=
的 URL
,把 Referer
换成其他站点重放一次,还是成功那就对了
归根结底,JSONP 可造成的危害并不是很大,因为其需要满足的前提条件很多(比如:需要跨域、并且不能有token
的校验),这也就是造成其很难自己一个人 “挑起大梁”,还需要配合其他的漏洞,或是钓鱼等
所以与其寻找挖该漏洞,不如将其用于蜜罐中
What is JSONP, and why was it created?
由浅入深理解JSONP并拓展
201-A20-同源策略及相关漏洞
JSONP 教程
浅谈Ajax跨域及其JSONP简单实现
W3Schools online HTML editor
点击下方小卡片或扫描下方二维码观看更多技术文章
师傅们点赞、转发、在看就是最大的支持