同源策略（Same-origin policy）：
同源：如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源 。
//以下两个url同源
https://juejin.cn/collection
https://juejin.cn/user
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
同源策略主要表现在 DOM、Web 数据和网络这三个层面。同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。
1.DOM 层面
同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
2.数据层面
同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。
3.网络层面
同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。
不过安全性和便利性是相互对立的，让不同的源之间绝对隔离，无疑是最安全的措施，但这也会使得 Web 项目难以开发和使用。因此我们就要在这之间做出权衡，出让一些安全性来满足便利性；找到中间的一个平衡点，也就是目前的页面安全策略原型。
页面安全策略原型
1.页面中可以引用第三方资源
html页面可以通过< script >、< link >等标签引入JavaScript以及CSS文件。 不过这也暴露了很多诸如 XSS 的安全问题，因此又在这种开放的基础之上引入了 CSP 来限制其自由程度。
2.跨域资源共享（CORS）
在介绍同源策略时，我们说明了如果两个页面不是同源的，则无法通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。使用跨域资源共享机制可以进行跨域访问控制，从而使跨域数据传输得以安全进行。
3.跨文档消息机制
在介绍同源策略时，我们说明了如果两个页面不是同源的，则无法相互操纵 DOM。不过在实际应用中，经常需要两个不同源的 DOM 之间进行通信，于是浏览器中又引入了跨文档消息机制，可以通过 window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信。
而出让安全性又带来了很多安全问题，最典型的是 XSS 攻击和 CSRF 攻击。
XSS攻击可以查看： [浏览器安全之Web页面安全（二）XSS （跨站脚本）攻击] (juejin.cn/post/716871…)
CSRF攻击可以查看：[浏览器安全之Web页面安全（三）CSRF（跨站请求伪造）攻击]juejin.cn/post/716942…
有问题欢迎在评论区指出！相互交流才能一起进步！
