本文首发于个人网站：「一名前端攻城师的个人修养」。
在没有安全保障的 Web 网页中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据安全。
而页面中最基础、最核心的安全策略就是 同源策略 Same Origin Policy。
同源策略
同源
如果两个 URL 的协议、域名和端口号都相同，我们就称这两个 URL 同源。
浏览器默认两个相同的源之前是可以互相访问资源并且操作 DOM 的。而两个不同的源之间如果想要相互访问资源或者操作 DOM，那么就需要有一套基础的安全策略的制约。这就是同源策略。
同源策略主要表现在 DOM、Web 数据和网络三个层面。
DOM 层面
同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读写的操作。
比如我们打开网页 A，并从网页 A 中跳转进入了网页 B。
- 如果网页 B 与网页 A 同源，那么在网页 B 中可以操控网页 A 的 DOM。
- 如果网页 B 与网页 A 不同源，那么在网页 B 中无法操控网页 A 的 DOM。
数据层面
同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。由于同源策略，我们无法从不同源的站点中读取其他源站点的 Cookie、IndexDB、LocalStorage 等数据。
网络层面
同源策略还限制了通过 XMLHttpRequest 等方式将站点的数据发送到不通过源的站点。
安全性和便利性的权衡
安全性和便利性是相互对立的，让不同源之间觉得隔离，肯定是最安全的措施，但这也会让 Web 项目变得难以开发和使用。因此，同源策略需要在这两者之间做出权衡，即出让一部分安全性来满足便利性。
但是出让安全性又会导致许多安全问题，最典型的就是 跨站脚本攻击 Cross Site Scripting XSS 攻击和 跨站请求伪造 Cross Size Request Forgery CSRF 攻击。
在这里我们介绍浏览器同源策略出让了哪些安全性。
页面可以嵌入第三方资源
如果同源策略让一个页面的所有资源都来自同一个源，显然违背了 Web 的初衷，并带来了许多限制。因此浏览器是支持引用外部资源文件的，但是这也导致了许多安全问题。
比如如果引入了恶意脚本，可能这些脚本就能够将页面的敏感数据比如 Cookie、IndexDB、LocalStorage 等等通过 XSS 的手段发送到指定服务器。
为了解决 XSS 攻击，浏览器中引入了 内容安全策略 Content Safe Policy CSP。CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。
跨域资源共享和跨文档消息机制
默认情况下，如果打开某一个网站页面，那么该网站页面可能会通过 XMLHttpRequest 或者 Fetch 来请求其他服务器的资源。但是同源策略会阻止其向其他服务器发出请求，但是这样会很大程度制约我们的生产力。
为了解决这个问题，便引入了 跨域资源共享 Cross Origin Resource Sharing CORS。CORS 可以帮助进行跨域访问控制，并且使得跨域数据传输在安全中进行。
前面提到，如果两个页面不是同源的，那么无法相互操纵 DOM。不过在实际应用中，不同源的 DOM 网忘需要进行通信，因此浏览器又引入了 跨文档消息机制，即通过 window.postMessage 和 JavaScript 接口来和不同源的 DOM 进行通信。
