JSONP 跨域请求原理

0x00 简介

由于浏览器的同源策略,我们想要从别的域获取数据变得困难,需要特殊的技术才能获取

 

0x01 使用

客户域:client.com

服务器(他域):server.com

如客户想访问 : http://server.com/try/ajax/jsonp.PHP?jsonp=callbackFunction。

假设客户期望返回JSON数据:["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.PHP代码为:

<?PHP
header(‘Content-type: application/json‘);
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback‘]);
//json数据
$json_data = ‘["customername1","customername2"]‘;
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

 

客户端的回调函数代码

<!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>

 

0x02 安全问题

jsonp注入解析

新浪微博之点击我的链接就登录你的微博(JSONP劫持)

 

 

 

参考资料:

JSONP教程

相关文章

AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交...
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面...
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用...
AJAX(Asynchronous JavaScript and XML)是一种用于创建 We...
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面...
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无...