浏览器同源策略

同源的概念

对于两个URL，若协议、主机名称、端口相同，则这两个URL就是同源的。

下面先来考虑几种情况：

这看起来方便，但如果打开了一个恶意网站，那么这个恶意网站就有机会读取密码，用户的Cookie 等一些敏感信息了。

因此，如果这涉及到两个不同源的页面，浏览器会限制其对另一个 window 的访问，这样，就避免了如Cookie被盗取等危险的情况。

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

Cookie 可以通过修改其 Domain和Path属性，来限制当前Cookie的作用范围。

同源策略会限制通过 XMLHttpRequest 等异步方式向不同域发送网络请求。但是链接跳转、表单提交、重定向仍然是不受限制的。

安全性和便利性往往是对立的，安全性过强就对于开发者来说就不方便了，比如说使用CDN。

如果页面只是引用了第三方网站（如CDN）的样式，视频/图片等，就不会受到同源策略的限制了。引入视频啥的毕竟不是脚本，不容易出现盗取用户信息的情况。

**对于脚本的引入，也是不受同源策略的限制。**不过，这就可能会有坏人往页面注入一些恶意代码，然后执行，进而盗取信息了。

可以考虑使用内容安全策略 CSP 来限制这一方面的内容

但这也一定程度上阻碍了这两个页面的正常通信，所以浏览器提供了 postMessage 这样的API来进行安全的跨域通信。

此外，例如 close,focus 等API不会读取网页中的隐私信息也是不受限制的。

这个特性也可以被用来解决跨域带来的负面影响，一个典型的例子是 JSONP。当需要发起一个请求时，可以带上返回函数的名称，在浏览器中添加一个 script 标签。然后这个请求就返回一个带有函数调用的JS代码，来将请求的数据传递给发起接口的调用者。

但是，JSONP只支持GET请求，且实现较为繁琐。

跨域资源共享(Cross-origin resource sharing)是为了不同站点下的交互，而设计的一套HTTP请求和响应头。

默认情况下，直接向另一个源发送异步请求（如www.baidu.com向www.github.com）会被浏览器阻止。但是，如果www.github.com增加了一些跨域的响应头，浏览器便不会阻止这个请求。

有时候，在CORS策略下，跨域请求之前会发送一次预检的请求(OPTIONS请求方法)，而有些请求则不需要。

对于需要发送预检请求的请求，则这个请求称为复杂请求。而不需要发送预检请求的请求则称为简单请求。

如果一个请求满足下面的条件，则称为简单请求：

HTTP方法：GET/POST/HEAD
Headers字段：Accept/Accept-Language/Content-Language/Content-Type
Content-Type:
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded

详细见 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

对于简单请求，需要在响应中加上；对于复杂请求，则需要在预检请求中加上。

响应头	解释
Access-Control-Allow-Origin	允许访问该资源的域
Access-Control-Allow-Methods	允许访问该资源的方法
Access-Control-Allow-Headers	允许访问该资源时添加的头部
Access-Control-Allow-Credentials	允许请求带上认证信息，如Cookie、Authorization Headers
Access-Control-Max-Age	跨域信息的缓存时间

请求头	解释
Access-Control-Request-Method	将要请求的方法
Access-Control-Request-Headers	复杂请求包含的头部信息

通过在即将部署网站的服务器上添加一个代理，就可以使得请求URL属于同源URL了。