页面中最基础、最核心的安全策略：同源策略（Same Origin Policy）

什么是同源策略

如果两个URL 协议、域名和端口都相同，我们就称这两个URL同源。

比如：

https://github.com/?type=1

https://github.com/?type=2

相同的https协议，相同域名，相同端口80， 所以我们说他们同源。

浏览器默认两个相同源之间是可以互相访问资源和操作DOM的。两个不同源之间若想要相互访问资源或者操作DOM，会有一套基础的安全策略制约，我们把这个称为同源策略。

同源策略主要表现在 DOM、Web数据和网络这三个层面

DOM层面

同源策略限制了来自不同源的JS脚本对当前DOM对象读和写的操作。

例如：

打开两个同源的页面

let pdom = opener.document
pdom.body.style.display = "none"

代码中opener指向第一个window对象，我们可以通过操作opener来操作第一个页面，在第二个页面的控制台上输入代码，就可以成功隐藏。

数据层面

同源策略限制了不同源站点读取当前站点的Cookie、IndexDB、LocalStorage等数据。

由于同源策略无法通过第二个页面的opener来访问第一个页面的.

网络层面

同源策略限制了通过 XMLHttpRequest 等方式将站点数据发送给不同源的站点。

默认情况下不能访问跨域的资源。

安全和便利性的权衡

合理的利用安全策略。

1.页面中可以嵌入第三方资源

web世界是开放的，但是同源策略要让一个页面所有资源都来自于一个源。现实中图片、CDN来自于各种。

但是又来自于恶意第三方的风险。

为了解决XSS攻击，浏览器引入了内容安全策略，称为 CSP。

CSP 内容安全策略

CSP的核心思想就是让服务器决定浏览器可以加载哪些资源，让服务器决定浏览器能否执行内敛JS代码。

2. 跨域资源共享和跨文档消息机制

默认请下不同源的请求会被组织。为了解决这个问题，我们引入 跨域资源共享（CORS），该机制可以进行跨域访问控制，从而是跨域数据传输得以安全进行。

两个不同源的DOM还有通信的需要，于是浏览器引入 跨文档消息机制，可以通过 window.postMessage的JS接口来和不同源的DOM进行通信。