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

同源就是如果两个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是可以共享的。