码迷,mamicode.com
首页 > Web开发 > 详细

jsonp跨域请求

时间:2018-01-26 17:11:17      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:col   ack   页面   pre   jsonp   content   html   main   echo   

同源策略:是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
同源:指的是地址里面的协议(http/https)、域名和端口号均相同

不受同源策略限制的:
  1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
  2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等

jsonp跨域就是利用src访问资源不受跨域限制,所以可以通过src这个特性来实现跨域访问数据

JSONP的原理:

  (举例:a.com/jsonp.html想得到b.com/jsonp.php中的数据)
在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。
请求地址为http://b.com/main.js?callback=xxx。在jsonp.php中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。

  如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
  假设客户期望返回JSON数据:["customername1","customername2"]
  真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])

  

<?php
header(‘Content-type: application/json‘);
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback‘]);
//json数据
$json_data = ‘["customername1","customername2"]‘;
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
//客户端页面
//<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>

采用jsonp跨域也存在问题:
  1.使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证
  2.只能是GET,不能POST。
  3.可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

 

jsonp跨域请求

标签:col   ack   页面   pre   jsonp   content   html   main   echo   

原文地址:https://www.cnblogs.com/changxue/p/8360097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!