同源策略：域名、端口、协议都相同的网站被称为同源。
同站点：协议和根域名相同的网站被称为同站点。
同源策略限制三个层面：
- 页面层面。相同源之间可以相互访问资源、操作DOM，不同源就受同源策略的限制不能访问资源和操作DOM。
- 数据层面。不同源的页面无法访问到对方的Cookie、IndexDB、LocalStorage等信息。
- 网络层面。xhr不支持向不同源发送请求，也就是不支持跨域。
但是同源策略也是有问题的，它强行限制一个页面的资源都来源于同一个源，但是这是不可能的！但是全放开，可以加载任意源的资源也是不可能的！
比如攻击者修改HTML文件，在HTML增加一个外部script链接，没有同源策略的限制，该链接就可以获取到当前页面的Cookie、IndexDB、LocalStorage信息，并发送给服务器，也就是跨站脚本攻击（XSS）。
为了解决XSS攻击，浏览器引入了CSP策略，也就是让服务器决定浏览器可以加载哪些资源，并执行是否能够执行内联的js代码。
CSP策略的开启有两种方式：
- header中的 Content-Security-Policy字段
- meta中配置http-equiv为Content-Security-Policy，content为value。
比如：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
其中规定：
-
script只信任当前源。
-
css的src只信任cdn.example.org和third-party.org。
-
ifame只能加载HTTPS协议的。
除此之外，由于同源策略限制了不同源之间不能通信，但是在实际应用中，我们经常会遇到不同源之间进行通信，比如页面中嵌入一个iframe，外层页面要和iframe进行通信，这时可以使用postMessage进行通信（跨文档消息机制）。
同源策略还限制了xhr不能进行跨域请求，因此就有了跨域资源共享（CORS）。
