从0到1了解同源策略

前言 

同源策略是由Netscape（网景）公司于1995年引入浏览器的重要安全策略。目前，所有支持JavaScript的浏览器都实行这个策略。

它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

什么是同源策略？

同源策略（same origin policy）是netScape（网景）提出的一个安全策略，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

具体表现为浏览器在执行脚本前，会判断脚本是否与打开的网页是同源的，判断协议、域名、端口是否都相同，相同则表示同源。其中一项不相同就表示跨域访问。会在控制台报一个CORS异常，目的是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出请求后请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

浏览器采用同源策略，在没有明确授权的情况下，禁止页面加载或执行与自身不同源的任何脚本。

判断是否违反同源策略，就是看请求的资源和目前文件来源，是否有三个相同：

1. 协议相同
2. 域名相同
3. 端口号相同

同源策略的影响

同源策略主要影响在三个方面：1.DOM 同源；2.XMLHttpRequest 同源；3.存储性内容同源。

但是也有一些不考虑同源策略的特殊情况：

1. 页面中的链接，重定向以及表单提交是不会受到同源策略限制的(未授权情况下，ajax 的表单提交是不被允许的,但是普通的表单是可以直接跨域的)。
2. <script>、<img>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

1.DOM 同源策略：

禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的(比如一个恶意网站的页面通过iframe嵌入了银行的登录页面，二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码)

 2.XMLHttpRequest 同源策略：

 禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求(这一点里面其实包括了 ajax)。

3.存储性内容同源策略：

js中无法访问不属于同个源的cookie、LocalStorage、IndexedDB 中存储的内容。

具体来说，cookie和LocalStorage在控制哪些源可以访问的问题上还是细微的差别，父域在设置cookie的时候可以设定允许子域访问这段cookie，同时Cookie只和域名以及路径关联，如果是同个域名不同端口的源依然是共享同个域名下的Cookie的，而LocalStorage则是以源为单位进行管理，相互独立，不同源之间无法相互访问LocalStorage中的内容。

 从上就能看出来同源策略的作用：

1. 防止恶意网页可以获取其他网站的本地数据。

2. 防止恶意网站iframe其他网站的时候，获取数据。

3. 防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。

总结

从上面可以看出，同源策略确实是为了保障网络安全的。但是我们完成前后端分离的项目时，也因为浏览器同源策略的限制，导致我们在不同源之间通信，出现了浏览器接收不到服务端返回数据的问题。因此，我们还需要学习解决跨域的方法，如何解决跨域问题---戳我传送。