【浏览器】之同源策略
什么是浏览器同源策略?
同源：如果两个 URL 的协议、域名（主机名）和端口都相同，我们就称这两个 URL 同源。
这两个 URL 是同源的
1 | https://time.geekbang.org/?category=1 |
源：就是协议、域名和端口号。
同源策略：SOP（Same origin policy）是由 Netscape 公司 1995 年引入浏览器的一种约定，是浏览器最核心、最基本的安全功能，若缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指”协议+域名+端口”三者相同，若两个 URL 的协议、域名、端口号都相同，则两者为同源，有一个不同则非同源，即便两个不同的域名指向同一个 ip 地址，也是非同源的
非同源的 URL 在没有明确授权的情况下，不能读写对方资源（不能相互通信）
具体来讲，同源策略主要表现在 DOM、Web 数据和网络这三个层面。
第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
第二个，数据层面。同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener 来访问第一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容。你可以自己试一下，这里我们就不做演示了。
第三个，网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。你还记得在《17 | WebAPI：XMLHttpRequest 是怎么实现的？》这篇文章的末尾分析的 XMLHttpRequest 在使用过程中所遇到的坑吗？其中第一个坑就是在默认情况下不能访问跨域的资源。
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
安全与便利
同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。
同源策略将限制以下几种行为：
（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js 对象无法获得
（3）AJAX 请求不能发送
以下两种不受同源策略的限制：
（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制
（2）跨域资源的引入，但是 js 不能读写加载的内容，如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等
注意：
同源策略是浏览器做的限制，对服务器与服务器之间的通信不做限制
1. 页面中可以嵌入第三方资源
2. 跨域资源共享和跨文档消息机制
总结
同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。
不过鱼和熊掌不可兼得，要绝对的安全就要牺牲掉便利性，因此我们要在这二者之间做权衡，找到中间的一个平衡点，也就是目前的页面安全策略原型。总结起来，它具备以下三个特点：
页面中可以引用第三方资源，不过这也暴露了很多诸如 XSS 的安全问题，因此又在这种开放的基础之上引入了 CSP 来限制其自由程度。 使用 XMLHttpRequest 和 Fetch 都是无法直接进行跨域请求的，因此浏览器又在这种严格策略的基础之上引入了跨域资源共享策略（CORS），让其可以安全地进行跨域操作。 两个不同源的 DOM 是不能相互操纵的，因此，浏览器中又实现了跨文档消息机制（window.postMessage），让其可以比较安全地通信
原文地址：【浏览器】之 同源策略