同源概念: 如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源
举例:
<https://time.geekbang.org/?category=1>
<https://time.geekbang.org/?category=0>
同源策略概念:
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
DOM层面: 策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
数据层面: 策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。
网络层面: 策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。
安全和便利性的权衡
1. 页面中可以嵌入第三方资源
最初的浏览器都是支持外部引用资源文件的，不过这会引入很多恶意脚本。
为了解决 XSS 攻击，浏览器中引入了内容安全策略，称为 CSP。CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码
2. 跨域资源共享和跨文档消息机制
如果打开极客邦的官网页面，在官网页面中通过 XMLHttpRequest 或者 Fetch 来请求 InfoQ 中的资源，这时同源策略会阻止其向 InfoQ 发出请求，这样会大大制约我们的生产力。
为了解决这个问题，我们引入了跨域资源共享（CORS），使用该机制可以进行跨域访问控制，从而使跨域数据传输得以安全进行。
在介绍同源策略时，我们说明了如果两个页面不是同源的，则无法相互操纵 DOM。不过在实际应用中，经常需要两个不同源的 DOM 之间进行通信，于是浏览器中又引入了跨文档消息机制，可以通过 window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信。
参考: 极客时间-浏览器工作原理与实践