JSONP和CORS跨站跨域读取资源的漏洞利用解析

Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
 
一、服务端JSONP格式数据
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
 
二、客户端实现 callbackFunction 函数
script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '';
    for(var i = 0; i '' + result[i] + '';
    }
    html += '';
    document.getElementById('divCustomers').innerHTML = html;
}
script>
客户端页面完整代码
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 = '';
            for(var i = 0; i '' + result[i] + '';
            }
            html += '';
            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
html>
head>
    meta charset="utf-8">
    title>JSONP 实例title>
    script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">script>  
head>
body>
div id="divCustomers">div>
script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    var html = '';
    for(var i = 0; i '' + data[i] + '';
    }
    html += '';
    $('#divCustomers').html(html);
});
script>
body>
html>
jQuery – AJAX get() 和 post() 方法
http://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp
jQuery $.get() 方法
html>
head>
script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">script>
script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("/example/jquery/demo_test.asp",function(data,status){
      alert("数据：" + data + "n状态：" + status);
    });
  });
});
script>
head>
body>
button>向页面发送 HTTP GET 请求，然后获得返回的结果button>
body>
html>
http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js
jQuery $.post() 方法
html>
head>
script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
script>
script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/example/jquery/demo_test_post.asp",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      alert("数据：" + data + "n状态：" + status);
    });
  });
});
script>
head>
body>
button>向页面发送 HTTP POST 请求，并获得返回的结果button>
body>
html>
http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js
jQuery AJAX get() 和 post() 方法
https://www.runoob.com/jquery/jquery-examples.html
jQuery get()
使用 $.get() 方法从服务端异步获取数据
https://www.runoob.com/try/try.php?filename=tryjquery_ajax_get
html>
head>
meta charset="utf-8">
title>菜鸟教程(runoob.com)title>
script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">