同源策略与跨域

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

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

浏览器的同源策略

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

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

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

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

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

cookie

window.domain设置同一父域名

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

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

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请求,有两种跨域方式

  1. JSONP 只支持get请求,不支持post请求;兼容性较好
  2. 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 详解——阮一峰

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

推荐阅读更多精彩内容

  • 一、概述 1.1 含义 1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。...
    会飞的贼xmy阅读 65评论 0 2
  • 同源策略 首先解释:同源策略同源策略是浏览器最核心也最基本的安全功能,这个策略可以阻止一个页面上的恶意脚本通过页面...
    cicistream阅读 81评论 0 0
  • 1.什么是同源策略 同domain即域名(或ip),同端口,同协议视为同一个域,一个域内的脚本仅仅具有本域内的权限...
    Sheldon_Yee阅读 96评论 0 1
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 700评论 0 4
  • (一)我不爱秋的每一面 我生在十月末,秋季枫叶烧的正旺的时分。我感谢天地恩泽,父母慈惠,但从懂事起我却不那么喜爱秋...
    素素书阅读 188评论 2 7