前端资料饥人谷技术博客

同源策略、跨域、jsonp

2016-12-13  本文已影响558人  GarenWang

1.什么是同源策略

1.要了解同源策略,我们必须先知道源即orgin

Y`S2F{Q{FHNK0K(FFAL)48V.png
  1. 如:http://a.com/a.htmlhttp://b.com/a.html
    二者的域名不相同,不同源,不能读取对方的数据
  2. 如:https://a.com/b.htmlhttp://a.com/b.html
    二者协议版本不一样,不同源,不能读写对方的数据
  3. 如:http://a.com/b.htmlhttp://a.com:80/b.html
    前置省略了默认端口号80,但二者是同源,同时文件路径是否相同和同源无关,所以二者可以读写双方的数据
  1. Cookie、LocalStorage 和 IndexDB 无法读取
  2. DOM 无法获得。
  3. AJAX 请求不能发送。

2.什么是跨域?跨域有几种实现形式?

1.png
  1. 降域:即双方域名不相同,但同时绑定到某个主域名下,通过设置document.domain+iframe。具体的做法是可以在http://www.a.com/a.htmlhttp://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’;然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况,
    某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如www.a.com其实是二级域名。 domain只能设置为主域名,不可以在b.a.com中将domain设置为c.a.com
  2. JSONP:全称为 JSON with padding ,其实质就是动态的创建script标签来实现跨域,它是基于script可以相互引用,即虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。
    3.CORS:Cross-origin resource sharing(全称是"跨域资源共享"),它允许它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
  3. 使用HTML5 postMessage:HTML5中最酷的新功能之一就是 跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能,用postMessage支持基于web的实时消息传递。
  4. 其他:利用iframe和location.hash和window.name实现的跨域数据传输等

3.jsonp 的原理是什么?

就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({"name":"hax","gender":"Male"})这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

4.CORS是什么

  1. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
  2. CORS 的兼容性,CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
  3. CORS 的请求分为两类:简单请求(simple request)和非简单请求(not-so-simple request)。以简单请求为例
  1. 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据

通过在HTTP Header中加入扩展字段,服务器在相应网页头部加入字段表示允许访问的domain和HTTP method客户端检查自己的域是否在允许列表中,决定是否处理响应。
服务器端在HTTP的响应头中加入(页面层次的控制模式):
Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range Access-Control-Max-Age: 3600
多个域名之间用逗号分隔,表示对所示域名提供跨域访问权限。”*”表示允许所有域名的跨域访问。

练习

1.本地搭建服务器,演示同源策略

      一. 本地搭建服务器(如果使用 SAE 可创建不同的代码版本,这样可通过      
      1.xxx.sinapp.com和2.xxx.sinapp.com 访问了)
      2. 修改 本地host,通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php,本质是
      3. 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据。
      4. 查看输出报错

![FUD_4]4@(373R({WX}6AM2G.png](http:https://img.haomeiwen.com/i3361706/0ed330d1d707587b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

以下是 www.b.wang.com的test-1.php的代码
<?php
$data='获取数据成功';
echo json_encode($data);
?>

2.解决同源策略的限制

1.CORS,未来跨域方法的趋势,使用ajax十分简单,安全性高,但是兼容不好,至少要IE10以上,但是随着时代进步,早晚是CORS的天下。

{~O$$3}E(`F}1IIYV{SZ}@I.png
  1. jsonp,利用动态的script便签的创建获取到数据
    index.html的代码如下:
    <script type="text/javascript">
    function jsonp(data){
    alert(data)
    }
    var script=document.createElement('script');
    script.src='http://www.b.wang.com/test-1.php?callback=abc';
    document.body.insertBefore(script,document.body.firstChild);

     </script>
    

test-1.php 代码如下:
jsonp('123456789');

E`RS(0E4)4E2YOUEDXRJ)4Y.png

版权和饥人谷和作者所有,若需转载请注明出处

上一篇 下一篇

猜你喜欢

热点阅读