同源啊跨域啊好像也要被讲烂了，网上随便搜搜也有很多详细的教程，阮老师的文章也是其中的经典。
前段时间经历了第一次前端面试，笔试开头的基础题就是问同源策略，当时菜逼如我答的不好，虽然最后结果是好的，但是还是想做一个整理给自己一雪前耻
浏览器的同源策略
首先当然要介绍一下浏览器的同源策略
- 端口相同
- 域名相同
- 协议相同
这是用于保护用户数据的安全，防止恶意访问
按照阮老师的说法，目前，如果非同源，共有三种行为受到限制。
- 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 详解——阮一峰
参考资料：
浏览器同源策略及其避规方法——阮一峰
网友评论