同源策略:是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以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.可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。