cors数据类型_JSONP和CORS跨站跨域读取资源的漏洞利用（附带EXP）

JSONP 教程

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 函数

function callbackFunction(result, methodName)

{

var html = '

• ';

for(var i = 0; i < result.length; i++)

{

html += '

' + result[i] + '';

}

html += '

';

document.getElementById('divCustomers').innerHTML = html;

}

客户端页面完整代码

JSONP 实例

function callbackFunction(result, methodName)

{

var html = '

• ';

for(var i = 0; i < result.length; i++)

{

html += '

' + result[i] + '';

}

html += '

';

document.getElementById('divCustomers').innerHTML = html;

}

jQuery 使用 JSONP

JSONP 实例

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

var html = '

• ';

for(var i = 0; i < data.length; i++)

{

html += '

' + data[i] + '';

}

html += '

';

$('#divCustomers').html(html);

});

jQuery – AJAX get() 和 post() 方法

jQuery $.get() 方法

$(document).ready(function(){

$("button").click(function(){

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

});

});

向页面发送 HTTP GET 请求，然后获得返回的结果

jQuery $.post() 方法

$(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);

});

});

});

向页面发送 HTTP POST 请求，并获得返回的结果

jQuery AJAX get() 和 post() 方法

jQuery get()

使用 $.get() 方法从服务端异步获取数据

菜鸟教程(runoob.com)

$(document).ready(function(){

$("button").click(function(){

$.get("/try/ajax/demo_test.php",function(data,status){

alert("数据: " + data + "\n状态: " + status);

});

});

});

发送一个 HTTP GET 请求并获取返回结果

jQuery post()

使用 $.post() 方法从服务端异步获取数据

菜鸟教程(runoob.com)

$(document).ready(function(){

$("button").click(function(){

$.post("/try/ajax/demo_test_post.php",{

name:"菜鸟教程",

url:"https://www.runoob.com"

},

function(data,status){

alert("数据: \n" + data + "\n状态: " + status);

});

});

});

发送一个 HTTP POST 请求页面并获取返回内容

jQuery jsonp跨域请求

jquery的jsonp方式跨域请求

最简单的方式，只需配置一个dataType:’jsonp’，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

跨域测试

$(document).ready(function () {

$("#btn").click(function () {

$.ajax({

url: "http://localhost:9090/student",

type: "GET",

dataType: "jsonp", //指定服务器返回的数据类型

success: function (data) {

var result = JSON.stringify(data); //json对象转成字符串

$("#text").val(result);

}

});

});

});

回调函数你可以写到

然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>

跨域测试

function showData (data) {

console.info("调用showData");

var result = JSON.stringify(data);

$("#text").val(result);

}

$(document).ready(function () {

// window.showData = function (data) {

// console.info("调用showData");

//

// var result = JSON.stringify(data);

// $("#text").val(result);

// }

$("#btn").click(function () {

$.ajax({

url: "http://localhost:9090/student",

type: "GET",

dataType: "jsonp", //指定服务器返回的数据类型

jsonpCallback: "showData", //指定回调函数名称

success: function (data) {

console.info("调用success");

}

});

});

});