行业资讯

同源与跨域之间其实有着相互制约的作用。它们从字面上看起来像两个反义词,但不能简单地当成一个反义词去处理。在介绍跨域问题之前,先来解释一下同源和同源策略。

同源就是如果两个URL的协议、域名和端口相同,那么就认为它们是同源的,3个元素缺一不可。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

同源策略是由浏览器实现的,限制了不同源之间的交互。这种限制主要是针对一些特殊的请求,如不同源访问document的限制、Ajax(XMLHttpRequest)请求限制等。

并不是每个不同源的请求都会被限制的,包括如下请求。

(1)页面中的链接、重定向和表单提交不会受到同源策略的限制。

(2)跨域资源嵌入是允许的,当然,浏览器会限制JavaScript的读写。

但互联网的发展趋势是越来越开放了,跨域访问的需求也变得越来越迫切。

所以,Web开发人员就会想出一些“合法”的跨域技术,来进行不同源之间的访问,如jsonp、iframe跨域技巧。

1. DOM的同源策略

浏览器的同源策略限制了来自不同源的“document”或脚本,对于当前document的读取或设置某些属性,从一个域上加载的脚本不允许访问另一个域的文档属性。此策略是基于DNS域名的,而不是实际的IP地址,由此会产生一些漏洞,如DNS重绑定攻击,当然,浏览器也会有相应的对策,如DNS Pinning。

2. Ajax跨域

由于浏览器的同源策略,Ajax 的请求也会被限制。Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外,XMLHttpRequest是一个纯粹的JavaScript对象,这个交互过程在后台进行,不易被察觉。

所以,实际上 JavaScript 已经突破了原有的 JavaScript 同源策略。如果我们既想利用XMLHTTP 的无刷新异步交互能力,又不愿意公然突破 Javascript 的安全策略,可以选择的方案就是为XMLHTTP加上严格的同源限制。这样的安全策略,很类似于Applet的安全策略。iframe的限制还仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则从根本上限制了跨域请求的提交。

随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。

3. Web Storage同源策略

随着 Web 应用的发展,客户端的本地存储使用得也越来越多。最简单而且兼容性最佳的方案是 Cookie。但是在实际应用中,Cookie 在应用上存在很多的缺陷。所以,另一种方式是使用Web Storage。Web Storage中可以存储比较简单的key-value的键值对的形式的数据。

Web Storage实际上由两部分组成:Session Storage和Local Storage。Session Storage用于存储一个会话中的数据,关闭浏览器时就会失效,而Local Storage会一直存在,用于持久性的存储,除非主动删除数据,否则会一直存在。

而Web Storage也受到浏览器的同源策略的限制。浏览器会为每个域都分配存储空间,不同的域之间不能进行数据访问。但如果域A中的脚本嵌入域B时,那么浏览器是允许数据之间的访问的。

4. Cookie安全策略

Cookie的同源策略与上述同源策略有一点不同。Cookie中的同源只关注域名,而会忽略端口和协议。例如,https://www.landui.com calhost:8080/与http://www.landui.com calhost:8081/的Cookie是可以共享的。


提交成功!非常感谢您的反馈,我们会继续努力做到更好!

这条文档是否有帮助解决问题?

非常抱歉未能帮助到您。为了给您提供更好的服务,我们很需要您进一步的反馈信息:

在文档使用中是否遇到以下问题: