同源策略是浏览器的一种安全策略，用于隔离不同网站之间的资源，防止不同网站之间的资源滥用，本文将从三个部分讲解同源策略：
第一点 what：什么是同源策略？
第二点 why：为什么需要同源策略？
第三点 how：如何解决经典的跨域问题？
0x01 什么是同源策略？
早期的互联网应用，大多只有纯文本，随着互联网的发展，网页资源越来越丰富，比如其他文档、媒体资源、cookie、javascript 命名空间等，为了能够在浏览器范围内，能够安全的进行实体交互，Netscape 工程师设计开发了 SOP（同源策略）的规则用于管理这些资源之间的关系。
说起来，同源策略就是浏览器为了不同网站之间的资源安全的访问而制定的一系列策略，关于同源策略，需要解决两个问题：
1、什么样的情况下属于同源？
首先我们要理解一个网页的不同组成部分：协议、主机、端口，比如：
https://www.xazlsec.com:443/
其中 https 为协议、www.xazlsec.com 为主机、443 为端口，认识这个之后，不同的浏览器所设置的同源规则有所差异，比如谷歌浏览器和火狐浏览器认为只有协议+主机+端口都一致的情况下才是同源，而 IE 浏览器不管端口只要协议+主机一致，则认为是同源。
下面以 https://www.xazlsec.com/dir/test.html 为基准，看看下面的 url 是否同源（以谷歌浏览器为例）：
| 网址 | 结果 | 原因 |
|---|---|---|
| http://www.xazlsec.com/dir/page.htm | 同源 | 协议、主机和端口匹配 |
| http://www.xazlsec.com/dir2/other.htm | 同源 | 协议、主机和端口匹配 |
| http://www.xazlsec.com:81/dir/test.htm | 不同源 | 相同的协议和主机，但端口不同 (81) |
| https://www.xazlsec.com/dir/test.htm | 不同源 | 同一主机，但架构/协议 (https) 不同 |
| http://demo.xazlsec.com/dir/test.htm | 不同源 | 架构和端口相同，但主机不同 (demo.xazlsec.com) |
| http://xazlsec.com/dir/test.htm | 不同源 | 主机不同（xazlsec.com） |
| http://www2.xazlsec.com/dir/test.htm | 不同源 | 主机不同 (www2.xazlsec.com) |
2、不同源之间的资源访问规则是什么样的？
不同源之间的资源默认是不允许相互访问的，除了以下几个特例：
页面链接，比如 a 标签
重定向
表单提交
跨域资源的引入，比如 script、img、link、iframe 等标签
同源策略定义的规则如下：
每个网站都有自己的资源，比如 cookie、dom 和 Javascript 命名空间
每个页面的来源都来自于 URL（ 通常是协议、域名和端口）
脚本在它所加载源的上下文中执行，从哪里加载资源并不重要，只有最终执行的地方才重要
许多资源都是被动资源，无法访问它们所加载上下文中的对象和资源
基于这些规则，假如站点 A 是起源站：
可以从源 B 加载的脚本，但是不能脚本执行是在 A 的上下文中
可以从源 B 加载 CSS 文件，但是无法获取源 B 的 css 原始文件
可以通过 iframe 从源 B 加载页面，但是无法通过 iframe 加载源 B 页面的 DOM 对象
可以从源 B 加载图像，但是无法获取该图像的像素
可以播放源 B 的视频，但是无法捕获该视频的截图
也就是有了这些规则，丰富的 web 内容才可以受到安全合理的保护，但是在实际的应用过程中，或多或少会存在跨域资源访问的情况，为了解决这类问题，出现了多种跨域资源访问的解决方案，比如 XmlHTTPRequest、JSONP、XDomainRequest 和 CORS。
0x02 为什么需要同源策略
要说为什么，那么假如没有同源策略会怎么样？比如：
cookie 是每个网站都特有的内容，用于区分不同用户的身份，假如没有同源策略，在访问任意网站时，都会携带所有浏览器保存的 cookie，一方面其他网站的身份信息会存在泄漏的风险，另一方面 cookie 值的命名会存在重复，导致身份信息不可用
iframe 可以加载任意网站的网页内容，假如没有同源策略，可以通过 iframe 获取任意网站的内容，如果访问的内容中包含用户的敏感信息，那么就会存在信息泄漏的风险，以这种方式伪造网站，足以以假乱真
0x03 如何解决经典的跨域问题？
前文中提到过，为了解决跨域请求资源的问题，需要使用 XmlHTTPRequest、JSONP、XDomainRequest 和 CORS 进行扩展。
XmlHTTPRequest
XmlHTTPRequest 是一种 HTTP 通信方法，支持资源之间的异步通信，避免每次更新内容都要刷新网页。
XmlHTTPRequest 可以向不同的源发送请求，但是无法读取响应的内容，除非同源。
JSONP
JSONP 是一种 hack 技术，并不是官方解决跨域的手段，JSONP 只能进行 GET 请求，主要利用 <script> 标签来发起请求，来达到突破浏览器同源策略的目的。
XDomainRequest
XDomainRequest 是微软在 IE8 和 IE9 中的实现，实现方式与 CORS 几乎相同。
CORS
CORS 是一套跨域资源共享机制，基于 HTTP 头实现，允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。
0x04 总结
本文算是一个科普文，了解浏览器的同源策略是怎么一回事，这个基础对于前端问题的学习至关重要，比如 xss 漏洞的利用、CSRF 漏洞的利用等。