同源策略与跨域

2018-02-07 本文已影响0人如意同学Try

同源啊跨域啊好像也要被讲烂了，网上随便搜搜也有很多详细的教程，阮老师的文章也是其中的经典。

前段时间经历了第一次前端面试，笔试开头的基础题就是问同源策略，当时菜逼如我答的不好，虽然最后结果是好的，但是还是想做一个整理给自己一雪前耻

浏览器的同源策略

首先当然要介绍一下浏览器的同源策略

端口相同
域名相同
协议相同

这是用于保护用户数据的安全，防止恶意访问

按照阮老师的说法，目前，如果非同源，共有三种行为受到限制。

Cookie、LocalStorage 和 IndexDB 无法读取。
Dom无法获取
Ajax请求
如何实现跨域，在有些必要的场合突破这些限制呢

cookie

window.domain设置同一父域名

对于同一个页面，不同的iframe之间是可以共享window对象，只不过不能使用另一个页面window的对象的属性和方法（极少部分除外，如h5中的postMessage方法）。此时，可以使用domain将iframe设置为相同的域。

如有一个网页Ahttp://w1.example.a.com，一个网页Bhttp://w2,example.b.com。
只要设置相同的document.domain，两个页面就能共享数据和DOM（LocalStorage 和 IndexDB 无法通过这种方法传递）

document.domain = "example.com" //必须为自身 或父域

这两个网页就能互相访问dom和数据了。

比如你在网页A设置一个cookie

//网页A
document.cookie ="i'm A"

就可以在网页B访问到这个属性

//网页B
document.cookie // i'm A

DOM的获取

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。

对于完全不同源的网站,可以采用下面三种方法

window.name
跨文档通信API（Cross-document messaging）
片段识别符（fragment identifier）

window.name

window.name这个浏览器窗口属性最大的特点就是，只要在同一个窗口中，无论是否同源，所有页面都能共享这个属性。每个页面对window.name都有读写的权限

而且window.name可以存储容量比较大，一般有2M（不同浏览器容量不容）

跨文档通信API

H5为了解决跨源的问题，引入了一个全新的API,为window新增了一个方法window.postMessage，允许跨窗口通信，无论是否同源。

比如在窗口http://aaa.com中，想要向另一个页面http://bbb.com发送消息。调用postMessage方法即可

//aaa.com中写入
var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

bbb中通过message事件监听消息

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

其中message事件对象event提供三个属性

event.source：消息来源的地址
event.origin：消息发向的地址
event.data：消息内容

片段识别符

片段识别符指的是，URL的#号后面的部分。如果仅是识别符改变，不会导致页面刷新。父页面可以将信息写入子页面的识别符中

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

子页面通过onhashchange监听

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}

子页面也可以把信息写入父页面的识别符

parent.location.href= target + "#" + hash;

AJAX请求的跨域

针对AJAX请求，有两种跨域方式

JSONP 只支持get请求，不支持post请求；兼容性较好
CORS 支持所有请求；不兼容老旧浏览器

jsonp跨域

jsonp是利用script标签可以跨域访问资源的特性，在页面内动态插入一个script标签，向服务器发起数据的跨域请求。服务器收到请求后，将数据放在一个指定名字的回调函数中传回

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

cors跨域

cors请求的局限就小很多了，它是一个W3C标准，允许向跨源服务器，发起XMLHttpRequest请求。支持IE10及其以上。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

cors请求具体实现方式可以参考阮老师的文章跨域资源共享 CORS 详解——阮一峰

参考资料：
浏览器同源策略及其避规方法——阮一峰